uniapp 中 web-view 向 App 传递消息

web-view向App传递消息

引入官方库

在web项目中引入官方库 uni.webview.1.5.4.js ,可以从uniapp官方示例库中下载,下载后放入web项目目录下即可,本文放在js文件夹中,然后在web项目页面中引入。

官网对于uni-app使用web-view的介绍如下:web-view

注意事项提到postMessage方法,这就是web-view向App传递消息的方法,使用如下:

注意H5本身不支持uni-app里面的方法,所以在项目中引入支持调用uni-app方法的库

web-view页面使用:

javascript 复制代码
uni.postMessage({
    data: {
        action: 'click'
    }
});

uni-app接受消息:

javascript 复制代码
<view>
    <!--  #ifdef APP-PLUS -->
    <uni-status-bar></uni-status-bar>
    <!--  #endif -->
    <web-view @message="getMessage" :src="webViewUrl"></web-view>
</view>

getMessage(e) {
   console.log('webView传递过来的消息')
   const action = e.detail.data[0].action
 }
相关推荐
haogexiaole7 小时前
vue知识点总结
前端·javascript·vue.js
哆啦A梦15889 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
小周同学@11 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok11 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~11 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号11 小时前
【大前端】前端生成二维码
前端·二维码
2501_9159184112 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
程序员码歌12 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康13 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海13 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs