uniapp webview 与vue2页面双向通信
一、准备工作
uniapp:
1 2 | //建立工程,创建显示的页面 <web-view src= "http://192.168.0.58:8080" @message= "handlePostMessage" ></web-view> |
vue: 安装webview用到的依赖
1 2 | yarn add @dcloudio/uni-webview-js import uniWebview from '@dcloudio/uni-webview-js' |
二、vue向webview传递消息
vue部分:
1 2 3 | uniWebview.postMessage({ data: { 数据} }) |
uniapp部分:
1 2 3 4 5 | //handlePostMessage已经在上面绑定到webview上 handlePostMessage: function (res) { console.log(res) } |
三、webview向vue传递消息
vue部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | mounted () { //监听页面准备完毕 document.addEventListener( 'UniAppJSBridgeReady' , this .UniAppJSBridgeReady) }, beforeDestroy () { //销毁时移除监听和函数 window.msgFromUniapp = null document.removeEventListener( 'UniAppJSBridgeReady' , this .UniAppJSBridgeReady) }, methods: { UniAppJSBridgeReady () { //定义一个函数,挂载在window上,在uniapp中调用实现消息传递 window.msgFromUniapp = (arg) => { console.log(arg) } } } |
uniapp部分:
1 2 3 4 | //在需要的地方调用 data = {msg: 'msg from uniapp' }; const currentWebview = this .$scope.$getAppWebview().children()[0]; currentWebview .evalJS(`${funName}(${JSON.stringify(data)})`); |
标签:
webview通信
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)