uniapp 开发 APP 使用 web-view 引入H5 app与 h5 页面通信

uniapp 可以同时兼容 APP 和 H5,但有时候有些功能在 APP 中实现不了而在 H5 中可以实现,就可以采用 web-view 的方式在 APP 模式下显示 H5 页面。但是 APP 和 H5 储存的参数是不能共享的,例如token,就涉及到 APP 与 H5 之间的参数传递。
H5 向 APP 传参:引入 webview.js ,调用 uni.postMessage({}),如果提示uni.postMessage 不是function,就在 webview.js 里面将 uni 替换掉,如替换成 webUni;在使用webview的页面通过 webview 上的 message 方法获取H5传递过来的参数。代码如下:

// H5 页面部分代码
import webUni from "@/common/js/webview.js" // 根据实际路径引入webview.js
// 传参数到app
webUni.postMessage({data: {name: '孙悟空',},
})// APP 页面部分代码
<!-- #ifdef APP-PLUS -->
<web-view ref="webView" :src="webUrl" :webview-styles="{progress: {color: '#07cd88'}}" @message="handleMessage"></web-view>	
<!-- #endif -->
// app 获取 H5传递过来的参数
handleMessage(data){console.log(data.detail.data[0].name, 'handleMessage')
}

APP 向 H5 传参:可以将参数拼接到 webUrl 上,但是这种方法参数改变时 webUrl 如果存在就不太会自动更新参数,如果参数改变时修改webUrl的话页面会重新加载;还有一种方法是通过create webview来创建 H5 页面,但是这种方式不能使用 message 方法获取 H5 传过来的参数;2种方式代码如下:

// 1. 拼接参数方式
// APP 页面部分代码 
<!-- #ifdef APP-PLUS -->
<web-view ref="webView" :src="webUrl" :webview-styles="{progress: {color: '#07cd88'}}" @message="handleMessage"></web-view>	// webUrl = "H5_url?token=" + token
<!-- #endif -->
// H5 获取 app传递过来的参数
// 通过location.href 即可获取// 2. 创建webview方式,不能使用 message 方法
// APP 页面部分代码 
let wv = plus.webview.create(webUrl, // url'sipview', // id{// 这里是style},{token: token,name: '孙行者',}
)
const pages = getCurrentPages()
const page = pages[pages.length - 1]
const currentWebview = page.$getAppWebview()
currentWebview.append(wv)// H5 获取 app 传递过来的参数
getAppMsg(){if (window.plus) {plusReady();}function plusReady() {if (plus.webview.getWebviewById("sipview")) {const token = plus.webview.getWebviewById("sipview").tokenconsole.log(token)	}}
},

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

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

相关文章

调整奇数偶数顺序

调整数组使奇数全部都位于偶数前面。 题目&#xff1a; 输入一个整数数组&#xff0c;实现一个函数&#xff0c;来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分&#xff0c;所有偶数位于数组的后半部分。 思路&#xff1a; 1. 给定两个下标left和right&#…

勘探开发人工智能技术:机器学习(5)

0 提纲 6.1 矩阵分解 6.2 全连接 BP 神经网络 6.3 卷积神经网络 6.4 LSTM 6.5 Transformer 6.6 U-Net 1 矩阵分解 把稀疏矩阵分解成两个小矩阵的乘积, 恢复后的矩阵用于预测. 1.1 基本概念 矩阵分解是使用数学应对机器学习问题的一类典型而巧妙的方法. 矩阵分解是把将一个…

Springboot所有的依赖

<properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><!-- 声明springboot的版本号 -->…

【行为型设计模式】C#设计模式之策略模式

题目&#xff1a;假设你正在开发一个手机应用程序&#xff0c;该应用程序包含一个计算器功能。用户可以根据自己的需求选择不同的计算策略进行计算&#xff0c;例如加法、减法、乘法或除法。请使用策略模式设计该计算器功能&#xff0c;使得用户可以根据自己的选择进行相应的计…

MongoDB 分片集群

在了解分片集群之前&#xff0c;务必要先了解复制集技术&#xff01; 1.1 MongoDB复制集简介 一组Mongodb复制集&#xff0c;就是一组mongod进程&#xff0c;这些进程维护同一个数据集合。复制集提供了数据冗余和高等级的可靠性&#xff0c;这是生产部署的基础。 1.1.1 复制集…

3D Web轻量化引擎HOOPS Communicator如何实现对BIM桌面端的支持?

HOOPS Communicator是一款简单而强大的工业级高性能3D Web轻量化渲染开发包&#xff0c;其主要应用于Web领域&#xff0c;主要加载其专有的SCS、SC、SCZ格式文件&#xff1b;HOOPS还拥有另一个桌面端开发包HOOPS Visualize&#xff0c;主要加载HSF、HMF轻量化格式文件。两者虽然…

基于 eclipse-temurin 构建国内时区,地区,语言的docker镜像

基于 eclipse-temurin 构建国内时区&#xff0c;地区&#xff0c;语言的镜像 使用场景自定Dockerfile构建自己的基础镜像构建本地镜像推送远程仓库 使用场景 在给应用构建自定义镜像时&#xff0c;往往需要在每次构建时去调整时区&#xff0c;地区这些东西&#xff1b;每次构建…

那些年的Xposed开发经验记录

把之前写的Xposed相关文章合并到一块&#xff0c;方便查阅 目录 多进程App的Hook问题XposedHelper中的静态变量demo的AndroidManifest.xml的测试核心代码结论限制handleLoadPackage被单个进程多次执行的问题 多dex Hook问题为应用增加权限利用Xposed删除权限参考 Hook框架集锦…

Java基础入门篇——IDEA开发第一个入门程序(五)

目录 一、IDEA层级结构分类 二、IDEA层级结构介绍 三、IDEA层级关系 四、创建IDEA中的第一个代码 一、IDEA层级结构分类 IntelliJ IDEA的项目结构主要分为以下几个层级&#xff1a; Project&#xff1a; 项目Module: 模块Package: 包Class&#xff1a; 类 一个项目里面…

hive-3.1.3 部署 ubuntu20

准备 安装hadoop 安装hive derby # 上传 scp -P 22 -r D:\00garbage\big_data\hive\apache-hive-3.1.3-bin.tar.gz mybigdata192.168.66.20:/home/mybigdata/ tar -zxvf apache-hive-3.1.3-bin.tar.gz mv apache-hive-3.1.3 hive # 环境变量 vim ~/.bashrc # 初始化元数据库…

力扣:58. 最后一个单词的长度(Python3)

题目&#xff1a; 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#x…

Android图形-合成与显示-概论

目录 引言 概念与理解 SurfaceFlinger Surface HWC Fence&#xff1a; Gralloc&#xff1a; DisplayDevice 引言 Activity是Android的主要UI相关组件。通过View的相关类和接口实现&#xff0c;在WMS的管理下&#xff0c;进行窗口和控件的测量&#xff0c;布局和绘制&am…

(十四)大数据实战——hadoop集群一键式高可用实现自动故障转移与故障初始化恢复

前言 本节内容延续前面几节内容,综合性的实现hadoop集群的高可用以及hadoop集群故障初始化的恢复,通过一个脚本,实现整个集群的高可用启停与状态观测。主要是zookeeper、hdfs、yarn等服务的高可用集群的一键式启停。 正文 hadoop高可用集群整体规划hadoop高可用集群服务规…

什么是公共英语三级?公共英语三级主要考什么

一、公共英语考试介绍 全国英语等级考试&#xff08;又称公共英语考试&#xff09;设置五个级别和一个附属级&#xff0c;五个级别是&#xff1a; 一级&#xff3b;含一级(B)&#xff0c;即附属级&#xff3d;、二级、三级、四级、五级。 公共英语一级的说明:一级是初始级&…

模拟实现消息队列项目(系列3) -- 服务器模块(硬盘管理)

目录 前言 1. 创建项目 2. 创建核心类 2.1 Exchange 2.2 MSQueue 2.3 Binding 2.4 Message 3. 数据库设计 3.1 SQLite 配置 3.2 Mapper层代码实现 3.2.1 创建表操作 3.2.2 交换机 队列 绑定的增加和删除 3.3 实现DataBaseManager 3.4 DataBaseManager单元测试 4.…

k8s 使用 containerd 运行时配置 http 私服

简介 Kubernetes 从 v1.20 开始弃用 Docker&#xff0c;并推荐用户切换到基于容器运行时接口&#xff08;CRI&#xff09;的容器引擎&#xff0c;如 containerd、cri-o 等。 目前使用的环境中使用了 Kubernetes v1.22.3&#xff0c;containerd 1.4.3&#xff0c;containerd 在…

线性代数(三) 线性方程组向量空间

前言 如何利用行列式&#xff0c;矩阵求解线性方程组。 线性方程组的相关概念 用矩阵方程表示 齐次线性方程组&#xff1a;Ax0&#xff1b;非齐次线性方程组&#xff1a;Axb. 可以理解 齐次线性方程组 是特殊的 非齐次线性方程组 如何判断线性方程组的解 其中R(A)表示矩阵A的…

git的简单介绍和使用

git学习 1. 概念git和svn的区别和优势1.1 区别1.2 git优势 2. git的三个状态和三个阶段2.1 三个状态&#xff1a;2.2 三个阶段&#xff1a; 3. 常用的git命令3.1 下面是最常用的命令3.2 git命令操作流程图如下&#xff1a; 4. 分支内容学习4.1 项目远程仓库4.2 项目本地仓库4.3…

恒盛策略:沪指冲高回落跌0.26%,酿酒、汽车等板块走弱,燃气股拉升

10日早盘&#xff0c;两市股指盘中冲高回落&#xff0c;半日成交约4200亿元&#xff0c;北向资金净卖出超20亿元。 到午间收盘&#xff0c;沪指跌0.26%报3235.9点&#xff0c;深成指跌0.54%&#xff0c;创业板指跌0.28%&#xff1b;两市算计成交4202亿元&#xff0c;北向资金净…

【Terraform学习】保护敏感变量(Terraform配置语言学习)

实验步骤 创建 EC2 IAM 角色 导航到IAM 在左侧菜单中&#xff0c;单击角色 。单击创建角色该按钮以创建新的 IAM 角色。 在创建角色部分&#xff0c;为角色选择可信实体类型&#xff1a; AWS 服务 使用案例:EC2 单击下一步 添加权限&#xff1a;现在&#xff0c;您可以看到…