您现在的位置是:首页 > 经典句子

小程序中 和web-view通信、Uniapp和webview通信

作者:淼淼时间:2024-04-01 11:45:31分类:经典句子

简介  文章浏览阅读1.1k次。按上面那种写法,你会发现怎么回事?bdinmaeeage接收不到消息?上方的代码,操作之后点击分享小程序段就收到信息了。_小程序和webview交互

点击全文阅读

h5

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        *{            padding: 0;            margin: 0;        }    </style>    <script src="./index.js"></script></head><body>    <button id="btn">发送数据</button>    <script>        window.onload=function(){          let btn=document.getElementById("btn")          btn.onclick=function(){            wx.miniProgram.postMessage({ data: 'foo' })            console.log("提交成功了哦")          }                    }    </script></body></html>index.js就是微信的js sdkhttps://res.wx.qq.com/open/js/jweixin-1.3.2.js 这个连接下载

小程序或者Uniapp中

<web-view src="http:www.text.com/index.html" bindmessage="bdinmaeeage"></web-view>js中bdinmaeeage(e){    console.log("获取到数据了")  }

按上面那种写法,你会发现怎么回事?bdinmaeeage接收不到消息?
那我们来看官方文档

bindmessage:网页向小程序 postMessage 时,会在以下特定时机触发并收到消息:小程序后退、组件销毁、分享、复制链接(2.31.1)。e.detail = { data },data是多次 postMessage 的参数组成的数组。 他这个是有触发条件的: 小程序后退、销毁组件、分享、复制连接才会调用的。并不是我们所想象的实时传递消息

上方的代码,操作之后点击分享小程序段就收到信息了

uniapp 中如何与webview通信

html中引入uniapp sdk<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>再通过uni.postMessage({            data: {                action: 'message'            }        });      传递信息,注意的是event.detail.data 中的数据,以数组的形式接收每次 post 的消,传递的消息信息,必须写在 data 对象中。      uniapp中接收      <web-view src="https://example.com" @message="onMessage"></web-view>      onMessage(e) {      console.log('Received message from web page:', e.detail.data);      uni.showToast({        title: e.detail.data,        icon: 'none'      });    }

网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。

点击全文阅读

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

我来说两句