小程序开发新能力解读 - 2021.12

网络调优、插件登录等更新，速来围观～

快速知悉

• 网络调优相关

- 前后台切换

- 网络状态变化 wx.onNetworkStatusChange

- 弱网状态变化 wx.onNetworkWeakChange

- request/download 新协议 enableHttp2 / enableQuic / enableCache

- wx.connectSocket  压缩扩展 perMessageDeflate

• 插件登录 wx.pluginLogin
• 无障碍优化 aria-component
• 文件系统新增readCompressedFile 接口支持读取指定类型压缩文件

1.  网络调优相关

网络调优：小程序和小游戏网络相关 API 使用方式相同, 所以我们用网络接口来统称 。

网络接口的构成主要包括四个类型：

• request
• download
• upload
• websocket

对于网络调优，我们提供了以下的优化建议：

1.1. 前后台切换

小程序切后台 5s 后, 会中断网络请求, 开发者会收到 interrupted 的回调, 此时需要做好兼容逻辑。

1.2. 网络状态变化  wx.onNetworkStatusChange

使用介绍：当用户网络状态变化时会通过事件  wx.onNetworkStatusChange 进行通知, 不少网络问题是断网引起的, 可以通过此事件给用户更好的提示。

示例代码：

wx.onNetworkStatusChange(function (res) {
  console.log(res.isConnected)//当前是否有网络链接，返回的是布尔值
  console.log(res.networkType)//返回的是网络类型
})

1.3. 弱网状态变化 wx.onNetworkWeakChange

使用介绍：基础库从 2.19.0 版本开始, 提供 wx.onNetworkWeakChange 弱网变化通知, 很多超时类的问题都是用户处于弱网引起的, 可以通过此事件给用户更好的提示。

在最近的八次网络请求中, 出现下列三个现象之一则判定弱网。

• 出现三次以上连接超时
• 出现三次 rtt 超过 400
• 出现三次以上的丢包

弱网事件通知规则是: 弱网状态变化时立即通知, 状态不变时 30s 内最多通知一次。

示例代码：

wx.onNetworkWeakChange(function (res) {
  console.log(res.weakNet)//当前是否处于弱网状态
  console.log(res.networkType)//当前网络类型
})
// 取消监听
wx.offNetworkWeakChange()

1.4. request/download 新协议 enableHttp2 / enableQuic / enableCache

从 Android 7.0.12 / iOS 8.0.3 开始, 提供下面三个新参数：

h2 连接速度更快, 建议支持, 这里需要注意 h2 的 header 是需要为全小写, 打开 enableHttp2 开关前需要注意代码逻辑。

1.5. wx.connectSocket  压缩扩展 perMessageDeflate

压缩参数目前已在 Android 和 iOS 上全量支持。

使用介绍：可以通过  wx.connectSocket  来进行创建一个 WebSocket 连接然后使用perMessageDeflate进行压缩。

示例代码：

wx.connectSocket({
  url: 'wss://example.qq.com',//开发者服务器 wss 接口地址
  header:{//HTTP Header，Header 中不能设置 Referer
    'content-type': 'application/json'
  },
  protocols: ['protocol1']//子协议数组
  perMessageDeflate:"true"//是否开启压缩扩展,默认是false
})

点击查看  网络调优  官方文档

2. 插件登录 wx.pluginLogin

使用介绍：

1. 该接口仅在小程序插件中可调用。
2. 调用接口获得插件用户标志凭证（code），无需通过 用户信息功能页 进行授权。
3. 插件可以此凭证换取用于识别用户的标识 openpid。
4. 用户不同、宿主小程序不同或插件不同的情况下，该标识均不相同，即当且仅当同一个用户在同一个宿主小程序中使用同一个插件时，openpid 才会相同。

示例代码：

wx.pluginLogin(){
  success(res) {
    // 用于换取 openpid 的凭证（有效期五分钟）。插件开发者可以用此 code 在开发者服务器后台调用 auth.getPluginOpenPId 换取 openpid。
    console.log(res.code)
  },
  fail(err){
    console.log(err)
  }
}  

点击查看  插件登录  官方文档

3. 无障碍优化 aria-component 

使用介绍：

1.满足视障人士对于小程序的访问需求。

2.以 view 组件为例，开发者可以增加aria-role和aria-label属性。 其中aria-role表示组件的角色，当设置为'img'时，读屏模式下聚焦后系统会朗读出'图像'。设置为'button'时，聚焦后后系统朗读出'按钮'。 aria-label表示组件附带的额外信息，聚焦后系统会自动朗读出来。

3.小程序 aria 属性对齐 web 标准。

示例代码：

<!-- 提交表单无障碍示例 -->
<view aria-role="button" aria-label="提交表单">提交</view>

注意：

1. 安卓和iOS读屏模式下设置aria-role后朗读的内容不同系统之间会有差异。
2. 可设置的aria-role可参看  Using Aria 中的Widget Roles，部分role的设置在移动端可能无效。

点击查看 无障碍优化 官方文档

4. 文件系统新增readCompressedFile 接口支持读取指定类型压缩文件 

使用介绍：

1.读取指定压缩类型的本地文件内容。

2.其中compressionAlgorithm属性，文件压缩类型，目前仅支持 'br'（brotli压缩文件）。

示例代码：

const fs = wx.getFileSystemManager()


// 异步接口
fs.readCompressedFile({
  filePath: '${wx.env.USER_DATA_PATH}/hello.br',
  compressionAlgorithm: 'br',
  success(res) {
    console.log(res.data)
  },
  fail(res) {
    console.log('readCompressedFile fail', res)
  }
})


// 同步接口
const data = fs.readCompressedFileSync({
  filePath: '${wx.env.USER_DATA_PATH}/hello.br',
  compressionAlgorithm: 'br',
})
console.log(data)

点击查看 readCompressedFile 官方文档

5. 更多能力

• worker里添加USER_DATA_PATH  详情
• 云托管支持 websocket 连接  详情
• apiCategory对应API限制调整开 详情