本文详解uni-app中APP与H5页面通过web-view进行数据交互的两种方案。首先分析URL传参在安全性、长度限制及回传机制上的不足，随后重点介绍使用plus.webview.create携带data对象以及uni.postMessage进行双向通信的具体代码实现，涵盖APP向H5传参及H5向APP回传参数的完整流程。
uni-app与web-view数据交互概述
本文针对基于uni-app开发的移动应用，探讨如何在其内部嵌入web-view页面并实现双方之间的数据交互。若您的开发需求与此相关，请继续阅读后续内容。
URL传参方案的局限性分析
在uni-app中嵌入web-view时，开发者通常首选通过URL参数进行传值。
<!-- app端 -->
<view>
<web-view src="www.xxxxx?name=张三"></web-view>
</view>//web端
alert(this.$route.query.name) //张三尽管这是APP向H5传递数据最直观的方式，但该方案在实际应用中存在显著缺陷：
首先，URL参数容易被抓取，若传输敏感信息，将带来严重的安全隐患；
其次，URL长度存在硬性限制，当需要传输的数据量过大时，会导致传参失败；
再次，该方式缺乏H5向APP回传数据的标准机制；
最后，从工程规范角度看，该方式并非最佳实践。
plus.webview与postMessage传参实现
下文将详细介绍项目中采用的更优方案：利用plus.webview.create方法在创建webview时通过data对象携带参数，并结合uni.postMessage()实现参数的回传。
当APP需要向H5页面传递数据时：
APP端的核心实现代码如下：
let wv = plus.webview.create(
'xxx.xxxx.xxx?t=' + new Date().getTime(),//date保证不走缓存
'batch_view',
{
top: '0',
left: '0',
height: '100%',
width: '100%'
},
{
data: {
token: token,
userInfo: userInfo,
implantType: 'uniapp'
}
}) //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
let currentWebview = this.$mp.page.$getAppWebview()
currentWebview.append(wv);//重要，否则会失效H5页面接收数据的逻辑如下：
if (window.plus) {
plusReady();
}//加上此判断以免再浏览器打开h5页面时报plus is not define
function plusReady() {
if (plus.webview.getWebviewById("batch_view")) {
const appData = plus.webview.getWebviewById("batch_view").data;
alert(JSON.stringfy(appData))
}
}反之，当H5页面需要向APP传递数据时：
H5端的发送代码如下：
<!-- index.html中body引入uni.webview -->
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script
type="text/javascript"
src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"
></script>
<!-- 以下为验证是否引入成功（可删） -->
<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener("UniAppJSBridgeReady", function () {
uni.postMessage({
data: {
action: "6666", // 这是传的参数
},
});
});
</script>
</body>//正常使用直接调用即可
uni.postMessage({
data: {
action: "noToken", // 这是传的参数
},
});APP端接收H5消息的代码如下：
//建议写在该webview嵌入页面的onLoad生命周期中
plus.globalEvent.addEventListener('plusMessage', function(msg) {
console.log(msg.data.args.data.arg)//web传来的参数
if (msg.data.args.data.arg?.action == 'noToken') {
uni.clearStorageSync()
uni.reLaunch({
url: '/pages/login/index'
})
}
})需要注意的是，官方文档推荐的写法通常涉及在HTML中引入uni.webview.js并监听UniAppJSBridgeReady事件，这种方式适用于直接在HTML文件中静态创建webview的场景。由于本项目采用plus.webview.create动态创建webview，未使用@message绑定，因此采用了上述代码方案。
<web-view @message="handlePostMessage"></web-view>方案总结与官方推荐对比
综上所述，本文介绍了uni-app与web-view页面间相互传参的完整实现路径。
关于uni-app和web-view页面相互传参的内容至此介绍完毕，更多相关技术细节可参考本站历史文章或继续浏览后续内容，感谢支持。