微信小程序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 lang="less">
.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，然後就是當我們使用網頁的時候，沒法查詢入口參數，這裏需要在微信開發者工具右鍵，開發工具的左上角就會出現一個調試按鈕，打開會有一個調試面板，方便看參數。分享的時候只能通過手機，這個時候就會無法查看參數，真機調試，重新進入小程序會斷開鏈接。。。最後的最後，說一句，珍愛生命，原理微信生態圈