微信小程式h5頁面分享設定

前言(廢話): 最近開發新項目，因為公司希望能在開發完h5後順便吧微信小程式也上了，但是人力有限，隻能做到h5，開發小程式壓根做不到，隻能投機了， 我真是個機靈鬼。。。

然後我就看API，咦，賊拉簡單，一。使用web-view标簽嵌入網頁，背景配置合法域名，二，使用postmessage通信，然後儲存位址就好了。。。代碼如下：

<template>
  <div class="index">
    <web-view :src="path" @message="message"></web-view>
  </div>
</template>

<script>
import { url } from '@/config.js' // 網站url
export default {
  name: 'index',
  data() {
    return {
      
      path: url ,
      title: '這個人很帥',
      shareData: null, // 儲存分享的資料
      url,
    }
  },
  methods: {
    message (e) { // 監聽message事件
      let { data } = e.mp.detail
      console.log('message', data)
      this.shareData = JSON.parse(data.pop())
    }
  },
  // 調用分享的時候出發
  onShareAppMessage(options) {
    let { path, title, shareData, imageUrl } = this
    let params = {
      title
    }
    if (shareData) {
      title = shareData.title
      path = shareData.path
      imageUrl = shareData.imageUrl
    }

    return {
      title,
      path: `pages/index/main?path=${path}`,
      imageUrl,
      success: function (res) {
          // 轉發成功
        wx.showToast({
          title: "轉發成功",
          icon: 'success',
          duration: 2000
        })
      },
      fail: function (res) {
          // 轉發失敗
      }
    }
  },
  onLoad(options) {
    // 這裡主要是當使用者打開界面的時候，需要解析是否跳轉到指定頁面
    console.log('h5 load', options, this.url)
    if (options.path) {
      this.path = `${this.url}${options.path}`
      console.log('options', options)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.index{}
</style>

           

h5也頁面代碼

/**
 * @desc 設定微信小程式分享
 */
let miniProgramShareInfo = (params = {}) => {
  
  if (window.__wxjs_environment === 'miniprogram') {
    let path = window.location.href
    let title = window.document.title
    let sharInfo = {
      imageUrl: '',
      title,
      path,
      ...params
    }
    console.log('sharInfo', sharInfo)
    // 判斷，如果是在小程式内部就發送一個msg給界面
    wx.miniProgram.postMessage({ data: JSON.stringify(sharInfo)})
    
    // 據說能觸發事件，雖然我沒測試出來，先放着
    wx.miniProgram.navigateBack()

  }
}

           

我以為上邊這麼寫就好了，結果發現是我太年輕，發現分享後打不開界面。。。

然後進入debugger模式。開始尋找問題。。。

第一步: h5頁面列印位址，對的，參數也ok，

第二步：小程式界面解析參數，也是對的。

第三部：重新調用，結果還是失敗，然後我進入了死循環，一直各種嘗試，最後的最後，發現居然需要我先用一個完整的位址，然後再加上path才可以。。

總結

通過上邊的調試，發現文檔隻有參考價值，沒有權威，部落格。論文都沒有，我這裡主要做個筆記，友善後期排查，

關于調試，使用vsconsole，然後就是當我們使用網頁的時候，沒法查詢入口參數，這裡需要在微信開發者工具右鍵，開發工具的左上角就會出現一個調試按鈕，打開會有一個調試面闆，友善看參數。分享的時候隻能通過手機，這個時候就會無法檢視參數，真機調試，重新進入小程式會斷開連結。。。最後的最後，說一句，珍愛生命，原理微信生态圈