uniapp 使用web-view外接三方

来源

前阵子有个需求是需要在原有的项目上加入一个电子签名的功能,为了兼容性和复用性后面解决方法是将这个电子签名写在一个新的项目中,然后原有的项目使用web-view接入这个电子签名项目;

最近又有一个需求,是需要接入第三方的页面,也用到了web-view组件,那今天就来总结下这两个需求的共同点。

web-view

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。

注意:

各小程序平台,web-view 加载的 url 需要在后台(微信公众平台)配置域名白名单,包括内部再次 iframe 内嵌的其他 url
在这里插入图片描述

代码实现

–mine.vue–

// 跳转页面
// 如果你跳转的时候需要传参而且这个参数是url地址或者是含有特殊字符,需要用encodeURIComponent()编码,否则会丢失参数uni.navigateTo({url: `../../pagesSub/mine/memberUnionPaySignUrl/memberUnionPaySignUrl?url=` + encodeURIComponent(res)})

–memberUnionPaySignUrl.vue–

<template><view class="memberUnionPaySignUrl"><web-view ref="mapSelect" id="_mapView" :src="paySignUrl"></web-view></view>
</template><script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component({name: 'memberUnionPaySignUrl',components: {}
})
export default class memberUnionPaySign extends Vue {paySignUrl: any = null;// 你要跳转的三方地址// 在onLoad()生命周期中接受上一个页面的传参onLoad(options) {// console.log('url参数=》', decodeURIComponent(options.url))// 获取到url参数this.paySignUrl = decodeURIComponent(options.url) // 接受url地址需要解码}
}
</script><style  lang="scss" scoped>
</style>

推荐资料
https://uniapp.dcloud.net.cn/component/web-view.html#web-view
https://blog.csdn.net/qq_36611673/article/details/124974609

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前端】浅谈async/await异步传染性

文章目录 概述观点无法解决可以解决 来源 概述 "异步传染性"问题通常是指&#xff0c;当一个函数使用了async和await&#xff0c;其调用者也需要使用async和await处理异步操作&#xff0c;导致整个调用链都变成异步的。这种情况可能导致代码变得更复杂&#xff0c;不…

Nginx 学习笔记

一、Nginx 简介 1. Nginx 是什么? Nginx (engine x) 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 服务器 Nginx 可以作为一个 Web 服务器进行网站的发布,也可以作为反向代理服务器进行负载均衡的实现常见的 Web 服务器:Tomcat、Apache、Nginx、Weblog…

WSL2 docker GUI 界面

在 WSL2 docker 中运行GUI界面。 具体流程和远程显示Ubuntu界面类似&#xff0c;链接, 更简单一点&#xff0c; 少了 ssh 的部分。 安装好wsl2 和 docker wsl2 运行GUI程序&#xff0c;windows 会默认弹出窗口。 可以安装 gedit 测试一下 windows 下载并运行 Xlaunch. 运行 d…

轻松配置PPPoE连接:路由器设置和步骤详解

在家庭网络环境中&#xff0c;我们经常使用PPPoE&#xff08;点对点协议过夜&#xff09;连接来接入宽带互联网。然而&#xff0c;对于一些没有网络专业知识的人来说&#xff0c;配置PPPoE连接可能会有些困难。在本文中&#xff0c;我将详细介绍如何轻松配置PPPoE连接&#xff…

FO-like Transformation in QROM Oracle Cloning

参考文献&#xff1a; [RS91] Rackoff C, Simon D R. Non-interactive zero-knowledge proof of knowledge and chosen ciphertext attack[C]//Annual international cryptology conference. Berlin, Heidelberg: Springer Berlin Heidelberg, 1991: 433-444.[BR93] Bellare M…

Python知识碎片补充【侯小啾python领航班系列(十四)】

Python知识碎片补充【侯小啾python领航班系列(十四)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

与原有视频会议系统对接

要实现与原有视频会议系统对接&#xff0c;需要确保通信协议的一致性。连通宝视频会议系统可与第三方视频会议系统对接。实现与第三方会议系统对接还可以使用会议室连接器&#xff0c;可以确保不同系统之间的数据传输和交互。 具体对接流程可能因不同品牌和类型的视频会议系统而…

【C语言学习疑难杂症】C语言中数组存储时为什么从低地址到高地址

在C语言中&#xff0c;数组的存储从低地址到高地址是有其历史原因的。这种设计主要是为了与计算机系统的内存组织方式相一致。 在计算机系统中&#xff0c;内存通常按照字节进行编址&#xff0c;地址从低到高递增。数组在内存中是连续存储的&#xff0c;因此数组的第一个元素&…

Matlab 点云线性指数计算(加权)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 思路其实很简单,即对每个邻近点集中的点,根据其到点集中心的距离进行加权处理(权重函数),之后再基于加权之后的点获取其协方差矩阵,最后再求取其相关的特征值,以此来获取该点的线性指数。相关公式如下所示:…

linux防火墙免费版添加UA屏蔽某些垃圾蜘蛛

宝塔插件的防火墙UA添加屏蔽某些垃圾蜘蛛 安装宝塔linux防火墙。 软件管理 → linux防火墙免费版→ 全局配置 → User-Agent过滤 填入下面的规则。 随便写描述后点击添加即可。 垃圾蜘蛛规则列表 (www.seokicks.de|YYSpider|Mattermost|Discord|CCBot|RepoLookoutBot|trac…

Python+Requests模块添加cookie

请求中添加cookies 对于某些网站&#xff0c;登录然后从浏览器中获取cookies&#xff0c;以后就可以直接拿着cookie登录了&#xff0c;无需输入用户 名密码。 一、在参数中添加cookie 在发送请求时使用cookies 代码示例&#xff1a; import requests # 1&#xff0c;在参数…

【Java】集合 之 编写 equals 方法

List equals() List 还提供了boolean contains(Object o)方法来判断 List 是否包含某个指定元素。此外&#xff0c;int indexOf(Object o)方法可以返回某个元素的索引&#xff0c;如果元素不存在&#xff0c;就返回-1。 我们来看一个例子&#xff1a; import java.util.List…

uniapp中解决swiper高度自适应内容高度

起因&#xff1a;uniapp中swiper组件swiper 标签存在默认高度是 height: 150px &#xff1b;高度无法实现由内容撑开&#xff0c;在默认情况下&#xff0c;swiper盒子高度显示总是 150px 解决办法思路&#xff1a; 动态设置swiper盒子的高度&#xff0c;故需要获取swiper-item盒…

WPF Mvvm模式下面如何将事件映射到ViewModel层

前言 平常用惯了Command绑定,都快忘记传统的基于事件编程模式了,但是Commond模式里面有个明显的问题,就是你无法获取到事件源的参数。很多大聪明肯定会说,这还不简单,通过自己写控件,给控件加个自定义属性不就行了,想要啥事件就写啥事件进去,完全自主可控。但是对于写…

Matlab R2023b 中文版软件安装包下载地址及安装教程

MATLAB是一款商业数学软件&#xff0c;用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境&#xff0c;主要包括MATLAB和Simulink两大部分。可以进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程序等&#xff0c;主要…

建设银行RPA应用实践

当下&#xff0c;银行业正在从“互联网金融”时代向“新科技金融”时代迈进&#xff0c;在目前经济形势严峻、人力成本持续增加的经营背景下&#xff0c;以科技解放人力将是智能化银行发展的必然趋势。RPA技术为解决上述问题提供了崭新的路径。 RPA&#xff08;机器人流程自动…

ES-深入理解倒排索引

倒排索引 idproductdesc1新版 小米 至尊-纪念版手机1小米 NFC 手机3NFC手机4小米 耳机5华为 耳机6扫地机器人7华为 Mata………………term_indexterm dictionaryposting list------------------------------------小米1……100W华为6,7,9NFC76,90耳机5352红米643,98机器人645,9…

Python中进行特征重要性分析的8个常用方法

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在机器学习和数据科学领域&#xff0c;理解特征在模型中的重要性对于构建准确且可靠的预测模型至关重要。Python提供了多种强大的工具和技术&#xff0c;能够探索特征重要性的各个方面。 本文将详细介绍8种常用…

Python【匹配符号】

要求&#xff1a; 输入一行符号&#xff0c;以#结束&#xff0c;判断其中的对称符号是否匹配。对称符号包括&#xff1a; { } 、 [ ] 、 ( )、 < > 如果对称符号能够实现中间对称&#xff0c;则输出yes 否则输出no 代码如下&#xff1a; # 定义一个函数&…

记录一次爱快路由ACL策略引起的大坑

环境&#xff1a; A公司和B公司采用爱快的ipsec互联 B公司同时有加密软件限制网络 问题&#xff1a;对方ERP无法连接我们的数据库服务器 先简单测试了下1433端口是不是通的 下面的测试结果&#xff0c;直接ping是通的&#xff0c;但是加上1433端口后就不通 排查过程&#xff1…