安装依赖
pnpm i
启动开发环境
pnpm dev:weapp
编译小程序
pnpm build:weapp
请保持node版本大于等于16.0,
├── dist # 构建相关
├── config # 关于taro的一些开发端的配置
├── public # 静态资源
├── src # 源代码
│ ├── api # 所有请求
│ ├── components # 全局公用组件
│ ├── hooks # 通用的hooks方法
│ ├── models # 缓存的各个数据模块
│ ├── pages # 页面形象
│ ├── static # 静态资源
│ ├── store # dvajs集成的redux作为数据缓存
│ ├── utils # 全局公用方法
│ ├── app.config.js # 所有关于小程序业务及环境的配置
│ ├── app.jsx # 小程序Root页面
│ ├── context.js # 主题配置
│ ├── dva.js # dva的配置
│ └── index.html # html5页面
├── types # TS类型管理
├── .env.xxx # 环境变量配置
├── babel.config.js # babel编译配置
├── project.config # 项目配置
├── project.tt.json # 项目配置
└── package.json # package.json
npm install
"dev:weapp": "npm run build:weapp:dev -- --watch ",
"dev:weapp:prod": "npm run build:weapp -- --watch ",
"dev:weapp:stage": "npm run build:weapp:stage -- --watch ",
"build:weapp": "taro build --type weapp --mode prod",
"build:weapp:stage": "taro build --type weapp --mode stage",
"build:weapp:dev": "taro build --type weapp --mode dev",
本项目的风格指南主要是参照 vue 官方的风格指南。在真正开始使用该项目之前建议先阅读一遍指南,这能帮助让你写出更规范和统一的代码。
对于写出优雅的css,我有以下几点总结:
- 合理的语义化标签例如
- 等等....
- 擅用英文缩写
- 合理的css编写规范:块级命名
- 不要滥用id选择器和 !important
- 按需使用sass等预编译器
- 合理合并与拆分
- BFC明确以及模块区域功能注释
- 注释注释写注释
- 不要写魔鬼数字
- 嵌套不要过深
- 合理抽取组件及函数
- 注意边界条件
- ES2017代码风格
挑一些项目中经常发现一些问题
if (sourceId === 123) { .... } else if (sourceId === 345) { .... }
诸如此类没有注释、难以理解其代表意义的常量(0、1这种)都称之为魔鬼数字。
也许当时开发你知道这些数字的含义,但当过几个月之后,或者开发人员流动以后,这些东西就会很麻烦。
通常的解决办法是:用一眼就能看懂的常量定义魔鬼数字或者备注明确,如:
const BEIJING = 123; const SHANGHAI = 345 if (sourceId === BEIJING) { .... } else if (sourceId === SHANGHAI) { .... }
bad Code 从命名无法知道返回值类型
function showFriendsList() {....} // 现在问,你知道这个返回的是一个数组,还是一个对象,还是true or false。你能答的上来否?
good Code 对于返回true or false的函数,最好以should/is/can/has开头
function shouldShowFriendsList() {...} function isEmpty() {...} function canCreateDocuments() {...} function hasLicense() {...}
bad Code 传参无说明
getSVG(api, isGet, isSet){// 到底啥意思 return {} };
good Code 对于返回true or false的函数,最好以should/is/can/has开头
/** * @description: 获得svg * @api {string|Array<string>} * @isGet {boolean} * @isSet {boolean} * @return {*} * @Date: 2021-08-17 12:21:22 */ getSVG(api, isGet, isSet){ // true和false啥意思,一目不了然 return {} };
bad Code 无法辨别函数意图
function emlU(user) { .... }
good Code 动词开头,函数意图就很明显
function sendEmailToUser(user) { .... }