快速知悉

• 性能与体验 - 调试工具 。
• 弱网体验优化。
• 插件支付 API  。
• 插件增加蓝牙从机接口 。
• 视图层预加载媒体资源文件接口 wx.preloadAssets。

1.性能与体验-调试工具

为了协助开发者调试与优化小程序的性能与体验，我们提供了一些工具：

1.1 真机调试2.0 ：通过开发者工具调试真机运行环境。

使用介绍：微信开发者工具的「真机调试 2.0」功能，可以帮助开发者利用工具调试真机上的小程序表现，也包括了性能分析的能力。开启真机调试 2.0 的步骤请参考《真机调试 2.0 文档》。

1.2  开发者工具「模拟器」和「调试器」：新增了多项性能调试工具。

使用介绍：在在开发者工具「模拟器」中对小程序视图层分析和进行低端机模拟，在「调试器」环境中进行 JS 性能、内存占用分析。

逻辑层 JavaScript Profile：

开发者可以使用「模拟器」中的「Performance」或「JavaScript Profiler」面板，分析小程序逻辑层的 JS 执行情况。

逻辑层内存调试：

与真机调试 2.0 类似，开发者可以使用「模拟器」中的「memory」面板，获取小程序逻辑层的 JS 堆内存快照，分析内存分布情况，排查内存泄漏问题。

视图层调试：

开发者可以在模拟器底部打开当前页面的「视图层」调试工具。在工具中，可以通过「Performance」、「memory」、「Layer」、「Rendering」等面板调试小程序视图层的性能。

低端机模拟：

开发者可以在模拟器中开启「低端机模拟」，开发者工具会对 CPU 使用等进行一定限制，模拟低端机的使用体验。

1.3 体验评分：自动化检测小程序性能与体验问题，并为开发者提供优化建议

使用介绍：体验评分是一项给小程序的体验好坏打分的功能，它会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。

1.4  代码质量分析面板：静态分析开发者代码，给出优化建议。

使用介绍：开发者可以在调试器中切换到「代码质量」面板，开发者工具会对代码进行静态分析，开发者可以根据优化建议进行优化。

1.5  FPS 面板：展示页面当前的实时帧率。

使用介绍：为了便于开发者调试渲染层的交互性能，小程序基础库提供了选项开启 FPS 面板，开发者可以实时查看渲染层帧率。

2.弱网体验优化

在用户使用小程序时，可能会陷入某些网络不通畅的场景，此时一些严格依赖网络的功能可能就无法使用。为此我们计划提供一些措施来协助开发者优化弱网时小程序的使用体验。

目前，以下依赖网络的功能可以通过接入缓存管理器改善：

• 纯展示类的功能。
• 只依赖部分用户授权的功能。

缓存管理器：

注意：目前暂时只有 IOS 支持。

小程序提供了一个无侵入式的缓存管理器，开发者可以不需要修改原有业务代码进行接入。缓存管理器主要有以下几个能力：

• 在网络通畅时，对符合规则的网络请求进行缓存；在弱网时对该网络请求使用缓存返回。
• 在网络通畅时，对部分 wx api 调用进行缓存；在弱网时对这些 wx api 的调用使用缓存返回。

快速接入缓存能力示例代码：

//使用 wx.createCacheManager 即可创建缓存管理器。缓存管理器全局只有唯一实例，一旦被成功创建出来即表示接入成功。
// 创建缓存管理器
const cacheManager = wx.createCacheManager({
  origin: 'https://weixin.qq.com/',
})


// 添加请求规则
cacheManager.addRules([
  '/cgi/home',
  '/cgi/detail/:id',
])


// 监听符合规则的 wx.request 请求，默认在弱网时调用 wx.request 即会触发
cacheManager.on('request', evt => {
  return new Promise((resolve, reject) => {
    // 匹配是否存在缓存
    const matchRes = cacheManager.match(evt)


    if (matchRes && matchRes.data) {
      // 使用缓存返回
      resolve(matchRes.data)
    } else {
      // 没有匹配到缓存
      reject({errMsg: `catch not found: ${evt.url}`})
    }
  })
})

开发者需要添加请求规则，用来匹配哪些请求需要被缓存，不在请求规则内的请求会被自动放过。一旦请求命中规则，则在网络通畅时会对结果进行缓存，在弱网时会拦截请求，然后触发 request 事件给开发者。开发者可以在事件回调中决定是否使用缓存返回，如果使用缓存返回，则不会再发起网络请求；如果仍要尝试发起网络请求，可像如下方式操作：

cacheManager.on('request', async evt => {
  try {
    // 仍然走网络请求
    const res = await evt.request()
    
    // ......
  } catch (err) {
    // ......
  }
})

为了适应更多的请求场景，请求规则支持多种写法，如：

cacheManager.addRule('/abc') // uri 串，会自动使用调用 wx.createCacheManager 时传入的 origin 进行拼接，然后匹配
cacheManager.addRule('GET /abc') // 在 uri 串基础上，补充请求方法的匹配
cacheManager.addRule('/abc/:id') // 带可变部分的 uri 串


cacheManager.addRule(/\/(abc|cba)$/ig) // 正则表达式


cacheManager.addRule({
  method: 'POST',
  url: '/abc',
  dataSchema: [
    {name: 'param1', schema: {value: /(aaa|bbb)/ig}},
    {name: 'param2', schema: {value: '123'}},
  ],
}) // 规则对象

更多规则写法可参考 addRule 文档。

每个命中了规则的请求，会根据一定策略生成缓存 id，如果两个请求生成的缓存 id 相同，则后者会覆盖前者，因此在编写规则时需要注意这点。一般来说，请求 url 不同或请求方法不同，生成的缓存 id 一定不同；如果请求参数不同，则需要考虑命中的规则有没有考虑参数的情况，详细的缓存 id 生成策略可参考 addRule 文档。

缓存存储会使用独立的用户空间（不占用用户的 storage），不过有缓存数量和大小限制，所以也不要无节制地使用缓存。请善用规则，尽可能只让必要的请求缓存。

关于缓存管理器的详细使用方式可参考 api 文档。此处同时提供一个完整可运行的例子，参考例子的 README 进行操作即可体验。

3.插件支付 API  wx.requestPluginPayment(Object object)

使用介绍：插件中发起支付

示例代码：

wx.requestPluginPayment({
  version: 'release',//插件版本，develop：开发版、trial:体验版、release:正式版
  fee: 1,//需要显示在页面中的金额，单位为分
  paymentArgs: {},//任意数据，传递给功能页中的响应函数
  currencyType: 'CNY',//需要显示在页面中的货币符号的代码，默认为CNY
  success (res) { },
  fail (res) { }
})

具体用法及参数说明可参考 插件支付文档。

4.插件增加蓝牙从机接口 

介绍： 更新 API 插件增加蓝牙从机接口

相关接口

• 建立本地作为蓝牙低功耗外围设备的服务端，可创建多个 ： wx.createBLEPeripheralServer(Object object)
• 监听当前外围设备被连接或断开连接事件：wx.onBLEPeripheralConnectionStateChanged(function callback)
• 取消监听当前外围设备被连接或断开连接事件：wx.offBLEPeripheralConnectionStateChanged(function callback)

5.视图层预加载媒体资源文件接口 wx.preloadAssets 

使用介绍：为视图层预加载媒体资源文件, 目前支持：font，image。

示例代码：

wx.preloadAssets({ 
        data: [ { type: 'image', src: imgUrl, }, ],
        success(resp) { console.log('preloadAssets success', resp) },
        fail(err) { console.log('preloadAssets fail', err) }, 
  })