2024-05-24-【小程序】小程序踩坑日记

1. 小程序开发、体验、生产环境缓存数据共享问题
   利用wx.getAccountInfoSync()区分环境，为wx.setStorageSync()添加版本前缀

const envConf = {
  // 开发版-本地环境
  develop: {
    mode: "dev",
    staticUrl: "https://xxx",
    apiBaseUrl: "https://txxx",
    monitorId: "",
  },
  // 体验版-测试环境
  trial: {
    mode: "test",
    staticUrl: "https://xxx",
    apiBaseUrl: "https://txxx",
    monitorId: "xxx",
  },
  // 正式版-正式环境
  release: {
    mode: "prod",
    staticUrl: "https://xxx",
    apiBaseUrl: "https://xxx",
    monitorId: "xxx",
  },
};

module.exports = {
  env: envConf[wx.getAccountInfoSync().miniProgram.envVersion],
};

2. IOS 屏幕适配（刘海屏、底部横条）

// 兼容IOS12以下
margin-bottom: constant(safe-area-inset-bottom);
// 兼容IOS12以上
margin-bottom: env(safe-area-inset-bottom);

3. 10 层层级页面跳转

• 避免循环操作：小程序原生页面支持的最大层级不超过 10 层，正常业务流程或闭环容易造成 10 层问题，toast、弹窗等不受限于层级问题
• 层级页面跳转、兼容性、缓存

4. 滚动穿透

5. 缓存
   微信给每个小程序提供了 10MB 的本地缓存，可以对一些数据和配置信息等进行相应的缓存来减少对服务器的请求，提升用户体验。

测试时清理缓存的方法：简单粗暴地将小程序删掉，重新进入生效，或者在开发模式下清理

7. 兼容性测试
   不同的手机系统（Android 和 IOS）、不同的微信版本、不同的分辨率

注意：小程序支持 PC 端了，所以还要考虑 Windows 和 OS 系统上微信端的兼容性

8. 网络测试
   网络切换测试：在 WIFI，2G/3G/4G/5G，无网之间切换

网速测试：自定义带宽后，进行测试

9. 性能测试
   页面的白屏时间、首屏时间、资源占用、页面渲染时间

小程序测试过程中经常遇到的坑：层级页面跳转、兼容性、缓存