バックグラウンド
ミニプログラムの共有はミニプログラムからのみトリガーでき、Webビューのh5ページでミニプログラムの共有を直接トリガーすることはできません。
共有されるページはWebビュー内のページであり、Webビューはコンテナであるため、アプレットのページとして(Webビュー内のページレベルに関係なく)全体であるため、表示されるページジャンプはすべてInにあります。このコンテナ。
したがって、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.アプレット端末は、Webビューによって渡されたパラメータを処理します。(注:アプレットは特定の時間にのみトリガーされ、メッセージを受信します(アプレットはバックアップされ、コンポーネントは破棄され、共有されます)。)
<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
}
}