探秘小程序(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\'
}
}
})
下面重点来了,踩过的坑了解一下:
①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回调方法中可能会拿不到值哦~~~~