uni–app和web–view页面相互传参
首先：这里说的是uni–app开发的APP项目，嵌入web–view页面，并进行相互传参，如果和您想了解的内容相符，请继续阅读。
一、说到web–view嵌入uni–app开发的APP，传参方面很多人首先会想到url传参。
<!-- app端 -->
<view>
<web-view src="www.xxxxx?name=张三"></web-view>
</view>
//web端
alert(this.$route.query.name) //张三
这种方法是app向webview传参最简单的方式，但也存在许多弊端：
4.（重要）不够装逼！！！
二、下面详细说一下我在项目中用的方法，使用plus.webview.create(url, id, style, {data:{}})的方法携带参数，并使用uni.postMessage()的方法回传参数。
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);//重要，否则会失效
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中代码如下：
<!-- 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", // 这是传的参数
},
});
//建议写在该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中方创建的可以使用这种方式，我们是使用plus.webview.create创建的webview木有@message，故用了以上方法。
<web-view @message="handlePostMessage"></web-view>
ok，到这里就结束了，有不懂的小伙伴欢迎评论区提问。
原文地址:https://blog.csdn.net/SJJ980724/article/details/129705358
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_24582.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
