uniapp 中 web-view 向 App 传递消息

超级无敌谢大脚2024-08-15 14:57

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
 }