step1：创建人脸核身sdk目录

原生小程序verify_mpsdk为页面，但在uniapp中只能作为组件引入。我将原生小程序verify_mpsdk文件夹打zip包，在Uniapp项目根目录创建wxcomponents文件夹，将zip包放入该文件夹并解压。

文件层级如下：

 

step2：全局引入该小程序组件

pages.json

"usingComponents": {
	"verify-mpsdk": "/wxcomponents/verify_mpsdk/index/index"
}

 

step3：新建人脸核身页面，将该组件引入

pages.json

{
	"path": "pages/face/face",
	"style": {
			"navigationBarTitleText": "人脸核身"
			}
},

face.vue

<template>
	<view>
		<verify-mpsdk ref="verifyMpsdk"></verify-mpsdk>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad(i) {
			this.$nextTick(() => {
				// 页面onLoad的时候手动调用
				console.log("this.$refs.verifyMpsdk: ", this.$refs.verifyMpsdk)
				this.$refs.verifyMpsdk.onLoad(i)
			})
		},
		methods: {

		}
	}
</script>

verify-mpsdk作为组件引入时，无法自动触发onLoad，所以需要手动onLoad

注意：我们实际访问的人脸核身页面是/pages/face/face

step4：修改小程序组件相关代码

main.js（是组件内的main.js）

小程序原来默认跳转人脸核身页面verify_mpsdk，但现在咱们人脸核身页面实际是/pages/face/face，所以得改下url

index.js

// Page({...})
Component({...})

 原来是页面级的，所以用Page，现在咱是组件级的，所以得改为Component

methods: {

    onLoad: function(i) {...},

    onReady: function() {...},

    ......

}

把所有方法外层加个methods

step5：初始化人脸核身sdk

我的项目背景是uniapp做的微信小程序内用Webview内嵌vue做的h5，要实现h5内点击按钮跳转人脸核身页面。因为h5不能直接用wx.startVerify，所以要中转一个Uniapp做的小程序页面。我中转的这个页面叫做KKK，人脸核身实际所在页面为face。所以，我要在KKK做初始化。

onLoad(options) {
			// options为跳转而来的url的参数
			const Verify = require('@/wxcomponents/verify_mpsdk/main.js')
			Verify.init()
			wx.startVerify({
				data: {
					token: uni.getStorageSync('bizToken')
				},
				success: (res) => {
					setTimeout(() => {
						this.getFaceResult(res.BizToken)
					}, 500)
				},
				fail: (err) => {
					setTimeout(() => {
						console.log('err: ', err)
						wx.showModal({
							title: '提示',
							content: err.ErrorMsg,
							showCancel: false,
						})
					})
				}
			})
		},

大功告成，可以跳转啦！

参考资料：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html#

https://zhuanlan.zhihu.com/p/79116658