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>

页面效果图:

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

相关推荐
源码哥_博纳软云41 分钟前
JAVA同城服务场馆门店预约系统支持H5小程序APP源码
java·开发语言·微信小程序·小程序·微信公众平台
禾高网络42 分钟前
租赁小程序成品|租赁系统搭建核心功能
java·人工智能·小程序
洗发水很好用2 小时前
uniApp打包H5发布到服务器(docker)
uni-app
YUJIAN。2 小时前
使用uniapp开发微信小程序-框架搭建
微信小程序·小程序·uni-app
关你西红柿子4 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
V+zmm101344 小时前
基于小程序宿舍报修系统的设计与实现ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·ssm
V+zmm1013411 小时前
基于微信小程序的乡村政务服务系统springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
还这么多错误?!11 小时前
uniapp微信小程序,使用fastadmin完成一个一键获取微信手机号的功能
微信小程序·小程序·uni-app
_院长大人_11 小时前
微信小程序用户信息解密 AES/CBC/NoPadding 解密失败问题
微信小程序·小程序
IT 前端 张11 小时前
Uniapp 手机基座调试App 打包成Apk文件,并上传到应用商店
uni-app