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.通过上面文档步骤进行相关代码编写,下面是完整的代码。

javascript 复制代码
<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.bizToken
    redirectUrl.value = decodeURIComponent(e.redirectUrl)
    goFaceAuth()
})
const goFaceAuth = () => {
    uni.navigateToMiniProgram({
        appId: 'wx1cf2708c2de46337', // 公证签小程序APPID
        path: `/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>

页面效果图:

代码编写完之后再次调用后就可以使用刷脸功能了!

相关推荐
ModyQyW13 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
HERR_QQ20 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
racerun1 天前
小程序导航设置更多内容的实现方法
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序