微信小程序开发问题整理总汇：人脸核身、富文本图片等

微信小程序开发问题整理：人脸核身、富文本图片等

最近在做一个小程序的项目，遇到了一系列问题，整理一下，以备后用。

微信人脸核身接口能力

微信提供了人脸核身功能，可以通过提供的身份信息拉起人脸识别，验证是否匹配（是否是本人操作），该接口目前只支持部分主体，在后台申请开通。

wx.startFacialRecognitionVerify(OBJECT) ：请求进行基于生物识别的人脸核身。

代码示例：

//人脸识别，请求进行基于生物识别的人脸核身
startFace(name, idcard) {
  wx.startFacialRecognitionVerify({
    name: name, //姓名
    idCardNumber: idcard, //身份证号
    success: function(res) {
      var verifyResult = res.verifyResult; //认证结果
      //调用接口
    },
    checkAliveType: 2, //人脸核验的交互方式，2先检查是否可以屏幕闪烁，不可以则自动为读数字。默认值0，读数字)
    fail: err => {
      wx.showToast('请保持光线充足，面部正对手机，且无遮挡')
    }
  })
}

接口提供了两种验证方式：

1. 没有用户实名信息，需要在前端填写身份证和姓名，前端直接通过 jsapi 调用传递 name 和 idCardNumber。（像上面这样）

2. 已经有用户实名信息，后台通过微信提供的 api 上传用户身份证姓名和身份证，api 返回 user_id_key 作为凭证传给前端，前端再调用 jsapi ，用户姓名、身份证信息不需要经过前端，参数只需要传递 userIdKey。代码如下：

代码示例：

wx.startFacialRecognitionVerify({
  userIdKey: key, // 后台返回的key
  success: function(res) {
    //调用接口 请求结果
  },
  checkAliveType: 2,
  fail: err => {
    wx.showToast('请保持光线充足，面部正对手机，且无遮挡')
  }
})

在拉起人脸核身之前，先检查设备是否支持人脸检测。

wx.checkIsSupportFacialRecognition(OBJECT) ：检查设备是否支持人脸检测。

代码示例：

 // 检测环境是否支持
 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>

但是如果内容包含图片，就会出现图片”过大“，宽度超出屏幕的问题，也可以说图片显示不全。

这就需要利用正则给图片标签增加内联样式，解决显示异常问题：

this.setData({
  content: res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
})

或者：

this.setData({
  content: res.content.replace('<img ', '<img style="max-width:100%;height:auto"')
})

iOS 不支持 webp 格式图片，直接去除或者替换 png 等格式：

res.content.replace(/&tp=webp&/gi, '&')

wx.navigateBack 返回上一页报错

业务中返回上一页报错：

wx.navigateBack()
/*(in promise) MiniProgramError
 *{"errMsg": "navigateBack: fail cannot navigate backat first page."}
 */

遵循规范，加上 delta 参数：

wx.navigateBack({
  delta: 1
})

返回上一页的上一页：

wx.navigateBack({
  delta: 2
})

小程序赋值页面不刷新

小程序赋值页面不刷新：

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 写法：

// 定义一个定时器
let timer = setInterval(() => {
  ...
}, 1000)
// 清除定时器
clearInterval(timer)

小程序写法：

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 站链接添加到小程序业务域名。

未经允许不得转载：Web前端开发资源网 » 微信小程序开发问题整理总汇：人脸核身、富文本图片等

推荐阅读：

JetBrains IDE Support 浏览器自动刷新插件（不定时更新）

使用 swiper 轮播插件遇到的问题及解决方法

ColorZilla Chrome浏览器网页取色插件（不定时更新）

点击a页面链接跳转b页面某个tab切换的实现

解决老版本IE不兼容rgba的问题