Vue項(xiàng)目-開啟 “ 微信分享踩坑” 之旅

作者：前端小賈 2022-09-17 23:46:47

現(xiàn)在把本次開發(fā)過程中遇到的問題以及如何解決的，做個記錄。希望對前端小伙伴有所幫助。

剛?cè)腴T前端的時候?qū)戇^很多的微信H5頁面，時隔多年感覺應(yīng)該是手到擒來，不曾想竟很是費(fèi)了一些功夫。現(xiàn)在把本次開發(fā)過程中遇到的問題以及如何解決的，做個記錄。希望對前端小伙伴有所幫助。

一、微信分享文檔及配置（基礎(chǔ)）

1、微信分享官網(wǎng)文檔

重要說明：分享接口：

請注意，不要有誘導(dǎo)分享等違規(guī)行為，對于誘導(dǎo)分享行為將永久回收公眾號接口權(quán)限，詳細(xì)規(guī)則請查看：朋友圈管理常見問題。

請注意，原有的 wx.onMenuShareTimeline（分享到朋友圈）、wx.onMenuShareAppMessage（分享給朋友）、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即將廢棄。請盡快遷移使用客戶端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData（分享到朋友）、wx.updateTimelineShareData（分享到朋友圈）接口。

微信官網(wǎng)文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。

2、appid對應(yīng)的公眾號是否有分享接口權(quán)限

接口狀態(tài)為已獲得，表示有權(quán)限。如下圖（重要）。

3、設(shè)置白名單和綁定域名

（1）分享的服務(wù)器外網(wǎng)ip地址，需要添加到白名單中，如下圖：

（2）綁定域名先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。

二、JSSDK使用步驟（進(jìn)階）

正常流程按照官方文檔的步驟。

1、綁定域名

先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。

2、引入 JS 文件

在需要調(diào)用 JS 接口的頁面引入如下 JS 文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載。

3、通過 config 接口注入權(quán)限驗(yàn)證配置

所有需要使用 JS-SDK 的頁面必須先注入配置信息，否則將無法調(diào)用（同一個 url 僅需調(diào)用一次，對于變化 url 的SPA的web app可在每次 url 變化時進(jìn)行調(diào)用,目前 Android 微信客戶端不支持 pushState 的H5新特性，所以使用 pushState 來實(shí)現(xiàn)web app的頁面會導(dǎo)致簽名失敗，此問題會在Android6.2中修復(fù)）。

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有 api 的返回值會在客戶端 alert 出來，若要查看傳入的參數(shù)，可以在 pc 端打開，參數(shù)信息會通過 log 打出，僅在 pc 端時才會打印。
  appId: '', // 必填，公眾號的唯一標(biāo)識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

4、通過 ready 接口處理成功驗(yàn)證

wx.ready(function(){
  // config信息驗(yàn)證后會執(zhí)行 ready 方法，所有接口調(diào)用都必須在 config 接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在 ready 函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在 ready 函數(shù)中。
});

三、Vue分享好友和朋友圈（實(shí)踐）

項(xiàng)目場景：一個h5界面要求點(diǎn)擊右上角三個點(diǎn)后點(diǎn)擊微信好友分享帶標(biāo)題和圖片給好友。vue項(xiàng)目中，分享攜帶頭部標(biāo)題、簡介和縮略圖等信息。

操作流程

1、下載微信的 weixin-js-sdk

npm install weixin-js-sdk --save

2、在需要分享的頁面引入

import wx from 'weixin-js-sdk'; // 引入wxjs
import { shares } from '@/api/index'; // 分享的接口  傳給后端一個地址(與域名一致)

3、在methods寫調(diào)用的方法

// vue調(diào)用微信的自定義分享
    getShareInfo() {
       this.save = {
          url: location.href.split('#')[0] // 只需要傳當(dāng)前頁面地址
        };
      shares(this.save).then(res => {
        const config = res.data;
        wx.config({
          appId: config.appId,  // appID 公眾號的唯一標(biāo)識
          timestamp: config.timestamp, // 生成簽名的時間戳
          nonceStr: config.nonceStr, //  生成簽名的隨機(jī)串
          signature: config.signature, // 生成的簽名
          jsApiList: [
            'updateAppMessageShareData', // 分享到朋友
            'updateTimelineShareData', // 分享到朋友圈
          ]
        });

        wx.ready(() => {
          var shareData = {
            title: '王者歸來-王者突破特訓(xùn)營',
            desc: '幫助青銅早日登上王者之路',
            link: https://www.baidu.com/, // 分享后的地址
            imgUrl:
              '分享出去的圖片地址'
          };
          //點(diǎn)擊要去分享
          wx.updateAppMessageShareData(shareData);
          wx.updateTimelineShareData(shareData);
        });
      });
    }

4、在 mounted 中調(diào)用分享的方法

mounted() {
    this.getShareInfo(); // 調(diào)用分享的事件
  },

5、判斷微信瀏覽器打開

分享的時候要去判斷是否是微信瀏覽器打開，如果不是要提示不能分享。

var broser = window.navigator.userAgent.toLowerCase();
  //通過正則表達(dá)式匹配broser 中是否含有MicroMessenger字符串
  if (broser.match(/MicroMessenger/i) == 'micromessenger') {
    console.log('微信瀏覽器');
    // this.weixin();
    this.showContent = true;
  } else {
    this.$toast.warn('請使用微信瀏覽器打開');
  }

重要說明：注意h5分享是使用微信瀏覽器右上角的三個點(diǎn)進(jìn)行分享的，在點(diǎn)擊右上角之前要先注入config/ready,官網(wǎng)已說明。自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容（1.4.0）*需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用。

wx.ready(function () {   //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
  wx.updateAppMessageShareData({ 
    title: '', // 分享標(biāo)題
    desc: '', // 分享描述
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號 JS 安全域名一致
    imgUrl: '', // 分享圖標(biāo)
    success: function () {
      // 設(shè)置成功
    }
  })
});

擴(kuò)展知識點(diǎn)：

//使用后端拿到的數(shù)據(jù)配置wxconfig
 wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
  appId: res.appId, // 必填，公眾號的唯一標(biāo)識，填自己的！
  timestamp: res.timestamp, // 必填，生成簽名的時間戳，剛才接口拿到的數(shù)據(jù)
  nonceStr: res.nonceStr, // 必填，生成簽名的隨機(jī)串
  signature: res.signature, // 必填，簽名，見附錄1
  jsApiList: [
   'onMenuShareTimeline',
   'onMenuShareAppMessage'
  ]
 });

wx.ready(function () { //如果wx.config配置正常，會自動走此處
    console.log('ready執(zhí)行完畢')
    //自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容
    wx.updateAppMessageShareData({
      title: option.shareTitle,//分享的標(biāo)題
      desc: option.shareDesc,//分享的描述信息
      link: option.shareUrl,//分享的url
      imgUrl: option.shareImg//分享的圖片
    });
    //自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分
    wx.updateTimelineShareData({
      title: option.shareTitle,
      desc: option.shareDesc,
      link: option.shareUrl,
      imgUrl: option.shareImg,
    });
 });

四、要點(diǎn)和踩坑日志（深度與廣度）?

1、H5 微信分享，點(diǎn)擊分享的時候無法調(diào)起微信分享？（自己寫的分享按鈕）

解決方案：H5不能調(diào)起微信分享，H5 需要引導(dǎo)用戶點(diǎn)擊右上角進(jìn)行分享。

2、測試號需要關(guān)注，才可以調(diào)用js接口？

解決方案：設(shè)置JS接口安全域后，通過關(guān)注該測試號，開發(fā)者即可在該域名下調(diào)用微信開放的JS接口，請閱讀微信JSSDK開發(fā)文檔。

3、wx.config初始化失敗

情況有很多種，主要如下：

（1）Java后臺前面的url與分享的url不一致，需要完全一致。例如后臺是http，分享地址是https。

（2）參數(shù)不對。

4、分享接口沒有權(quán)限

這錯誤有2種情況，1是參數(shù)不對；2是公眾號中分享接口的狀態(tài)為未獲得。

5、短鏈接造成系統(tǒng)不能正常使用微信分享

分析原因：因?yàn)樵诔跏蓟臅r候是進(jìn)來的時候是短鏈接，是通過script在開頭引入的，所以微信sdk已經(jīng)監(jiān)控到了，但是我們 wxsdk 配置里面的 link 是我們要分享的長鏈接，微信會認(rèn)為這是無效配置，所以微信分享不生效。

6、微信分享鏈接出現(xiàn)config:invalid signature錯誤的解決方法

分享時提示錯誤“{"errMsg":"config:invalid signature"}”一般出現(xiàn)這個錯誤多半是簽名獲取失敗，而造成簽名獲取失敗的原因各種各種，子欽在開發(fā)的時候也遇到過這種情況，搜索了不少網(wǎng)上教程，解決了自己的問題。invalid signature簽名錯誤。建議按如下順序檢查：

確認(rèn)簽名算法正確，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進(jìn)行校驗(yàn)。
確認(rèn) config 中nonceStr（js中駝峰標(biāo)準(zhǔn)大寫S）, timestamp與用以簽名中的對應(yīng) noncestr , timestamp一致。
確認(rèn) url 是頁面完整的url(請?jiān)诋?dāng)前頁面alert(location.href.split('#')[0])確認(rèn))，包括'http(s)://'部分，以及'？'后面的 GET 參數(shù)部分,但不包括'#'hash后面的部分。
確認(rèn) config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
確保一定緩存access_token和jsapi_ticket。
確保你獲取用來簽名的 url 是動態(tài)獲取的，動態(tài)頁面可參見實(shí)例代碼中 php 的實(shí)現(xiàn)方式。如果是 html 的靜態(tài)頁面在前端通過 ajax 將url傳到后臺簽名，前端需要用 js 獲取當(dāng)前頁面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因?yàn)轫撁嬉坏┓窒恚⑿趴蛻舳藭谀愕逆溄幽┪布尤肫渌鼌?shù)，如果不是動態(tài)獲取當(dāng)前鏈接，將導(dǎo)致分享后的頁面簽名失敗。

相關(guān)技術(shù)點(diǎn)：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。

查找：附錄5-常見錯誤及解決方法。

責(zé)任編輯：姜華來源：前端學(xué)苑