美文网首页
小程序和h5之间的通讯及注意事项

小程序和h5之间的通讯及注意事项

作者: 站在大神的肩膀上看世界 | 来源:发表于2022-05-10 14:46 被阅读0次

    起因:在小程序中嵌入已有的h5页面,用于快速开发。但是h5和小程序中的事件通讯是需要解决的问题。参照官网后实践之后得出结论。

    • web-view 和小程序通信使用 getMessage接收消息 postMessage发送消息(类似iframe)
    小程序中
    <web-view  bindmessage='getMessage' src="{{webUrl}}"></web-view>
    getMessage(e) {
        console.log('getMessage');
        console.log(e);
    },
    
    h5中
    let postData = {
      url: window.location.href,
      title: '11111111',
      image: '1111111dfsdfsdfdfs',
      shareLink: this.shareLink,
      radShareTypeId: this.radShareTypeId,
      timeVal: this.timeVal,
      selectedTimestamp: this.selectedTimestamp
    };
    console.log('微信wx');
    console.log(wx);
    wx.miniProgram.postMessage({ data: JSON.stringify(postData) });
    
    • web-view 不能做支付功能
    • web-view ios不能屏蔽分享菜单
    • web-view 与小程序的通信只能在分享,小程序后退,页面销毁是触发
    • web-view 如果是个人版不支持此组件
    • web-view 分享可动态传参
    • 小程序刷新路径参数丢失

    相关文章

      网友评论

          本文标题:小程序和h5之间的通讯及注意事项

          本文链接:https://www.haomeiwen.com/subject/memlurtx.html