@bagevent/taro-component

bagevent-taro

Quick Start

Make sure you have Node version >=10.16.0 and (Yarn >=1.9.4)

# install node , https://nodejs.org/en/
# install yarn , https://yarnpkg.com/lang/en/docs/install/
# install taro , https://taro-docs.jd.com/taro/docs/GETTING-STARTED.html
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# clone project
$ git clone https://github.com/BagEvent/bagevent-taro.git

# install package
$ npm install

# run app 开发时要把 `src/variables/index.less` 中引用调整为对应的 start 命令默认执行的 yarn dev:weapp
$ npm start

go to WeChat developer tools

# build project
$ npm run xbuild

# H5 开发
$ yarn dev:h5

File Structure

├── build : 打包相关文件
├── config : 配置文件
├── dist : 打包文件
├── scripts : node 脚本文件
├── src
│   ├── component : Taro组件
│   ├── original : 小程序原生内容(页面什么的)
│   ├── pages : 新的页面
│   ├── store : Mobx 状态控制文件
│   │   ├── pages : 页面 UI 相关的Mobx 状态控制文件，和页面一一对应，用来控制页面上显示的变换
│   │   ├── component : 组件 UI 相关的Mobx 状态控制文件，和组件一一对应，用来控制组件上显示的变换
│   ├── utils : 工具库
│   ├── variables : 主题文件
│   ├── app.less : 全局样式文件
│   ├── app.tsx : 组件入口
│   ├── ext.json : 小程序 ext.json
├── .eslintrc : 项目 ESLint 规则文件
├── .gitignore
├── .prettierrc : 项目自动格式化规则文件
├── .package.json

Style Guide

• 安装 ESLint 及 Prettier - Code formatter 插件，由配置文件 .prettierrc 及 .eslintrc 控制。 请解决每一条 Warning 。
• 普通 JS/TS 文件及文件夹，全小写，中线命名法，比如 char-comment、util.js、util-helper.js
• Taro 组件文件、Taro 组件样式文件、TypeScript 类定义 命名遵循 Pascal 命名法，例如 ReservationCard.jsx。组件定义名称和文件名保持一致。
• 方法及变量名，驼峰命名
• 路由级组件命名增加Page后缀，比如 EventPage.tsx
• Mobx 状态控制文件增加Store后缀，比如 page-store.ts。
• 页面 UI 和事件回调写在 Component 或 Page 的 Store 文件里。数据相关的方法应写在 store 下，命名时以功能而不是组件名命名。例如：src/store/component/top-navigation-bar-store.ts 和 src/store/page-store.ts

样式规范