探秘小程序(10):分享功能+webview

场景:

小程序页面用webview嵌入了h5页面,h5页面需要与小程序进行交互,h5页面内容不同,分享的链接也不一样

分享功能:

小程序的分享功能即用户点击小程序右上角,转发功能页面。可以指定分享卡片的标题,分享的图片,以及用户点击分享卡面的后跳转的地址demo如下所示:

Page({

   onShareAppMessage: function (res) {

     if (res.from === 'button') { // 来自页面内转发按钮

       console.log(res.target)

     } 

    return {

       title: '自定义转发标题', path: '/page/user?id=123'

扫描二维码关注公众号,回复: 1468516 查看本文章

     }

   }

})
下面重点来了,踩过的坑了解一下:
onShareAppMessage,方法必须包含return,并且return 有效,何时无效呢?如果将return包裹在setTimeout这样的异步函数中便无效。

②return中path,必须是小程序的页面路径

③path中如果包含了其他参数,而参数中又包含了url链接,需要进行encodeURIComponent/decodeURLComponent进行编码解码操作

④webview想小程序发送消息时,

  通过h5页面 通过jssdk的postmessage发送数据:wx.miniProgram.postMessage({ data: 'foo' }),必须有data!!!!!!!

  小程序通过bindmessage="XXX"进行获取数据:回调函数xxx中,通过e.detail.data拿到数据、

⑤:postmessage在分享、推出页面或者巴拉巴拉的场景下才会执行,那执行的顺序如何呢?猜的没错是postmessage先执行然后onshareAppMessage方法后执行。可是如果在postmessage中使用setData等异步方法进行赋值操作,share回调方法中可能会拿不到值哦~~~~



猜你喜欢

转载自www.cnblogs.com/codeww/p/9138559.html