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

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

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

微信人脸核身接口能力

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

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)
  }
})

注意: 根据需求在 onUnloadonHide 销毁定时器,避免重复执行。

扫普通链接二维码打开微信小程序

一般用于生成测试环境的小程序码,更多细节可以参考官方文档

开放范围:企业、媒体、政府及其他组织类型小程序。

配置流程:登录小程序后台,进入“设置-开发设置-扫普通链接二维码打开小程序”,开启功能后即可配置二维码规则。

测试范围:开发者可根据开发进度选择在开发版/体验版/线上版本测试“普通二维码跳转小程序”的功能。

微信小程序中播放 B 站视频

如果有真是视频地址,可以直接赋值给 videosrc

如果没有真实地址,使用 iframe 嵌入 B 站视频,需要将 B 站链接添加到小程序业务域名。


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

赞 (2)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)