uniapp小程序接入腾讯云【增强版人脸核身接入】

文档地址:https://cloud.tencent.com/document/product/1007/56812

企业申请注册这边就不介绍了,根据官方文档去申请注册。

申请成功后,下载【微信小程序sdk】

一、解压sdk,创建wxcomponents文件夹

sdk解压后发现是原生小程序 代码,uniapp不支持引入原生页面

所以要在根目录下创建wxcomponents文件夹,把解压的文档夹放wxcomponents里。

二、pges.json的globalStyle全局引入组件

在pges.json里添加引入

js 复制代码
{
	"globalStyle": {
		"usingComponents": {
			"verify_mpsdk":"/wxcomponents/verify_mpsdk/index/index"
		}
	}
}

或者在哪个页面使用就在哪个页面引入

js 复制代码
{
			"path": "pages/auth/auth",
			"style" :
			{
			    "navigationBarTitleText": "人脸核身",
			    "enablePullDownRefresh": false,
				"usingComponents": {
					"verify-mpsdk":"/wxcomponents/verify_mpsdk/index/index"
				}
			}
		}

三、创建一个认证的文件夹与页面

然后创建一个人脸核身的文件夹auth(命名随意)

pages.json添加页面路由【pages/auth/auth】

html 复制代码
<!-- 司机人脸识别 -->
<template>
	<view>
		<verify-mpsdk ref="verifyMpsdk"></verify-mpsdk>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		onLoad(i) {
			//注意,引入组件没有onLoad生命周期,所以组件要重新写一个函数,把verify_mpsdk/index/index.js的onLoad里的方法执行一次
			this.$refs.verifyMpsdk.onLoadMethod(i)
		}
	}
</script>

<style>
</style>

verify_mpsdk/index/index.js

js 复制代码
onLoadMethod: async function(t) {
	console.log("options=>", t, "verify_isNetworkWeek", wx.verify_isNetworkWeek), await this
	.initConfig(), t.curpage ? "result" === t.curpage && (this.showRTLiveGuide = !1, this
		.handleStartResult()) : await this.onLoadToNext()
}

四、修改verify_mpsdk/main.js的验证页面路径

搜索verify_mpsdk/main.js里的verify_mpsdk/index/index 修改成刚才创建的文件夹auth的路由【/pages/auth/auth】,位置有2处需要改的

五、在需要使用认证的页面进行人脸核身

在要使用认证的页面,例如authentication.vue
authentication.vue

js 复制代码
onLoad() {
	const Verify = require('@/wxcomponents/verify_mpsdk/main.js')
	Verify.init()
},
methods:{
	gotoVerify(){
		let that = this
		wx.startVerify({
			data:{
				token:''//去客户后端调用 DetectAuth 接口获取 BizToken
			},
			success:(res)=>{
				setTimeout(()=>{
					console.log(res,'success')
				},500)
			},
			fail:(err)=>{
				setTimeout(()=>{
					//腾讯云返回的err结构
					// {
					// 	BizToken:'xxx',
					// 	ErrorCode:'2016',
					// 	ErrorMsg:'比对人脸信息不匹配(10004)(xxxxx)'
					// }
					console.log(err,'fail')
				},500)
			}
		})
	},
}

一些遇到的问题:

1.上面步骤都完成的话,调用会返回【服务异常,请稍后重试或联系客服人员 】,这个是小程序接入某个流程缺少(我是缺少了管理员微信号,扫描 授权二维码 这个流程),在授权下就可以了

2.调用后没报错也没返回什么信息,那么可能就是上面的步骤某一个没弄好,例如main.js改页面路径啥的没去改

相关推荐
二十雨辰1 小时前
[uni-app]小兔鲜-04推荐+分类+详情
前端·javascript·uni-app
小雨cc5566ru5 小时前
hbuilderx+uniapp+Android健身房管理系统 微信小程序z488g
android·微信小程序·uni-app
敲啊敲95275 小时前
uni-app之旅-day02-分类页面
前端·javascript·uni-app
技术闲聊DD6 小时前
小程序原生-利用setData()对不同类型的数据进行增删改
小程序
二十雨辰6 小时前
[uni-app]小兔鲜-06地址+sku+购物车
前端·javascript·vue.js·uni-app
康康爹6 小时前
uniapp 小程序,登录上传头像昵称页面处理步骤
小程序·uni-app
小雨cc5566ru6 小时前
微信小程序hbuilderx+uniapp+Android 新农村综合风貌旅游展示平台
android·微信小程序·uni-app
小雨cc5566ru6 小时前
小程序 uniapp+Android+hbuilderx体育场地预约管理系统的设计与实现
android·小程序·uni-app
DK七七11 小时前
【PHP陪玩系统源码】游戏陪玩系统app,陪玩小程序优势
前端·vue.js·游戏·小程序·php·uniapp
某公司摸鱼前端19 小时前
uniapp 上了原生的 echarts 图表插件了 兼容性还行
前端·uni-app·echarts