ミニプログラム:ウェブビューを共有する方法

バックグラウンド

ミニプログラムの共有はミニプログラムからのみトリガーでき、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
   }
 }

おすすめ

転載: blog.csdn.net/weixin_43972437/article/details/113448942