uni-app app和h5的通信

本文介绍了如何使用uni-app开发时,通过修改uni_webview.js并创建桥接,实现在H5页面与原生App之间的消息传递,以便于实现功能间的交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uni-app一套代码同时打包安卓、iOS、h5,有一些需要app与h5的交互通信,目前做到了这块的业务,记录如下:

1.去declould官网,找到uni_webview.js下载链接,将uni_webview.js文件下载到本地,修改uni_webview.js内部配置,将uni修改为webUni,修改好的文件已放到文章顶部

2.把修改完的uni_webview.js放到项目目录下

3.在main.js文件中引入uni_webview.js,建立桥接关系

import * as webUni from '@/common/uni_webview.js'
document.addEventListener('UniAppJSBridgeReady', () => {
    // 将uniWebView赋值给vue原型,方便调用
    Vue.prototype.$webUni = webUni
});

4.实现h5给app发消息

h5端:

用 this.$webUni.postMessage({})函数发送消息

//h5发送消息
            // #ifdef H5
                setTimeout(()=>{
                    this.$webUni.postMessage({
                        data: {
                            action: "reloadHome",
                        },
                    });
                },100)
            // #endif

App端:

webview通过@message接收消息

<web-view :src="walletUrl"  @message="onMessage" ></web-view>  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值