前端的工作

1. 步驟一：綁定域名
   先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”纤怒。

2. 步驟二：引入JS文件
   http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）效拭。

3. 步驟三：通過(guò)config接口注入權(quán)限驗(yàn)證配置
   所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次示姿，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用）

• timestamp，nonceStr留夜，signature這三個(gè)值必須后端返回來(lái)

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

4. 步驟四：通過(guò)ready接口處理成功驗(yàn)證

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

5. 步驟五：通過(guò)error接口處理失敗驗(yàn)證

wx.error(function(res){
  // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)狱从，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看叠纹，也可以在返回的res參數(shù)中查看季研，對(duì)于SPA可以在這里更新簽名。
});

后端的工作

1. 獲取access_token（有效期7200秒誉察，開(kāi)發(fā)者必須在自己的服務(wù)全局緩存access_token）：此處需要用到appId和appsecret与涡。

2. 用第一步拿到的access_token 采用http GET方式請(qǐng)求獲得jsapi_ticket（有效期7200秒，開(kāi)發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

3. 生成JS-SDK權(quán)限驗(yàn)證的簽名：參與簽名的字段包括noncestr（隨機(jī)字符串）, 有效的jsapi_ticket, timestamp（時(shí)間戳）, url（當(dāng)前網(wǎng)頁(yè)的URL，不包含#及其后面部分）

4. 返回給前端timestamp驼卖，nonceStr氨肌，signature，前端需要傳appId酌畜，url給后端

5. 出于安全考慮怎囚，開(kāi)發(fā)者必須在服務(wù)器端實(shí)現(xiàn)簽名的邏輯。

最后的樣子

  const appId = 'xxx';
  const url = window.location.href.split('#')[0];
  getWxJssdkSignReq({ appId, url})
    .then((res) => {
      const config = res.result
      wx.config({
        debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)桥胞，若要查看傳入的參數(shù)恳守，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出贩虾，僅在pc端時(shí)才會(huì)打印催烘。
        appId: appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
        timestamp: config.timestamp, // 必填缎罢，生成簽名的時(shí)間戳
        nonceStr: config.nonceStr, // 必填伊群，生成簽名的隨機(jī)串
        signature: config.signature, // 必填，簽名屁使，見(jiàn)附錄1
        jsApiList: [
          'updateAppMessageShareData', 'updateTimelineShareData'
        ] // 必填在岂，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
      })

      wx.ready(() => {
        const shareConfig = shareInfo; // 自己定義的分享信息
        const title = shareConfig.title || '';
        const imgUrl = shareConfig.pic || '';
        const desc = shareConfig.content || '';
        const link = window.location.href;

        // 分享朋友
        wx.updateAppMessageShareData({
          title: title, // 分享標(biāo)題
          desc: desc, // 分享描述
          link: link, // 分享鏈接
          imgUrl: imgUrl, // 分享圖標(biāo)
          success: function () {
            // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
            console.log('分享朋友 success')
          }
        });

        // 分享朋友圈
        wx.updateTimelineShareData({
          title: title,
          link: link, // 分享鏈接
          imgUrl: imgUrl, // 分享圖標(biāo)
          success: function () {
            // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
            console.log('分享朋友圈 success')
          }
        });
      })

      wx.error((err) => {
        console.log('----wx error----: ', err)
      })
    })
    .catch(err => {
      console.log('----wxconfig catch err----: ', err)
    })

遇到的困難

1. config:require subscribe：由于測(cè)試環(huán)境用的測(cè)試公眾號(hào)蛮寂，所以需要先關(guān)注公眾號(hào)才行蔽午。

   
   
   image.png
2. config:invalid signature：簽名失敗，這個(gè)是很磨人而且經(jīng)常遇到的問(wèn)題
   解決流程：

• 確認(rèn)簽名算法正確酬蹋，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁(yè)面工具進(jìn)行校驗(yàn)及老。
• 確認(rèn)url是頁(yè)面完整的url(請(qǐng)?jiān)诋?dāng)前頁(yè)面alert(location.href.split('#')[0])確認(rèn))，包括'http(s)://'部分范抓，以及'?'后面的GET參數(shù)部分,但不包括'#'hash后面的部分骄恶。確保后端解析到用來(lái)簽名的url和前端發(fā)送的一致（此處很坑），如果是get方法請(qǐng)求的匕垫，根據(jù)需要進(jìn)行encodeURIComponent(location.href.split('#')[0])處理僧鲁，后端需要decode（因?yàn)閡rl中有&時(shí)會(huì)被瀏覽器截?cái)鄬?dǎo)致簽名不正確，如果是post請(qǐng)求也要注意后端是否把&轉(zhuǎn)義成&amp了）象泵。
• 確認(rèn) config 中的 appid 與用來(lái)獲取 jsapi_ticket 的 appid 一致寞秃。
• 檢查當(dāng)前appId對(duì)應(yīng)的“公眾號(hào)設(shè)置”的“功能設(shè)置”里是否填寫(xiě)“JS接口安全域名”。

• 確保一定緩存access_token和jsapi_ticket偶惠。
  官方的解決方案:

  
  
  image.png

3. 分享出去的圖片沒(méi)顯示
   項(xiàng)目中設(shè)置為封面的本地圖片較小春寿，在打包過(guò)程中被打包成了base64字符串，因此分享參數(shù)中拿到的也是base64字符串忽孽。所以在配置成imgUrl時(shí)绑改，在PC端可以正常顯示谢床，但是在手機(jī)端顯示的就有問(wèn)題。最后讓UI切了超過(guò)項(xiàng)目打包文件限制的圖片資源作為封面厘线，解決了這個(gè)問(wèn)題识腿。

參考文章

• 微信官方文檔
• 調(diào)試微信分享