小程序的优化

双线程架构相关

  • 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 给你带来了什么?

  • 开发阶段的静态类型检测
  • 友好的阅读体验
  • 类,接口,泛型的提供
上次更新: 12/2/2022, 8:40:18 AM
Contributors: 九旬