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传递过来的参数。代码如下:

javascript 复制代码
// 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种方式代码如下:

javascript 复制代码
// 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").token
	        console.log(token)	
	    }
	}
},
相关推荐
Felicity_Gao2 小时前
uni-app VOD 与 COS 选型、开发笔记
前端·笔记·uni-app
我狸才不是赔钱货3 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~4 小时前
前端三剑客之一 HTML~
前端·html
lang201509284 小时前
Spring远程调用与Web服务全解析
java·前端·spring
listhi5206 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木6 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊7 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost7 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns7 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年8 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化