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

转载自微信公众号“微信开发者”：

https://mp.weixin.qq.com/s/1fm-1I1_54JbJweUQsNs0g

快速知悉

• 视频号的跳转接口
• 安全能力 - 小程序加密网络通道
• 安全能力 - 安全键盘
• TCP通信能力 wx.createTCPSocket
• 新增 wx.createWebAudioContext 接口
• 文件系统新增FD相关接口
• 移动解析HttpDNS

1. 视频号的跳转接口

介绍：通过视频号直播与视频内容中的介绍更好地了解小程序提供的服务。可以在直播电商、内容营销等应用场景与视频号进行更好的联动。

跳转视频号直播间

wx.getChannelsLiveInfo：获取视频号直播信息，通过 视频号 id 可获取到直播 feedId、直播 nonceId 等直播相关信息

wx.openChannelsLive：打开视频号直播，通过 视频号 id、直播 feedId、直播 nonceId 等打开直播

发起预约视频号直播

wx.getChannelsLiveNoticeInfo：获取视频号直播预告信息，通过 视频号 id 可获取到 预告 id 等直播相关信息

wx.reserveChannelsLive：预约视频号直播，通过 预告 id 预约直播

点击查看小程序跳转视频号完整官方文档

2. 安全能力 - 小程序加密网络通道

介绍：为了避免小程序与开发者后台通信时数据被截取和篡改，微信侧维护了一个用户维度的可靠key，用于小程序和后台通信时进行加密和签名。

开发者可以分别通过小程序前端和微信后台提供的接口，获取用户的加密key。

使用方法

1. 前端通过 userCryptoManager.getLatestUserKey 获取加密密钥信息
2. 发起 wx.request 请求时使用第一步得到的加密密钥信息对参数进行加密
3. 服务端请求服务端接口getUserEncryptKey 拿到 encryptKey 用于解密

示例代码

// 前端
const somedata = 'xxxxx'
const userCryptoManager = wx.getUserCryptoManager()
userCryptoManager.getLatestUserKey({
    success({encryptKey, iv, version, expireTime}) {
        const encryptedData = someAESEncryptMethod(encryptKey, iv, somedata)
        wx.request({
           data: encryptedData,
           success(res) {
                const decryptedData = someAESDEcryptMethod(encryptKey, iv, res.data)
                console.log(decryptedData)
           }
        })
    }
})

// 服务端
curl -X POST "https://api.weixin.qq.com/wxa/business/getuserencryptkey?access_token=ACCESS_TOKEN&openid=OPENID&signature=SIGNATURE&sig_method=hmac_sha256"

点击查看小程序加密网络通道完整官方文档

3. 安全能力 - 安全键盘

介绍：为提高微信开放平台生态安全性，针对小程序内数字密码输入场景中可能存在的安全问题，微信侧在input组件开放了安全键盘类型。通过安全键盘能力可在用户输入关键信息时进行加密，阻止网络监听、木马病毒等手段窃取信息。

使用介绍

1. 通过微信提供的工具生成 CS
2. 在小程序管理后台「开发」-「开发管理」-「开发设置」-「安全键盘证书」板块填入CSR生成证书
3. 将生成的证书放入小程序代码包中
4. input 设置 type=“safe-password”，并设置相关参数 safe-password-* 即可使用
5. input bindblur 得到 encryptedValue，服务端拿到数据后可使用私钥进行解密

示例代码

<input 
  style="border: 1px solid blue;"
  type="safe-password"
  placeholder="123456"
  safe-password-cert-path="/minipro_test_cert.crt" 
  safe-password-time-stamp="1618390369" 
  safe-password-nonce="1618390369" 
  safe-password-salt="zefengwang" 
  safe-password-custom-hash="md5(sha1('foo' + sha256(sm3(password + 'bar'))))"
  bind:blur="onBlur"
  bind:input="onInput"
  value="{{value}}"
></input>

点击查看安全键盘完整官方文档

4. TCP通信能力 wx.createTCPSocket

使用场景

1. 物联网硬件 wifi 配网
2. 安防监控摄像头 X-P2P 直播
3. 局域网 TCP 通讯

点击查看TCP通信能力完整官方文档

5. 新增 wx.createWebAudioContext 接口

介绍：不同于原先的 wx.createInnerAudioContext 接口，wx.createWebAudioContext 提供了很多接口用于处理变换音频。

使用场景

1. 对音频添加特效
2. 使音频可视化
3. 添加空间效果 （如平移）

点击查看 wx.createWebAudioContext 完整官方文档

6. 文件系统新增FD相关接口

介绍：提供文件系统 FD 相关接口，让开发者可以更原子化地、性能更高地操作文件。

相关接口

FileSystemManager.open / openSync ：打开文件

FileSystemManager.close / closeSync ：关闭文件

FileSystemManager.fstat / fstatSync ：获取文件的状态信息

FileSystemManager.write / writeSync ：写入文件

FileSystemManager.read / readSync ：读文件

FileSystemManager.ftruncate / ftruncateSync ：截断文件

7. 移动解析 HttpDNS

介绍：开发者调用 wx.request 时，可以开启移动解析 HttpDNS 服务。该服务基于 Http 协议向服务商的 DNS 服务器发送域名解析请求，替代了基于 DNS 协议向运营商 Local DNS 发起解析请求的传统方式，可以避免 Local DNS 造成的域名劫持和跨网访问问题，解决移动互联网服务中域名解析异常带来的困扰。

使用介绍

1. 前往 微信服务平台 选购 HttpDNS 资源，并在服务详情页 - 接入文档获取 Service ID
2. 小程序调用 wx.request，将 enableHttpDNS 参数设置为 true，并在 httpDNSServiceId 参数中填入选用的服务商 Service ID

示例代码

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  enableHttpDNS: true,
  httpDNSServiceId: 'wxa410372c837a5f26',
  success(res) {
    console.log('request success', res)
  },
  fail(res) {
    console.error('request fail', res)
  }
})

查看移动解析HttpDNS完整官方文档

8. 更多能力

• WXWebAssembly 详情
• 订阅消息语音提醒 详情
• 扩展 UDP 接口，增加 setTTL 接口 详情
• 车牌接口 - 选择车牌号 wx.chooseLicensePlate 详情
• 小程序打开微信客服 wx.openCustomerServiceChat 详情

如有其他小程序开发相关的问题，请前往 微信开放社区 发帖互动，技术专员将与大家交流解答。