uniapp(h5 app) 中 webview和h5通信

1 uniapph5 和h5页面 通信

h5

window.parent.postMessage(message, '*');

uniapph5 onload中

window.addEventListener('message', function (e) {

// 监听 message 事件

//console.log(e.origin)

console.log('收到的cocos游戏ID',e.data)

//收到cocos退出游戏返回的指令

if(e.data){

uni.navigateTo({

url:`/pages/salason/salason?id=${e.data}`

})

}

})

2 uniapp app 中 和h5通信

h5 index.html中 引入<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">

uni.webView.postMessage({ data: { } }) 发送

uniapp app 中

<web-view :src="tlink" @message="getmessage"></web-view>

//app端接收数据

const getmessage = (e) => {

console.log('uniapp接收的数据', e.detail.data0.name)

if(e.detail.data0.name){

uni.navigateTo({

url:`/pages/salason/salason?id=${e.detail.data0.name}`

})

}

}

相关推荐
白远山10 小时前
上海24小时自助健身房系统软件开发实战指南:从需求到部署
java·架构·uni-app·需求分析
海鸥两三15 小时前
小程序文档预览 · 进阶面试题
小程序·uni-app·uniapp
海鸥两三16 小时前
微信小程序 PDF 预览实践(uni.downloadFile → uni.openDocument)
小程序·uni-app
PedroQue991 天前
uni-app x 事件通信插件重磅上线
前端·uni-app
gnip2 天前
uni-app 原生插件
前端·javascript·uni-app
白远山2 天前
自助健身小程序源码:架构拆解、核心链路与本地部署实战
java·架构·uni-app·需求分析
2501_915909063 天前
怎么用 FlutterFlow 把应用发布到 App Store?
android·ios·小程序·https·uni-app·iphone·webview
2501_915918413 天前
怎么把 Python 写的 Flet 应用打包成 iOS App 并上架 App Store?
android·ios·小程序·https·uni-app·iphone·webview
Geek_Vison3 天前
小程序容器如何抹平系统差异,让一个小程序运行在 iOS、安卓、鸿蒙和电脑端
小程序·uni-app·harmonyos·mpaas
PedroQue994 天前
0.5.0重磅发布:动画插件+H5体验全面优化
前端·uni-app