小程序优化

网络请求优化(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html)

1. DNS 预解析域名
   • 方式一：配置方式
     • 作用：小程序一般会依赖一些网络请求（如逻辑层的 wx.request、渲染层的图片等网络资源），优化请求速度将会提升用户体验，而网络请求耗时中就包括 DNS 解析。DNS 预解析域名，是框架提供的一种在小程序启动时，提前解析业务域名的技术。
     • 配置流程：DNS 域名配置请求「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置
       1. 预解析域名无需填写协议头
       2. 预解析域名最多可添加 5 个
       3. 其他安全策略同服务器域名配置策略
   • 方式二：购买资源(https://fuwu.weixin.qq.com/search?tab=3&serviceType=4&industry=&scene=&type=&kw=httpDNS)
2. 网络请求超时时间
   1. 超时时间
      • 默认超时时间和最大超时时间都是 60s；
      • 超时时间可以在 app.json 或 game.json 中通过 networktimeout 配置。
   2. 使用限制
      • 网络请求的 referer header 不可设置。其格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
      • wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个；
      • wx.connectSocket 的最大并发限制是 5 个。
      • 小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用。
   3. 返回值编码
      • 建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码，小程序会尝试进行转换，但是会有转换失败的可能。
      • 小程序会自动对 BOM 头进行过滤（只过滤一个 BOM 头）
   4. 回调函数
      • 只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。

周期性更新(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/background-fetch.html)

• 作用：周期性更新能够在用户未打开小程序的情况下，也能从服务器提前拉取数据，当用户打开小程序时可以更快地渲染页面，减少用户等待时间，增强在弱网条件下的可用性。

数据预拉取(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/pre-fetch.html)

• 作用：预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度 。

DarkMode 适配指南(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html)

• 作用：根据系统主题展示不同的默认样式
• 兼容性：微信从 iOS 客户端 7.0.12、Android 客户端 7.0.13 开始正式支持 DarkMode，小程序也从基础库 v2.11.0、开发者工具 1.03.2004271 开始，为开发者提供小程序内的 DarkMode 适配能力

大屏适配指南(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/adapt.html)

• 目前市面上的用户设备大致可分为小屏的手机端、中屏的平板、大屏的 PC 端三类，而在这三类设备中又会有细小的尺寸差别，也称作屏幕碎片化。
• 随着小程序能够在越来越多的设备终端上运行，开发者也应该针对不同的屏幕尺寸进行相应的适配。

打开半屏小程序(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/openEmbeddedMiniProgram.html)

• 当小程序需要打开另一个小程序让用户进行快捷操作时，可将要打开的小程序以半屏的形态跳转。

响应显示区域变化(https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html)

• 监听窗口 onsize 或启用屏幕旋转

获取胶囊布局位置信息。坐标信息以屏幕左上角为原点(https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html)

获取微信 APP 的基础信息(https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getAppBaseInfo.html)

const appBaseInfo = wx.getAppBaseInfo();

console.log(appBaseInfo.SDKVersion);
console.log(appBaseInfo.enableDebug);
console.log(appBaseInfo.host);
console.log(appBaseInfo.language);
console.log(appBaseInfo.version);
console.log(appBaseInfo.theme);

是否打开调试开关(https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.setEnableDebug.html)

// 打开调试
wx.setEnableDebug({
    enableDebug: true
});

// 关闭调试
wx.setEnableDebug({
    enableDebug: false
});

获取小程序启动时的参数(https://developers.weixin.qq.com/miniprogram/dev/api/base/app/life-cycle/wx.getLaunchOptionsSync.html)

监听系统主题改变事件(https://developers.weixin.qq.com/miniprogram/dev/api/base/app/app-event/wx.onThemeChange.html)

监听小程序切前台事件(https://developers.weixin.qq.com/miniprogram/dev/api/base/app/app-event/wx.onAppShow.html)

获取当前小程序性能相关的信息(https://developers.weixin.qq.com/miniprogram/dev/api/base/performance/wx.getPerformance.html)

退出当前小程序。必须有点击行为才能调用成功(https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.exitMiniProgram.html)

小程序列表组件封装(https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html)