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

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

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

?

重要說明：分享接口：

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

請(qǐng)注意，原有的 wx.onMenuShareTimeline（分享到朋友圈）、wx.onMenuShareAppMessage（分享給朋友）、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即將廢棄。請(qǐng)盡快遷移使用客戶端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對(duì)應(yīng)的公眾號(hào)是否有分享接口權(quán)限

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

?

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

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

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

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

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

1、綁定域名

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

備注：登錄后可在“開發(fā)者中心”查看對(duì)應(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)上述資源不可訪問時(shí)，可改訪問：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)用（同一個(gè) url 僅需調(diào)用一次，對(duì)于變化 url 的SPA的web app可在每次 url 變化時(shí)進(jìn)行調(diào)用,目前 Android 微信客戶端不支持 pushState 的H5新特性，所以使用 pushState 來實(shí)現(xiàn)web app的頁面會(huì)導(dǎo)致簽名失敗，此問題會(huì)在Android6.2中修復(fù)）。

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

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

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

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

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

操作流程

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

npm install weixin-js-sdk --save

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

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

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 公眾號(hào)的唯一標(biāo)識(shí)
          timestamp: config.timestamp, // 生成簽名的時(shí)間戳
          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、判斷微信瀏覽器打開

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

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('請(qǐng)使用微信瀏覽器打開');
  }

重要說明：注意h5分享是使用微信瀏覽器右上角的三個(gè)點(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)前頁面對(duì)應(yīng)的公眾號(hào) JS 安全域名一致
    imgUrl: '', // 分享圖標(biāo)
    success: function () {
      // 設(shè)置成功
    }
  })
});

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

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

wx.ready(function () { //如果wx.config配置正常，會(huì)自動(dòng)走此處
    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)擊分享的時(shí)候無法調(diào)起微信分享？（自己寫的分享按鈕）

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

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

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

3、wx.config初始化失敗

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

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

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

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

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

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

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

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

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

1. 確認(rèn)簽名算法正確，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進(jìn)行校驗(yàn)。
2. 確認(rèn) config 中nonceStr（js中駝峰標(biāo)準(zhǔn)大寫S）, timestamp與用以簽名中的對(duì)應(yīng) noncestr , timestamp一致。
3. 確認(rèn) url 是頁面完整的url(請(qǐng)?jiān)诋?dāng)前頁面alert(location.href.split('#')[0])確認(rèn))，包括'http(s)://'部分，以及'？'后面的 GET 參數(shù)部分,但不包括'#'hash后面的部分。
4. 確認(rèn) config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
5. 確保一定緩存access_token和jsapi_ticket。
6. 確保你獲取用來簽名的 url 是動(dòng)態(tài)獲取的，動(dòng)態(tài)頁面可參見實(shí)例代碼中 php 的實(shí)現(xiàn)方式。如果是 html 的靜態(tài)頁面在前端通過 ajax 將url傳到后臺(tái)簽名，前端需要用 js 獲取當(dāng)前頁面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因?yàn)轫撁嬉坏┓窒恚⑿趴蛻舳藭?huì)在你的鏈接末尾加入其它參數(shù)，如果不是動(dòng)態(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-常見錯(cuò)誤及解決方法。