柚子快报邀请码778899分享：前端 H5页面向小程序发消息

http://yzkb.51969.com/

1.通过postMessage来传递消息

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

注意：仅会在特定时机（后退、组件销毁、分享，复制链接）触发并收到消息

//H5页面

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

//小程序页面A

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页面

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

//小程序页面B 加载中......

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()接口

柚子快报邀请码778899分享：前端 H5页面向小程序发消息

http://yzkb.51969.com/

推荐链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。