uniapp+vue3+ts--编写微信小程序对接e签宝签署时跳转刷脸效果（人脸识别）中间页代码

uniapp+vue3+ts–编写微信小程序对接e签宝签署时跳转刷脸效果（人脸识别）中间页代码

e签宝内嵌H5方式集成签署页的文档说明：https://open.esign.cn/doc/opendoc/case3/ahb0sg

签署时跳转刷脸效果示意图：
在这里插入图片描述

1. 在文件夹新建一个文件，路径为pages/middle/index，并在pages.json中注册。【ps这个路径要跟e签宝后台定义的中间页路径一致】
在这里插入图片描述

2.通过上面文档步骤进行相关代码编写，下面是完整的代码。

<template><view class="middlePageContainer"><view class="loading-content"><view class="image-content"><u-loading mode="flower" :show="true"></u-loading></view><view class="loading-tect-content"><text class="loading-text">加载中...</text></view></view><view class="btn-content"><text>如未成功跳转，</text><text class="btn-click" @click="goFaceAuth">点击此处</text><text>手动跳转</text></view></view>
</template><script lang="ts" setup>
import { onShow, onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const bizToken = ref('')
const redirectUrl = ref('')
const goFaceDone = ref(false) // 已跳转至公证签做人脸onLoad((e: any) => {bizToken.value = e.bizTokenredirectUrl.value = decodeURIComponent(e.redirectUrl)goFaceAuth()
})
const goFaceAuth = () => {uni.navigateToMiniProgram({appId: 'wx1cf2708c2de46337', // 公证签小程序APPIDpath: `/pages/face/index?bizToken=${bizToken.value}`, // 刷脸页面地址success(res: any) {goFaceDone.value = true}})
}onShow(() => {console.log('---middle onShow')// 防止从实名/意愿页进入后直接返回if (!goFaceDone.value) return// 如果已经跳转过，重置goFaceDone.value = false// getEnterOptionsSync 方法从基础库 2.9.4 开始支持，低版本需做兼容处理const options = uni.getEnterOptionsSync()console.log('---options', options)// 从公证签小程序返回if (options.scene === 1038 &&options.referrerInfo.extraData &&options.referrerInfo.extraData.faceResult) {const pages = getCurrentPages() //当前页的数据// console.log(pages[pages.length - 2],'5132123312');const pre = pages[pages.length - 2] as any //上个页面 （扫脸的页面）// 重新加载实名页面console.log(pre, 'pre')if (pre.data.reloadPage && typeof pre.data.reloadPage === 'function') {// pre.$vm.src = redirectUrl + `&timeStamp=${new Date().getTime()}`pre.$vm.src = redirectUrl.value + `&timeStamp=${new Date().getTime()}`// pre.reloadPage(redirectUrl + `&timeStamp=${new Date().getTime()}`)uni.navigateBack({delta: 1})}}
})
</script><style lang="scss" scoped>
.middlePageContainer {width: 100%;height: 100%;.loading-content {padding-top: 10vh;text-align: center;width: 100%;}.image {width: 172rpx;height: 186rpx;}.loading-tect-content {font-size: 28rpx;margin-top: 48rpx;color: #333;}.btn-content {font-size: 28rpx;color: #333;margin-top: 24rpx;text-align: center;}.btn-click {color: #095fe0;}
}
</style>