背景
小程序的分享只能从小程序触发,webview中的h5页面没法直接触发小程序分享。
由于要分享的页面是webview中的某个页面,而webview作为一个容器,它是一个整体(不管webview内部的页面层级)作为小程序的一个页面的,我们所看到的页面跳转都是在这个容器中进行的。
所以为了实现webview中的页面分享,需要先从嵌套在webview里的h5页面传递分享参数,并在小程序的webview页面中进行数据获取,把h5页面传递的数据作为小程序分享的参数。
步骤
1、h5通过postMessage给小程序发送需要分享的消息(以下是一篇专区文章的详情页面,拿到文章详情后,传递给小程序)
const ua = window.navigator.userAgent.toLowerCase()
if (ua.indexOf('micromessenger') > -1) {
// 判断是否是微信环境
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
// 小程序环境
const message = {
title: '......'
desc: '.....'
}
wx.miniProgram.postMessage({
data: {
message
}
})
} else {
// 非小程序环境下逻辑
// console.log('不在小程序中')
}
})
}
2、小程序端对webview传递的参数进行处理。(注意:小程序只会在特定时机(小程序后退、组件销毁、分享)触发并收到消息)
<web-view
src="{
{ url }}"
bindmessage="handleWebviewMessage"
bindload="handleWebviewLoad"
/>
handleWebviewMessage (e) {
//h5每次传递的值,都会存在e.$wx.detail.data,根据需要去处理相关值
const payloadFromWebview = e.$wx.detail.data[e.$wx.detail.data.length - 1]['message']
this.shareConfig = {
...this.shareConfig, ...payloadFromWebview }
}
3、小程序端调用分享方法
onShareAppMessage: function (options) {
const webViewUrl = options.webViewUrl
const orgCode = wx.getStorageSync('orgCode')
const wxId = wx.getStorageSync('wxId')
return {
title: this.$wepy.shareConfig.title,
path: '/pages/web-view/tab-web-view?url=' + encodeURIComponent(webViewUrl) + '&orgCode=' + orgCode + '&wxId=' + wxId
}
}