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

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

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

相关文章

蓝桥杯每日一题2023.11.30

题目描述 九数组分数 - 蓝桥云课 (lanqiao.cn) 题目分析 此题目实际上是使用dfs进行数字确定&#xff0c;每次循环中将当前数字与剩下的数字进行交换 eg.1与2、3、4、、、进行交换 2与3、4、、、进行交换 填空位置将其恢复原来位置即可&#xff0c;也就直接将其交换回去即可…

Linux(CentOS7.5):新增硬盘分区纪实

一、服务器概述 1、既有一块系统硬盘&#xff0c;新增一块100G硬盘。 2、要求&#xff0c;将新插入硬盘分为&#xff1a;20G、30G、50G。 二、操作步骤 1、确认新硬盘是否插入成功&#xff1a; fdisk -l# 红色框出来的&#xff0c;为识别出来的新硬盘信息 # 黄色框出来的&#…

Linux:锁定部分重要文件,防止误操作

一、情景描述 比如root用户或者拥有root权限的用户&#xff0c;登陆系统后&#xff0c;通过useradd指令&#xff0c;新增一个用户。 而我们业务限制&#xff0c;只能某一个人才有权限新增用户。 那么&#xff0c;这个时候&#xff0c;我们就用chattr来锁定/etc/passwd文件&…

一些ab命令

1.ab简介 ab是apache自带的压力测试工具&#xff0c;是apachebench命令的缩写。ab非常实用&#xff0c;它不仅可以对apache服务器进行网站访问压力测试&#xff0c;也可以对或其它类型的服务器如nginx、tomcat、IIS等进行压力测试。 ab的原理&#xff1a;ab命令会创建多个并发…

力扣 790. 多米诺和托米诺平铺(一维dp)

题目描述&#xff1a; 有两种形状的瓷砖&#xff1a;一种是 2 x 1 的多米诺形&#xff0c;另一种是形如 "L" 的托米诺形。两种形状都可以旋转。 给定整数 n &#xff0c;返回可以平铺 2 x n 的面板的方法的数量。返回对 109 7 取模 的值。 平铺指的是每个正方形都…

df新增一列数据,并指定列名

方法1&#xff1a;直接指定df列名赋值为list即可 skill_info_df[age] age_list ps:list的长度要和df对齐 方法二 使用insert&#xff1a;

智能优化算法应用:基于象群算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于象群算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于象群算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.象群算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

AntDB数据库,通信行业20年变迁的见证者

2000年至今&#xff0c;通信行业发展已过了20多年。面对通信行业巨大的数据信息&#xff0c;数据库在行业发展中发挥了巨大的作用&#xff0c;AntDB数据库便是其中较为知名的一款数据库。在通信行业快速发展的阶段&#xff0c;打破国外产品与技术垄断是产业发展的重点与难点。面…

latex表格中内容过多如何换行【已解决】

最近在写论文的时候放了一个表格&#xff0c;但是表格看起来特别大&#xff0c;因为想让某些内容多的单元格完成换行操作 首先在main.tex引入makecell包 \usepackage{makecell} 然后回到表格找到你想换行的单元格&#xff0c;把\makecell{}加进去&#xff0c;然后在需要换行的…

深入浅出强化学习

目录 一、强化学习的概念 二、强化学习的特点 三、强化学习的训练过程 一、强化学习的概念 强化学习是一种机器学习方法&#xff0c;旨在教会算法如何通过与环境的交互来进行学习和决策。与传统的监督学习和无监督学习不同&#xff0c;强化学习侧重于学习与奖励和惩罚&#…

首批量子计算机即将部署!欧盟为波兰提供新算力优势

&#xff08;图片来源&#xff1a;网络&#xff09; 英国量子计算机开发商ORCA公司将为波兰的波兹南超级计算和网络中心&#xff08;PSNC&#xff09;提供两个PT-1光量子系统&#xff0c;以加速其在量子计算领域的研究和应用工作&#xff0c;如生物学、化学和机器学习领域。 …

机器人最优控制开源库 Model-based Optimization for Robotics

系列文章目录 文章目录 系列文章目录前言一、开源的库和工具箱1.1 ACADO1.2 CasADi1.3 Control Toolbox1.4 Crocoddyl1.5 Ipopt1.6 Manopt1.7 LexLS1.8 NLOpt1.9 qpOASES1.10 qpSWIFT1.11 Roboptim 二、其他库和工具箱2.1 MUSCOD2.2 OCPID-DAE12.3 SNOPT 前言 机器人&#xff…

Conductor之动态分叉

Conductor之动态分叉 动态分叉 关于动态分叉&#xff0c;参考1 动态分叉 有时候我们希望在运行时能动态添加分叉任务&#xff08;注意是分叉任务&#xff0c;不是动态任务&#xff09;&#xff0c;Conductor当前版本也是支持的&#xff0c;但是经过试验的版本只支持串行分叉&…

进程间通信方式——管道

进程间通信方式——管道 1、管道2、匿名管道2.1 创建匿名管道2.2 进程间通信 3、有名管道3.1 创建有名管道3.2 进程间通信 4、管道的读写行为 原文链接 1、管道 管道的是进程间通信&#xff08;IPC - InterProcess Communication&#xff09;的一种方式&#xff0c;管道的本质…

进程(process) vs 线程(Thread)

文章目录 前言一、进程&#xff08;process) vs 线程&#xff08;Thread&#xff09;引用自维基百科引用自CSDN INCOE AI引用自 geeksforgeeksOS( Operating System )如何调度线程的线程锁的核心原理是什么? 总结 前言 &#x1f680; 多方面理解进程(process) &#xff0c;线…

Python程序的计时

# -*- coding: UTF-8 -*- import timedef fun():time.sleep(5)sinceTime time.time() print("开始计时时刻&#xff1a;", sinceTime) fun() endTime time.time() print("结束时刻&#xff1a;", endTime) program_time endTime - sinceTime print(&quo…

振南技术干货集:各大平台串口调试软件大赏(5)

注解目录 &#xff08;串口的重要性不言而喻。为什么很多平台把串口称为 tty&#xff0c;比如 Linux、MacOS 等等&#xff0c;振南告诉你。&#xff09; 1、各平台上的串口调试软件 1.1Windows 1.1.1 STCISP &#xff08;感谢 STC 姚老板设计出 STCISP 这个软件。&#xf…

特殊二叉树——堆

&#x1f308;一、堆的基本概念 1.堆&#xff1a;非线性结构&#xff0c;是完全二叉树 2.堆分为大堆和小堆。 大堆&#xff1a;树中任意一个父亲都大于等于孩子&#xff0c;根节点值大于等于其所有子孙节点的值。 小堆&#xff1a;树中任意一个父亲都小于等于孩子&#xff0c;…

【pytorch】深度学习入门一:pytorch的安装与配置(Windows版)

请支持原创&#xff0c;认准DannisTang&#xff08;tangweixuan1995foxmail.com&#xff09; 文章目录 第〇章 阅读前提示第一章 准备工作第一节 Python下载第二节 Python安装第三节 Python配置第四节 Pycharm下载第五节 Pycharm安装第六节 CUDA的安装 第二章 Anaconda安装与配…

Kaggle-水果图像分类银奖项目 pytorch Densenet GoogleNet ResNet101 VGG19

一些原理文章 卷积神经网络基础&#xff08;卷积&#xff0c;池化&#xff0c;激活&#xff0c;全连接&#xff09; - 知乎 PyTorch 入门与实践&#xff08;六&#xff09;卷积神经网络进阶&#xff08;DenseNet&#xff09;_pytorch conv1x1_Skr.B的博客-CSDN博客GoogLeNet网…