# 小程序的优化
双线程架构相关
- setData 频繁操作（底层是因为双线程架构），可以使用 wx.nextTick 将多次操作延迟到下一次事件循环里
- 不需要渲染的数据使用_或者直接挂在在 this 下，不要放在 data 中
- 双线程原因，JS 在独立线程中，setTimeout/setInterval 将作用于全局，所以使用应注意 clear 掉
首屏加载相关
- 图片懒加载和下拉刷新
- 分包和预加载（在 onLoad 总发送 http 请求）
- 骨架屏
代码相关
- 减少代码包体积：开启代码压缩，善用缓存，减少 http 请求
- 使用组件：将重复的功能进行统一的封装
- 在频繁操作的地方使用防抖或节流，比如 onPageScoll
- 封装重复逻辑，比如用 promise 封装 wx.request。
如何测试优化结果
- 使用 audits （体验评分）工具，浏览器中对应 Proformance - 查看首屏加载时长 - 网络请求时长 - 通过给出的体验报告，去逐步进行优化。
# 遇到的问题，以及如何解决的。
页面栈爆栈
- 小程序默认页面栈是 10 层，超出则会跳转失败。
- 自己封装一个 router，每次跳转时判断一下，如果到了 9 层，在调转就使用 wx.redirectTo
异步问题
- 很多的 API 都是异步的，比如 wx.request
- 为了方便使用，将异步封装为 promise
wxss 编写问题
- wxss 编写太原生
- 使用 easy-less 或者 webpack 写 less 然后转换为 wxss
IphoneX 的适配
- 适配下边框 20rpx
- 通过判断设备类型来编写适配代码。
相机拍照后照片转 base64
代码语言：javascript复制let base64Img = wx.getFileSystemManager().readFileSync(temPath, "base64");1
小程序自定义 Less
参考：在微信小程序中使用 less(最优方式)open in new window
小程序 wxml 属性如何折行
setting.json 中：
代码语言：javascript复制"files.associations": {
"*.wxss": "css",
"*.wxs": "javascript",
"*.wxml": "html"
},
"html.format.wrapAttributes": "force-aligned",
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},1 2 3 4 5 6 7 8 9 10 11 12
# 组件相关
自定义 navbar
参考：https://www.cnblogs.com/sese/p/9761713.html
小程序热更新
- 参考：https://www.cnblogs.com/zjy850984598/p/11016748.html
- 官方文档(getUpdateManager)：https://developers.weixin.qq.com/miniprogram/dev/api/base/update/wx.getUpdateManager.html
# 其他
小程序和 Vue 的区别
- 运行环境
- 声明周期
- 代码编写
- 组件通讯
- 对于特定的功能，小程序需要基础的支持
TypeScript 给你带来了什么？
- 开发阶段的静态类型检测
- 友好的阅读体验
- 类，接口，泛型的提供
