uni-app微信小程序接入人脸核身SDK
|
这几天使用uni-app开发某银行的一个微信小程序，需要集成接入腾讯云的人脸核身SDK，如上图所示，记录下整合接入过程及踩的一些坑，帮助后面需要的朋友们。关于uni-app接入人脸核身SDK有不懂的地方可以在下面提问，看到会及时回复。 申请服务不是所有的企业都能够申请的，需要符合以下行业要求的客户才能申请 政务：政府机构或事业单位 金融：银行、保险 医疗：公立医疗机构 运营商：电信运营商 教育：公立教育机构 交通：航空、客运、网约车、交通卡、共享交通、轨道交通、租车 旅游：酒店 物流：快递、邮政、物流 由于SDK会调用小程序原生的? SDK服务：?申请人脸核身服务 小程序：?查看申请流程?（需要发送邮件申请，使用该服务的小程序的appid，后面开发也是用的这个） 重要的事情说3遍 以上这2个服务都需要申请，缺一不可。 以上这2个服务都需要申请，缺一不可。 下载SDK由于不是我申请的，所以怎么下载我也不知道，听群里的人说的是SDK腾讯云下发给客户的。 SDK目录结构
SDK接入参考腾讯云文档的接入方法：?https://cloud.tencent.com/document/product/1007/31071 文档是针对原生小程序写的，所以页面引入的方法有所不同 由于uni-app不支持直接引入小程序的原生页面，所以这里能想到的就是将它当作成一个微信小程序的组件，然后uni-app的页面引入这个组件 解压引入SDK在uni-app项目中新建?
"usingComponents": {
"verify-mpsdk": "/wxcomponents/verify_mpsdk/index/index"
}
新建人脸核身页面pages?中新建人脸核身的页面? pages.json?中配置页面
face?页面中引入?
最终的人脸核身的页面访问就是? 初始化SDK在需要的页面初始化SDK，如有个页面需要点击按钮进行人脸核身，就在这个页面进行初始化。 这个直接照着文档? 适当修改下即可，大概代码如下： <template>
<view class="content">
<button type="primary"
@tap="gotoVerify">
进入人脸核身
</button>
</view>
</template>
<script>
export default {
data() {
return {
BizToken: ''
}
},onLoad() {
// 初始化慧眼实名核身组件
const Verify = require('@/wxcomponents/verify_mpsdk/main.js')
Verify.init()
},methods: {
// 单击进入人脸核身按钮时，触发该函数
gotoVerify () {
this.BizToken = '' // 这里需要我们去客户后端调用DetectAuth接口获取BizToken
// 调用实名核身功能
wx.startVerify({
data: {
token: this.BizToken // BizToken
},success: (res) => { // 验证成功后触发
// res 包含验证成功的token,这里需要加500ms延时，防止iOS下不执行后面的逻辑
setTimeout(() => {
// 验证成功后，拿到token后的逻辑处理，具体以客户自身逻辑为准
console.log(res)
},500)
},fail: (err) => { // 验证失败时触发
// err 包含错误码，错误信息，弹窗提示错误
setTimeout(() => {
console.log(err)
wx.showModal({
title: "提示",content: err.ErrorMsg,showCancel: false
})
},0);">500)
}
})
}
}
}
</script>
注意下这里的? 需要后端的同学调用腾讯云提供的?DetectAuth?来返回前端需要的? 调试开发阶段我们可以先通过腾讯云提供的工具 API 3.0 Explorer 直接来获取这个?BizToken?如果服务申请成功后控制台一般能找到? SecretId?，?SecretKey?，?RuleId?注意? 在线调用?中的?发送请求?按钮，如果填的都对的话返回信息里面会有?BizToken?拿到? xxxxxxxxxxxxxxxxx就是拿到的? 'xxxxxxxxxxxxxxxxx' // 这里需要我们去客户后端调用DetectAuth接口获取BizToken
开发调试上面都做完后就可以进行调试了 需要先在项目中?
然后运行到微信开发工具（这里就不多说了），如果提示不是开发人员，就让该appid的管理员将你加到开发组里面就行了。 运行成功后点击开发者工具的真机调试，扫描二维码开启真机调试模式。 接下来就是踩坑了，会出现各种问题。 踩坑及解决方法Component is not found in path这里开发者工具里面都是显示正常的，不会报这个错， 手机扫码进入调试后控制台会出现这个报错， 提示组件找不到，但是我们的路径都是对的， Component is not found in path "wxcomponents/verify_mpsdk/index/index"?
问题出在这里将? "component": true?找到? 重新开启调试扫码后上面的报错就没了。?
navigateTo:fail page点击按钮调用? navigateTo:fail page "verify_mpsdk/index/index?isNotice=false" is not found?
SDK默认的是跳转验证页面的地址是? 文档找了半天也没找到相应的配置地址，最后在SDK里面搜索找到了这个地址。 所以只需要把这个地址改成我们所需要的地址就行了。 找到? 人脸核身页面?的地址?pages/face/face?保存后重试就能跳转到人脸核身的页面了。 无操作、无报错大坑进入人脸核身的页面后会发现啥操作都没，控制台也没报错，
一度认为我自己弄的有问题，搞了好久也没弄好，也提了个工单（腾讯云工单反馈率还是很快的，几分钟后就有人回复了，这点赞一个）， 将代码和相关操作在工单里描述了下，对方也觉得的没问题，按照快速入门的代码应该是没问题的，对方也没找到啥问题，就让我加了一个腾讯云慧眼小助手的微信， 本想着下午加人家看看啥问题的，中午吃完饭闲着的时候将SDK里面的文件都格式化后终于在?
正常原生微信小程序进入到这个页面的时候会执行? 但是我们上面将这个SDK当作是一个自定义组件了， 在uni-app中组件是不存在? pages/face/face?手动执行?onLoad?修改下? 保存后重试，就能正常显示了 |
