微信H5分享外部鏈接，縮略圖不顯示

可關注微信公眾號酒酒酒酒查看原文：

前言：最近做了一款推廣茶的APP軟件，展廳、產品需要分享功能；從APP內分享到H5網頁；微信內打開H5網頁，點擊微信內右上角三個點，可再次分享；

注意：大多數情況下，點擊右上角三個點，再次分享后，縮略圖不顯示，需要做特殊處理。

廢話結束，正文開始，以下頁面是在H5頁面中執行。

前置條件：

1. 開發環境：windows

2. 開發框架：uni-app , H5+，nativeJS

3. 編輯器：HbuilderX 2.8.13

    4.兼容版本：安卓，IOS已作測試

正式進入開發：

1. 首先引入微信JS-SDK

1.1 在項目的跟目錄下執行npm代碼：npm install jweixin-module --save 

1.2 之后在main.js 里面導入JS-SDK文件,代碼如下

// main.js
import Vue from 'vue'
import App from './App'
// 導入微信js-sdk
import wx from "jweixin-module";
// 掛載到Vue原型上
Vue.prototype.$wx=wx;

2. 在需要進行再次分享的h5頁面做如下代碼處理；

在vue的data函數中給wx.config()一個初始化的配置項

// 在vue的data函數
data() {
  return {
    wxConfig:{
        debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
        appId: '', // 必填，企業號的唯一標識，此處填寫企業號corpid
        timestamp:'' , // 必填，生成簽名的時間戳
        nonceStr: '', // 必填，生成簽名的隨機串
        signature: '',// 必填，簽名，見附錄1
        // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
        jsApiList: [
          "updateAppMessageShareData",
          "updateTimelineShareData",
          "onMenuShareTimeline",
          "onMenuShareAppMessage"
        ] 
      }
  }
}

3. 像后端人員請求 wx.config 配置項，timestamp前端人員可自己獲取，也可以從后端返回

3.1 前端人員通過window.location.href獲取當前頁面路徑，傳遞給后端返回配置信息

// 獲取微信SDK配置信息（此方法在uni-app的onLoad里面調用）
getWxConfigInfo(){
  let that=this;
  // 獲取當前頁面路徑
  let url=window.location.href;
  // 發起請求，向后端人員wx.config配置項
  that.$http.post('Wx/getsignpackage', {url:url}, {
    'load': false
  }).then(function(response) {
    // console.log("獲取接口微信配置信息",response.data);
    let data=response.data;
    // 配置wxConfig配置項
    that.wxConfig["appId"]=data.appId;
    that.wxConfig["nonceStr"]=data.nonceStr;
    that.wxConfig["signature"]=data.signature;
    that.wxConfig["timestamp"]=data.timestamp;
    // 監聽微信分享
    that.wxShare();
  })
}

4. 處理H5網頁在微信內二次分享就，點擊右上角三個點，監聽分享到朋友圈/微信好友事件

// 監聽微信分享
wxShare(){
  let that=this;
  //that.$wx 必須執行過步驟一的操作
  let wx=that.$wx;
  // 獲取當前域名地址
  let href=window.location.href;
  // 配置簽名wx.config屬性
  wx.config(this.wxConfig);
  // 發生錯誤觸發
  wx.error(function(res){
      // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
  });
  // 接口校驗成功觸發
  wx.ready(function(){
    // 判斷當前客戶端版本是否支持指定JS接口
    wx.checkJsApi({
      // 需要檢測的JS接口列表
      jsApiList: [  
      "updateAppMessageShareData",
      "updateTimelineShareData",
      "onMenuShareTimeline",
      "onMenuShareAppMessage"
      ], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
      success: function(res) {
        // 以鍵值對的形式返回，可用的api值true，不可用為false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        // console.log("檢測接口是否可用=================",res);
      },
      fail(err){
        // console.log("檢測接口是否錯誤=================",err);
      }
    });
    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
    //需在用戶可能點擊分享按鈕前就先調用(自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容（1.4.0）)
    wx.updateTimelineShareData({ 
      title:"標題" , // 分享標題
      link: "", // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
      imgUrl: "", // 分享圖標,必須是https網絡路徑,不能大於20kb
      success: function () {
        // 設置成功
        // uni.showToast({
        //   title:"分享成功",
        //   icon:"none"
        // })
      }
    })
    // 自定義“分享給朋友”及“分享到QQ”按鈕的分享內容（1.4.0）
    wx.updateAppMessageShareData({
      title: "標題", // 分享標題
      desc: "分享描述" , // 分享描述
      link:href, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
      imgUrl: "", // 分享圖標，必須是https網絡路徑,不能大於20kb
      success: function () {
        // 設置成功
      }
    })
  });
}

注意：

微信分享文檔地址：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

1. 微信公眾號需要配置js安全域名白名單，ip白名單

2. 縮略圖必須是https網絡路徑，不能大於20kb，否則在安卓機h5分享的時候，縮略圖不顯示

3. 配置項 wx.config 里面的數據盡量從后端獲取；傳遞當前頁面的全路徑,包含頁面中的參數，傳給給后端人員，生成配置項；

例如：http://www.u.net/h5?id=1

4. 或者可以傳遞當前頁面的域名地址，域名地址末尾處加上"/"

例如：http://www.u.net/

筆者向后端傳遞的是注意事項第三點：當前頁面的全路徑，至於是注意事項第四點，未作測試，感興趣的可以嘗試一下。