结论:app端支持比较好可以做到实时传递,微信小程序支持比较差,小程序向url传参只能通过url,url向app传参需要特定时机(后退、组件销毁、分享、复制链接)触发才能收到消息。
以下是代码文章来源:https://www.toymoban.com/news/detail-589711.html
- app端(需要使用nvue)
<template> <view class="webview-box"> <button style="z-index: 999;" @click="handlePostMessage('app向url传值')">点击向url传值</button> <web-view ref="webview" class="webview" src="http://192.168.18.103:8080/index?os=wx" @onPostMessage="PostMessage"></web-view> </view> </template> <script> export default { data() { return { url:'http://192.168.18.103:8080/index?os=wx' } }, onLoad() { this.url += '&t=' + new Date().getTime() }, methods: { // 接收h5页面发来的键值判断需要执行的操作 PostMessage(evt) { console.log("postMessage: ", evt) uni.showModal({ title:"提示", content:evt.detail.data[0].msg }) }, // 获取到对应webview(关键)通过evalJs(注意大小写,如果不知道evalJ是什么,可自行百度) 执行网页的函数,可对其进行传参,完成与网页的通讯 handlePostMessage(res) { console.log("22") this.$refs.webview.evalJs(`handleMessage('${res}')`); } } } </script> <style> .webview-box { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .webview { flex: 1; height: 300rpx; } </style>
- 微信小程序端(正常vue格式)
<template> <view class="webview-box"> <web-view ref="webview" class="webview" :src="url" @onPostMessage="PostMessage" @message="PostMessage"></web-view> </view> </template> <script> export default { data() { return { url:'http://192.168.18.103:8080/index?os=wx' } }, onLoad() { this.url += '&t=' + new Date().getTime() }, methods: { // 接收h5页面发来的键值判断需要执行的操作 PostMessage(evt) { console.log("postMessage1: ", evt) }, // 获取到对应webview(关键)通过evalJs(注意大小写,如果不知道evalJ是什么,可自行百度) 执行网页的函数,可对其进行传参,完成与网页的通讯 handlePostMessage(res) { console.log("22") } } } </script> <style> .webview-box { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .webview { flex: 1; height: 300rpx; } </style>
3、html端文章来源地址https://www.toymoban.com/news/detail-589711.html
<!doctype html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"> <title>默认的title</title> <!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <!-- uni 的 SDK,必须引用。 --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> <body> <div id="box"></div> <div class="btn" >点击1</div> <button id="to_shiming">向上传递数据</button> </body> <script> // 在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后,才能安全调用 uni 的 API。 document.addEventListener('UniAppJSBridgeReady', function() { // 下面就是js知识了,点击某个按钮后发消息。 document.getElementById('to_shiming').addEventListener('click', function() { // 这里调用uniapp的api执行消息发送 uni.postMessage({ data: { msg:'url向app传值' } }); }); }); window.handleMessage = function(msg){ console.log("接收到消息",msg); alert("接收到消息"+msg); document.getElementById('box').innerText = msg; } </script> </head> </html>
到了这里,关于uniapp 在app和小程序端使用webview进行数据交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!