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.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>

页面效果图:
在这里插入图片描述
代码编写完之后再次调用后就可以使用刷脸功能了!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/344599.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GitHub提交 / 拉取时 443 fatal: unable to access ‘https:

这个问题嘛 懂得都懂 但是用了魔法后依旧会出现443错误 排查了工具发现并不是工具的问题 修改一下git代理即可解决 解决方法如下 确保魔法可用的情况下 打开魔法 打开系统设置 > 网络和Internet > 代理 找到自己的代理IP 如下 这里以我的代理IP和端口举例 在…

黑马程序员JavaWeb开发|Maven高级

一、分模块设计与开发 分模块设计&#xff1a; 将项目按照功能拆分成若干个子模块&#xff0c;方便项目的管理维护、扩展&#xff0c;也方便模块间的相互调用&#xff0c;资源共享。 注意&#xff1a;分模块开发需要先对模块功能进行设计&#xff0c;再进行编码。不会先将工…

使用ElEment组件实现vue表单校验空值

1.绑定表单组件数组rules 2.在data域中设定组件rules 3.设定调用方法函数 提交校验 取消&#xff1a; 测试页面 提交空值 失去焦点 取消重置 提交后重置

完美解决:“已损坏,无法打开。 您应该将它移到废纸篓。”

1、Mac为什么会出现这个问题&#xff0c;懂得都懂&#xff08;/dogo&#xff09;。 2、首先看一下系统中的安全性与隐私设置&#xff0c;是否选择了任意来源&#xff0c;如果没有解锁设置。 3、如果还是报错&#xff0c;就可以祭出大招了&#xff0c;给文件赋予安全性设置。在…

AI分割一切模型SAM(Segment Anything Model)的C++部署

2023年最火爆的分割模型莫过于SAM&#xff0c;截止今天2024年1月19日&#xff0c;github上的star已经达到了41.7k的惊人数量。下面我们来体会一下如何运行这个模型&#xff0c;以及如何用C部署这个模型。 检查cuda环境 我的Cuda版本是12.0.1&#xff0c;如下&#xff0c; Cudn…

03.Elasticsearch应用(三)

Elasticsearch应用&#xff08;三&#xff09; 1.核心概念介绍 注意&#xff1a;类型&#xff08;Type&#xff09; 6.0之前的版本有Type概念&#xff0c;type相当于关系型数据库的表&#xff0c;ES官方将在ES9版本中彻底删除Type。7里面Type为ES默认的类型_doc 2.Cat API 介…

Matlab|基于改进遗传算法的储能选址定容(可任意设定储能数量)

目录 主要内容 部分代码 结果一览&#xff08;以3个储能为例&#xff09; 下载链接 主要内容 该模型采用改进遗传算法优化配电网系统中储能选址位置和容量&#xff0c;程序以IEEE33节点系统为分析对象&#xff0c;以网损最小为目标&#xff0c;采用matpower实现系…

diffusion入门

1. diffusion model 概念 https://zhuanlan.zhihu.com/p/638442430 这篇博客写得很好&#xff0c;顺便做一点笔记记录一下。 原博客附带的代码也很清晰易懂。 1.1 前向过程 后一个过程等于前一个结果的均值乘上sqrt(1-beta_t), 再加上方差beta_t的噪声。 这样下去可以得到 x…

每日一道算法题 16(2023-12-29)

package com.tarena.test.B20; import java.util.Arrays; import java.util.Scanner; /** * * 题目描述&#xff1a; 输入一个由n个大小写字母组成的字符串&#xff0c;按照Ascii码从小到大的排序规则&#xff0c;查找字符串中第k个最小ascii码值的字母&#xff08;k>…

023-安全开发-PHP应用后台模SessionCookieToken身份验证唯一性

023-安全开发-PHP应用&后台模&Session&Cookie&Token&身份验证&唯一性 #知识点&#xff1a; 1、PHP后台身份验证模块实现 2、Cookie&Session技术&差异 3、Token数据包唯一性应用场景 项目1&#xff1a;用cookie做后台身份验证 项目2&#xff1a…

git bash右键菜单失效解决方法

git bash右键菜单失效解决方法 这几天重新更新了git&#xff0c;直接安装新版本后&#xff0c;右键菜单失效找不到了。找了好几个博客&#xff0c;发现都不全面&#xff0c;最后总结一下解决方法&#xff1a; &#xff08;1&#xff09;按winr&#xff0c;输入regedit打开注册…

解决git管理GitHub连接问题

前言 git提交文档到GitHub老是出问题&#xff0c;记录下 报错 首先是常规操作更新文档&#xff0c;命令如下 $ git add . $ git commit -m "add" $ git push origin main后面老是报这种错误&#xff0c;如下图 To github.com:zhenxijiabei/yuque.git! [rejected…

mysql-进阶篇

文章目录 存储引擎MySQL体系结构相关操作 存储引擎特点InnoDBInnoDB 逻辑存储结构 MyISAMMemory三个存储引擎之间的区别存储引擎的选择 索引1. 索引结构B-TreeB-Tree (多路平衡查找树)B-Tree演变过程 BTree与 B-Tree 的区别BTree演变过程 Hash 2.索引分类3.索引语法演示 4.SQL性…

react18介绍

改进已有属性&#xff0c;如自动批量处理【setState】、改进Suspense、组件返回undefined不再报错等 支持Concurrent模式&#xff0c;带来新的API&#xff0c;如useTransition、useDeferredValue等 如何升级React 18 npm install reactlatest react-domlatestnpm install ty…

5分钟做自己的微信红包封面

文章目录 怎么制作自己的红包封面&#xff1f;开通红包封面的要求如下&#xff1a;收费情况制作具体网站&#xff1a;https://chatapi.onechat.fun/register?affYoU6 提交审核logo封面、挂件、气泡证明材料 发放红包封面其他 怎么制作自己的红包封面&#xff1f; 开通红包封面…

OpenCV书签 #结构相似性SSIM算法的原理与图片相似性实验

1. 介绍 结构相似性&#xff08;Structural Similarity&#xff0c;简称SSIM算法&#xff09;&#xff0c;主要用于检测两张相同尺寸的图像的相似度、或者检测图像的失真程度&#xff0c;是一种衡量两幅图像相似度的指标。 定义 给定两个图像 x 和 y&#xff0c;两张图像的结…

第十三讲_ArkUI栅格布局(GridRow/GrowCol)

ArkUI栅格布局&#xff08;GridRow/GrowCol&#xff09; 1. 栅格布局概述2. GridRow的使用2.1 设置栅格布局的总列数2.2 设置栅格布局的排列方向2.3 设置栅格布局中子组件间距 3. GridCol的使用3.1 设置一个GridCol占栅格布局的列数3.2 设置GridCol在栅格布局中偏移列数3.3 设置…

xshell可以远程登录服务器但是vscode一直显示让输入密码的解决方案

vscode报错 但是xshell可以登录 原因&#xff1a;可能因为我上一次没有恰当的退出远程链接导致的&#xff0c;我每次退出远程都是直接强制关闭VScode。 解决方法&#xff1a;打开VScode的 view &#xff08;查看&#xff09; palette&#xff08;命令面板&#xff09;然后输…

读懂比特币—bitcoin代码分析(二)

我们从比特币的客户端启动顺序作为入口来分析代码&#xff0c;先看下面这个函数&#xff1a;AppInitBasicSetup&#xff0c;初始化应用基础设置 bool AppInitBasicSetup(const ArgsManager& args, std::atomic<int>& exit_status) {// ************************…

【Maven】-- 打包添加时间戳的两种方法

一、需求 在执行 mvn clean package -Dmaven.test.skiptrue 后&#xff0c;生成的 jar 包带有自定义系统时间。 二、实现 方法一&#xff1a;使用自带属性&#xff08;不推荐&#xff09; 使用系统时间戳&#xff0c;但有一个问题&#xff0c;就是默认使用 UTC0 的时区。举例…