宁波网站seo,天河网站建设服务,做网站的公司杭州,什么软件制作视频最好结论#xff1a;app端支持比较好可以做到实时传递#xff0c;微信小程序支持比较差#xff0c;小程序向url传参只能通过url#xff0c;url向app传参需要特定时机(后退、组件销毁、分享、复制链接)触发才能收到消息。 以下是代码 app端(需要使用nvue) template app端支持比较好可以做到实时传递微信小程序支持比较差小程序向url传参只能通过urlurl向app传参需要特定时机(后退、组件销毁、分享、复制链接)触发才能收到消息。 以下是代码 app端(需要使用nvue) template view classwebview-box button stylez-index: 999; clickhandlePostMessage(app向url传值)点击向url传值/buttonweb-view refwebview classwebview srchttp://192.168.18.103:8080/index?oswx onPostMessagePostMessage/web-view /view
/template
script export default { data() { return { url:http://192.168.18.103:8080/index?oswx} }, 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 classwebview-box web-view refwebview classwebview :srcurl onPostMessagePostMessage messagePostMessage/web-view /view
/template
script export default { data() { return { url:http://192.168.18.103:8080/index?oswx} }, 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端 !doctype html
html langch xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalableno,viewport-fitcovertitle默认的title/title!-- 微信 JS-SDK 如果不需要兼容小程序则无需引用此 JS 文件。 -- script typetext/javascript srchttps://res.wx.qq.com/open/js/jweixin-1.3.2.js/script !-- uni 的 SDK必须引用。 -- script typetext/javascript srchttps://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js/scriptbodydiv idbox/divdiv classbtn 点击1/divbutton idto_shiming向上传递数据/button/bodyscript // 在引用依赖的文件后需要在 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
