H5页面向小程序发消息_wx.miniprogram.postmessage

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，新增小程序页面B；

在H5页面a需要发消息时，调用wx.miniProgram.navigateTo方法控制小程序跳转到B；

进入页面B后，在onLoad中调用uni.navigateBack()返回上一页，即页面A

在页面B的onUnload中通过getCurrentPages获取页面栈，从而获取页面A的Vue实例，然后传递数据，调用页面A中的方法

弊端：会短暂出现一个B页面，尽管我们可以将B页面做成加载页面

//H5页面
<button class="btn m-28"  @tap="postToWx2">我要小程序返回上一页</button>

postToWx2(){
    //小程序跳转到页面B并携带参数
    wx.miniProgram.navigateTo({
        url:'/pages/test/testB?name=leeeeeee'
    })
}

//小程序页面B
<view>加载中......</view>

onLoad(options) {
    //获取参数
    this.message=options
    //返回页面A
    uni.navigateBack()
},
    
onUnload() {
    //获取页面栈
    const pages = getCurrentPages()
    //获取页面栈中的上一个页面，即页面A
    const prevPage = pages[pages.length-2]
    //获取页面A的vue实例并调用A中的方法
    if(prevPage.$vm.callback != undefined){
        prevPage.$vm.callback({
            message:this.message,
            method:'back',
        })
    }
},

//小程序页面A
callback({message,method}){
    console.log('callback',message);
    console.log('name:',message.name);
    //方法是back则返回上一页
    if(method === 'back'){
        let a = setTimeout(()=>{
            uni.navigateBack()
            clearTimeout(a)
        },200)
    }
}

当然，如果只是返回上一页的话，我们完全可以指直接在H5页面中调用wx.miniProgram.navigateBack()接口