小程序的优化

双线程架构相关

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");

小程序自定义 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 给你带来了什么？

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

# 小程序的优化

# 遇到的问题，以及如何解决的。

# 组件相关

# 其他

小程序的优化

遇到的问题，以及如何解决的。

组件相关

其他