# 小程序的优化

# 小程序的优化

双线程架构相关

• 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

let base64Img = wx.getFileSystemManager().readFileSync(temPath, "base64");

1

小程序自定义 Less

参考：在微信小程序中使用 less(最优方式)open in new window

小程序 wxml 属性如何折行

setting.json 中：

"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 给你带来了什么？

• 开发阶段的静态类型检测
• 友好的阅读体验
• 类，接口，泛型的提供