# taro-template **Repository Path**: github-29727412/taro-template ## Basic Information - **Project Name**: taro-template - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-04-29 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # miniProgram > 项目遵循[React](https://react.docschina.org/)语法，开发框架[Taro](https://taro.aotu.io/)，多端适配的UI组件库[Taro UI](https://taro-ui.aotu.io/#/). 本项目使用commit规范，stylelint检查scss，eslint检查js,prettier代码风格的校验 ## 代码规范 > 代码规范按照Taro官网的[Taro规范](https://nervjs.github.io/taro/docs/spec-for-taro.html) **注：** 使用ESLint可以减少代码出错率 ## 书写顺序 > 在 Taro 组件中会包含类静态属性、类属性、生命周期等的类成员，其书写顺序最好遵循以下约定（顺序从上至下） 1. static 静态方法 2. constructor 3. componentWillMount 页面加载时触发，一个页面只会调用一次，此时页面 DOM 尚未准备好，还不能和视图层进行交互 4. componentDidMount 页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互 5. componentWillReceiveProps 组件获取props 6. shouldComponentUpdate 页面是否需要更新，返回 false 不继续更新，否则继续走更新流程 7. componentWillUpdate 页面即将更新 8. componentDidUpdate 页面更新完毕 9. componentWillUnmount 页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时 10. 点击回调或者事件回调 比如 onClickSubmit() 或者 onChangeDescription() 11. render > taro 页面 1. config 2. constructor 3. componentWillMount //onLoad 4. componentDidMount 5. componentDidShow //onShow 6. componentDidHide // onHide 7. componentWillUnmount //页面卸载 8. onShareAppMessage 9. onPullDownRefresh 10. onReachBottom 11. onPageScroll 12. 点击回调或者事件回调 13. render ## 本地安装 1 安装依赖 taro 版本2.1.5 ```bash # 使用 yarn 安装依赖 yarn # OR 使用 cnpm 安装依赖 cnpm install # OR 使用 npm 安装依赖 npm install ``` 2 实时编译 ```bash # yarn yarn dev:weapp # npm script npm run dev:weapp ``` 3 项目打包 ```bash # yarn yarn buid:weapp # npm script npm run build:weapp ``` **注：** 其他端操作命令参考Taro[安装及使用](https://nervjs.github.io/taro/docs/GETTING-STARTED.html) > 其他命令 + 更新 Taro CLI 工具 ` taro update self ` + 更新项目中 Taro 相关的依赖 `taro update project` + 检测 Taro 环境及依赖 `taro info` + 检查项目中的错误 `taro doctor` + 快速生成页面 `Taro create --name [页面名称] ` ## 性能优化 > 建议从以下几点: + 图片优化 - 有透明背景的使用png,没有的使用jpg, - 动画使用css动画，帧动画，apng， gif - 使用图片预加载 - 使用cdn,http缓存，渐进式 - 图片懒加载(使用自带api, 参考[小程序懒加载](https://www.jianshu.com/p/9411fc92dd43)) + 代码优化 - 删除多余代码，死代码, 提炼公共代码 - ui组件使用按需加载 + setState使用 - 避免一次性更新巨大的数据 - 避免频繁地调用 setState - 避免后台态页面进行 setState + 列表渲染优化 - 上拉加载分页时，每次setData下一页的数据(taro已做) + 后台运行代码 - 页面销毁或是隐藏时进行销毁定时器 - 少使用定时器 + 数据优化 - 使用数据预加载 `$preload` + onPageScroll使用 - 避免频繁地调用 setState(使用节流函数) + 监听函数使用 - 及时回收监听函数，回收内存，如Observer + api使用 -引用domain 中的api时要具体到文件，可以减少冗余代码 **注：** 不需要更新视图的变量不要放在state里，组件要尽量判断shouldComponentUpdate 是否更新。 具体参考[最佳实践](https://taro-docs.jd.com/taro/docs/best-practice.html),[性能优化实践 ](https://taro-docs.jd.com/taro/docs/optimized-practice.html) ## 体验优化 + 首屏加载 - 变动频率大的页面(模板专题页) - 提前请求数据 > 异步请求可以在页面onLoad就加载，不需要等页面ready后在异步请求数据；当然，如果能在前置页面点击跳转时预请求当前页的核心异步请求，效果会更好； - 利用缓存 > 利用storage,对变动频率比较低的异步数据进行缓存，二次启动时，先利用缓存数据进行初始化渲染，然后后台进行异步数据的更新，这不仅优化了性能，在无网环境下，用户也能很顺畅的使用到关键服务； - 变动频率小的页面(商品详情页) - [骨架屏](https://segmentfault.com/a/1190000015876164)的占位 > 实现方案可参考[前端骨架屏方案](http://taro-ext.jd.com/plugin/view/5d5385493da7cb07dbc5cf13) - 提前请求数据 - 利用缓存 **注：** h5 框架webpack需配置优化 ## 项目目录结构 ``` bash │ .editorconfig │ .eslintrc │ .gitignore │ package.json │ project.config.json │ README.md │ yarn.lock │ ├─.idea │ ├─config 项目配置文件 │ dev.js │ index.js │ prod.js │ │ └─src │ app.js │ app.scss // 全局css │ index.html │ ├─assets │ ├─fonts // 字体文件 │ │ iconfont.scss │ │ │ ├─images // 图片 │ │ └─tab │ │ │ └─styles │ base.scss // 基础css │ mixins.scss // scss 混入文件 │ variables.scss // 主题文件 ├─constants // 静态变量 │ empty.js │ index.js │ order.js │ tabPages.js │ ├─package // 子包 │ ├─components // 组件 两个以上的页面共用 │ └─common // 公共组件 │ ├─XtEmpty // 显示空组件 │ │ │ └─XtNavBar // 自定义头部 │ ├─config // 业务配置 │ index.js │ ├─pages │ ├─demo │ │ components // 页面内私有组件 │ │ index.js // 页面逻辑 │ │ index.scss // 页面样式 │ │ │ └─home // tab页面 │ ├─bestChoice │ │ │ ├─cart │ │ │ ├─home │ │ │ └─my │ ├─plugins // 插件 ├─serve │ │ request.js // http请求 │ │ │ └─api // 接口封装 │ base.js │ home.js │ ├─store // 状态管理 │ │ index.js │ │ │ ├─actions │ │ index.js │ │ userInfo.js │ │ │ ├─reducers │ │ index.js │ │ mobile.js │ │ userInfo.js │ │ │ └─types │ mobile.js │ userInfo.js │ └─utils tips.js // 提示类 tools.js // 工具类 wxTools.js // 微信封装 compute.js bem.js ```