构建自己的开源项目
微信小程序
项目目录结构
- components 目录:主要用来存放一些自定义组件相关的内容
- libs 目录:主要用来存放项目中依赖的第三方库。例如 jquery、seajs、qrcode、echarts 等。
- models 目录:主要用来封装与后台进行交互的 model 操作类。
- utils 目录:主要用来存放项目开发过程中要使用到的各种工具类,避免重复代码。
过程
1、自定义 tabBar
使用官方小程序示例中的 自定义 tabBar
2、引入字体图标
使用 在线 url
将字体 url 转成 base64 的格式后使用出现问题……
3、API Promise化
使用官方 扩展能力 API Promise化 miniprogram-api-promise 工具
4、封装接口
参考下面文档接合下
1 | // 同时发送异步代码的次数 |
5、状态管理
用官方 扩展能力 架构扩展中的 mobx-miniprogram
6、开启开发者工具中 “开启上传代码时样式文件自动不全” 功能,这样小程序会自动不全其余一些样式兼容性写法。
7、封装组件库
参考 vant 封装 icon、官方指南中自定义组件
8、分包
9、引入事件管理工具 mitt 来作为时间管理中心,来处理组件、界面传值。
10、开启开发者工具中 “增强编译”,可以使用 async/await。
11、加入简单的防抖和节流
建议
利用场景值做数据统计
在模块里随便更改 exports 的指向会造成未知的错误。推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰地知道两者之间的关系。
1 | // 例如 |
scroll-view
在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中 滚动是无法触发 onPullDownRefresh 的。
若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view,这样也能通过点击顶部状态栏回到页面顶部。
在特殊机型(例如 iphoneX、iphone 11)中,因为取消了物理按键,会出现手机底部区域被手机底部的小黑条遮挡的情况,此时可以使用 padding-bottom: env(safe-area-inset-bottom)
来告诉微信进行自动适配。
优化
启动慢主要从优化代码包上下手:
- 对静态资源进行优化,将非必要的静态资源文件上传到CDN
- 对小程序的组件进行依赖分析,过滤掉未使用的组件
- 对独立性比较强的页面进行独立分包,减少主包下载耗时
请求慢主要从预加载和缓存下手:
- 冷启动开启数据预拉取
- 页面路由切换时提前拉取数据
- 对数据进行缓存
交互慢需要从发起请求和页面渲染下手:
- 保障与用户体验相关的业务请求正常发送
- 页面分步渲染
以上是我对下列视频及文章的归纳和总结