小程序web-view wx.miniProgram.postMessage 坑记录

  web-view吧,其实微信官方应该是非常不支持在小程序上嵌套web的,它希望你直接用小程序上的代码,而放弃web的实现,当然,也是为了防止用小程序去嵌套别的广告页面。所以官方对web-view的操作是,它永远是界面的最上层及z-index最大,而且web-view只能全屏显示。从而,就可以在web-view之上嵌套任何控件,而官方提供web-view与网页之间的交互,只有src和bindmessage,同时还有一些跳转及在js中调用相关代码(wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo)让开发者可以从web-view的页面跳转到别的页面,还有一个获取当前环境的方法wx.miniProgram.getEnv(其实这个方法也只能用在小程序内,小程序外是无法执行的,所以其实也没有什么判断对错的操做)。

  可能更多人会把注意力放到bindmessage和上,按照文档上写的,Js可以通过wx.miniProgram.postMessage的方法,向小程序传递数据,小程序通过 <web-view src="{{report_src}}" bindmessage="bindGetMsg"></web-view> 然后通过bindGetMsg方法获取到到相关参数,但这是一个无底之坑,因为bindGetMsg这个方法只能在生命周期处于不可操着的状态也就是在onHide这个状态才会被调用,也就是这个不是实时监听的。做到这里就有点尴尬了,这样所谓的“分享”操作也无法实现了,但项目需要这样的操作怎么办,我的解决办法,也就跟以前微信打开网页的操作一样,在网页上提示点击右上角转发。这个也是做微信服务号得出的结果。

转发兼容IOS方法:

h5页面每次跳转页面 时 

wx.miniProgram.postMessage()

小程序分享

1.wxml:

<web-view src="{{src}}" bindmessage="bindmessage"></web-view>

2.js:

bindmessage:function(e){
    console.log("获取推送消息");
    console.log(e.detail)
    this.setData({
        history:e.detail.data[e.detail.data.length-1]
   })
},

onShareAppMessage: function (res) {
    return {
        title: '标题',
        path: this.data.history
    }
}

参考:https://blog.csdn.net/huangpb123/article/details/80588693