微信小程序web-view分享页面

屏幕快照 2018-11-06 下午8.17.09.png

截止现在webview本身是不支持分享页面的,不过可以有一个变通的方法。即:通过小程序自身分享带参数。

wx.miniProgram.navigateTo({url: '/path/to/page?id=123'})

上述是跳转页面带参,是一个比较简便的方法。


还有一个:bindmessage 这个是小程序里的webview主动向小程序本身发送消息。但是你发送完毕后,小程序是不会响应的,也许它已经获取到了,只不过不做处理。做处理的时机是在你程序页面后退,组件销毁,分享的时候。注意这里提到了分享。所以完全可以在分享的时候拿到你要传的值,比如说你要传id=123。当你发送完毕后,你可以点击小程序右上角的三个点,然后选择分享就可以获取。不过要事先复写小程序的分享接口。百度一大堆,可自行查阅。


官网传值:

wx.miniProgram.postMessage({ data: 'foo' }) 
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

一般使用第二种,因为这个data必须是一个对象。网上也有人批判文档不严谨,因为第一个很多人都没有实现。我也就没做尝试了。直接用的第二种。在这里注意一下,如果你的html本身带有模板标签,那么你可以在{}括号内加几个空格。因为好多模板标签都不会去渲染你带空格的{}。所以官网给的例子里data前面是有空格的。


坑:

1、data你定义的是对象,但是你获取到的实际是数组。所以你data.foo是拿不到值得。而data[0].foo就可以。

2、data这个对象,也可以说是获取到的数组。当你postMessage多次后,你会发现这个数组是不会清空的。老数据依然存在。


分享完毕后你可以通过onLoad里拿值


onLoad: function(options) { 
// Do some initialize when page load. 
    console.log(options.id); //打印id
},


坑二解决:

 bindmessage: function(e) { //这个e是一个静态变量 会将每一次的分享都存储下来 
    var that = this;  
    console.log(e.detail.data[e.detail.data.length - 1]);
}



微信小程序web-view分享页面


本站如无特别说明即为原创,转而告知:(https://iwonmo.com/archives/1425.html)

标签: 微信小程序webview, webview分享

已有 2 条评论

  1. 梧桐 梧桐 回复 2018-11-20 10:15

    第二条老数据仍然存在这个问题解决了么

    1. 王And木 王And木 回复 2018-11-20 11:25

      你打印一下传递过来的数据结构。我这里是获取的数组最后一个索引就可以得到新的值。

添加新评论