微信小程序开发问题整理：人脸核身、富文本图片等
最近在做一个小程序的项目，遇到了一系列问题，整理一下，以备后用。
微信人脸核身接口能力
微信提供了人脸核身功能，可以通过提供的身份信息拉起人脸识别，验证是否匹配（是否是本人操作），该接口目前只支持部分主体，在后台申请开通。
wx.startFacialRecognitionVerify(OBJECT) ：请求进行基于生物识别的人脸核身。
代码示例：
代码语言：javascript复制//人脸识别，请求进行基于生物识别的人脸核身
startFace(name, idcard) {
wx.startFacialRecognitionVerify({
name: name, //姓名
idCardNumber: idcard, //身份证号
success: function(res) {
var verifyResult = res.verifyResult; //认证结果
//调用接口
},
checkAliveType: 2, //人脸核验的交互方式，2先检查是否可以屏幕闪烁，不可以则自动为读数字。默认值0，读数字)
fail: err => {
wx.showToast('请保持光线充足，面部正对手机，且无遮挡')
}
})
}接口提供了两种验证方式：
- 没有用户实名信息，需要在前端填写身份证和姓名，前端直接通过 jsapi 调用传递 name 和 idCardNumber。（像上面这样）
- 已经有用户实名信息，后台通过微信提供的 api 上传用户身份证姓名和身份证，api 返回
user_id_key作为凭证传给前端，前端再调用 jsapi ，用户姓名、身份证信息不需要经过前端，参数只需要传递 userIdKey。代码如下：
代码示例：
代码语言：javascript复制wx.startFacialRecognitionVerify({
userIdKey: key, // 后台返回的key
success: function(res) {
//调用接口 请求结果
},
checkAliveType: 2,
fail: err => {
wx.showToast('请保持光线充足，面部正对手机，且无遮挡')
}
})在拉起人脸核身之前，先检查设备是否支持人脸检测。
wx.checkIsSupportFacialRecognition(OBJECT) ：检查设备是否支持人脸检测。
代码示例：
代码语言：javascript复制 // 检测环境是否支持
check: function () {
const _this = this;
//活体检测，是否支持人脸识别
wx.checkIsSupportFacialRecognition({
checkAliveType: 2,
success: function(res) {
if (res.errCode === 0 || res.errMsg === "checkIsSupportFacialRecognition:ok") {
//调用人脸识别
_this.startFace(key); //userIdKey
return;
}
wx.showToast('微信版本过低，暂时无法使用此功能，请升级微信最新版本')
},
fail: res => {
wx.showToast('微信版本过低，暂时无法使用此功能，请升级微信最新版本')
}
})
}更多细节可以参考官方文档。
微信小程序 rich-text 富文本组件 图片宽度超出问题
微信提供了 rich-text 组件，用来渲染接口返回的富文本内容：
<rich-text nodes="{{ content }}"></rich-text>但是如果内容包含图片，就会出现图片”过大“，宽度超出屏幕的问题，也可以说图片显示不全。
这就需要利用正则给图片标签增加内联样式，解决显示异常问题：
代码语言：javascript复制this.setData({
content: res.content.replace(/<img/gi, '<img style="max-width:100%;height:auto"')
})或者：
代码语言：javascript复制this.setData({
content: res.content.replace('<img ', '<img style="max-width:100%;height:auto"')
})iOS 不支持 webp 格式图片，直接去除或者替换 png 等格式：
代码语言：javascript复制res.content.replace(/&tp=webp&/gi, '&')wx.navigateBack 返回上一页报错
业务中返回上一页报错：
代码语言：javascript复制wx.navigateBack()
/*(in promise) MiniProgramError
*{"errMsg": "navigateBack: fail cannot navigate backat first page."}
*/遵循规范，加上 delta 参数：
wx.navigateBack({
delta: 1
})返回上一页的上一页：
代码语言：javascript复制wx.navigateBack({
delta: 2
})小程序赋值页面不刷新
小程序赋值页面不刷新：
代码语言：javascript复制this.data.website = 'www.w3h5.com'不刷新就对了，小程序需要使用 setData 赋值才会渲染刷新：
this.setData({
website: 'www.w3h5.com'
})小程序 bindtap 传值
注意： bindtap 全部是小写字母。
点击事件，通过 data-xxx 传值：index.wxml
<button data-type="web" bindtap="getType"> </button>使用 e.currentTarget.dataset 获取值：index.js
getType (e) {
const type = e.currentTarget.dataset.type
console.log(type)
// web
}微信小程序清除定时器
JavaScript 写法：
代码语言：javascript复制// 定义一个定时器
let timer = setInterval(() => {
...
}, 1000)
// 清除定时器
clearInterval(timer)小程序写法：
代码语言：javascript复制Page({
data: {
timer: null // 先在 data 中定义
},
onLoad () {
this.setTimer() // 调用方法，设置定时器
},
setTimer () { // 定义方法
this.data.timer = setInterval(() => {
...
}, 1000)
},
onUnload () { // onUnload 定时器销毁
clearInterval(this.data.timer)
}
})注意： 根据需求在 onUnload 和 onHide 销毁定时器，避免重复执行。
扫普通链接二维码打开微信小程序
一般用于生成测试环境的小程序码，更多细节可以参考官方文档。
开放范围：企业、媒体、政府及其他组织类型小程序。
配置流程：登录小程序后台，进入“设置-开发设置-扫普通链接二维码打开小程序”，开启功能后即可配置二维码规则。
测试范围：开发者可根据开发进度选择在开发版/体验版/线上版本测试“普通二维码跳转小程序”的功能。
微信小程序中播放 B 站视频
如果有真是视频地址，可以直接赋值给 video 的 src 。
如果没有真实地址，使用 iframe 嵌入 B 站视频，需要将 B 站链接添加到小程序业务域名。
未经允许不得转载：w3h5 » 微信小程序开发问题整理总汇：人脸核身、富文本图片等
