H5页面向小程序发消息

本文介绍了如何从H5页面向小程序发送消息,包括使用`postMessage`直接传递消息以及通过页面跳转并利用`navigateBack`间接通信的方法。在H5中调用`wx.miniProgram.postMessage`发送消息,小程序中通过`@message`事件接收。同时,文章还提到了一种绕过限制的策略,即通过创建临时页面B进行数据传递,但这种方法会有短暂显示B页面的副作用。
摘要由CSDN通过智能技术生成
1.通过postMessage来传递消息

在H5中需要发消息时,调用wx.miniProgram.postMessage方法发送消息,在webview中定义@message事件接收消息

注意:仅会在特定时机(后退、组件销毁、分享,复制链接)触发并收到消息

//H5页面
<button class="btn m-28"  @tap="postToWx1">我要发消息给小程序</button>

postToWx1(){
    //向小程序发送消息
    wx.miniProgram.postMessage({
        data:{
            key:'leeee'
        }
    })
},

//小程序页面A
<web-view :src="src" @message="getmessage"></web-view>

getmessage(e){
    //获取最新的一条消息
    const data = e.detail.data[e.detail.data.length - 1]
    console.log('getMsg',data);
    console.log('key:',data.key);
    this.$utils.alert('key:'+data.key)
},

3.2绕点远路,页面跳转

假设上述小程序页面为A,H5页面为a&#

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值