本文基于工作使用學(xué)習(xí)，做的整理筆記
當(dāng)我們進(jìn)行微信分享時(shí)悦冀，分享出去的效果趋翻，我們最容易發(fā)現(xiàn)的是沒有圖，那我們就埋一個(gè)301 * 301的圖盒蟆。但是踏烙，我們又發(fā)現(xiàn)沒有描述，只有鏈接历等。這個(gè)該怎么解決呢讨惩。最終方法就是需要使用微信公眾平臺(tái)的JS-SDK來實(shí)現(xiàn)，調(diào)用分享接口寒屯。實(shí)現(xiàn)這個(gè)功能時(shí)遇到不少坑荐捻，走了不少彎路黍少，這里就整理記錄一下以便后面查閱。那么处面，來一起看看吧厂置。

前提條件：
本文后臺(tái)基于nodeJS，需要有一點(diǎn)這一方面基礎(chǔ)魂角。
（還需域名昵济，服務(wù)器，微信公眾號(hào)或測(cè)試號(hào)）

編碼環(huán)境：
系統(tǒng)：OS X EI Capitan
版本：10.12.5

微信JS-SDK.jpg

目錄
| - 0.題外話
| - 1.JS-SDK使用說明
| - 2.實(shí)例開發(fā)
??| - 1）獲取access_token
??| - 2）獲取jsapi_ticket
??| - 3）計(jì)算signature
??| - 4）前端調(diào)用
??| - 5）配置測(cè)試
| - 6）優(yōu)化請(qǐng)求
| - 3.常見問題
??| - 1）config錯(cuò)誤
??| - 2）signature錯(cuò)誤
??| - 3）url domain錯(cuò)誤
??| - 4）其他錯(cuò)誤
| - 4.附QQ分享
| - 5.結(jié)束

0.題外話

當(dāng)不使用JS-SDK野揪，我們?cè)撛趺磳?shí)現(xiàn)“分享”帶縮略圖呢访忿？之前有一個(gè)取巧的方法，如下：

• 標(biāo)題：取meta標(biāo)簽title的內(nèi)容囱挑。
• 縮略圖：取body內(nèi)第1張符合條件的圖片醉顽。
  圖片規(guī)格要求：尺寸必須大于300 * 300，放在<img src="" alt="">標(biāo)簽內(nèi)平挑。

所以游添，我們會(huì)埋一張301 * 301的圖片，比如：

  // ![](.../share.png)

在分享的時(shí)候會(huì)自動(dòng)獲取到這張圖片通熄，但實(shí)際并沒有顯示唆涝。（但有一定的概率失效，原因未仔細(xì)查找唇辨，因?yàn)闇?zhǔn)備使用JS-SDK）

1.JS-SDK使用說明

微信JS-SDK說明文檔傳送門：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

閱讀文檔廊酣，發(fā)現(xiàn)其實(shí)真對(duì)我們想要的分享功能，閱讀前3大點(diǎn)內(nèi)容就夠了赏枚，如下：

• 綁定域名亡驰，配置“JS接口安全域名”
• 引入JS文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

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

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: '',// 必填乳乌，簽名，見附錄1  
    jsApiList: [] // 必填市咆，需要使用的JS接口列表汉操，所有JS接口列表見附錄2
});

其中，最重要的就是signature簽名的生成蒙兰。附錄1告訴我們：
1）生成`signature`需要`jsapi_ticket`磷瘤，
2）生成`jsapi_ticket`需要`access_token`
3）還有7200秒過期等規(guī)則其弊，組裝規(guī)則（稍后再看）

• 通過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ù)中摔蓝。
});

• 通過error接口處理失敗驗(yàn)證

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

【用自己的話】解釋整個(gè)流程就是：

• 先有個(gè)公眾號(hào)猜谚，這樣就有appID和appSecret（在開發(fā)/基本配置分類下）
• 引入JS文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js，去使用微信JS-SDK
• 拿access_token赌渣，配置IP白名單才能調(diào)此接口魏铅，根據(jù)appID和appSecret進(jìn)行請(qǐng)求 (有效期7200秒，每次使用前檢查坚芜，過期重新獲壤婪肌）
• 拿jsapi_ticket，根據(jù)上一步的access_token進(jìn)行請(qǐng)求 (有效期7200秒鸿竖，每次使用前檢查沧竟，過期重新獲取）
• 計(jì)算signature缚忧，根據(jù)上一步的jsapi_ticket
  1）排序悟泵，參與簽名的字段：noncestr（隨機(jī)字符串），有效的jsapi_ticket搔谴，timestamp（時(shí)間戳）魁袜，url（不帶#后面部分部分），字典序從小到大排序敦第，
  2）拼接峰弹，使用URL鍵值對(duì)的格式拼接字符串string1，參數(shù)名必須均為小寫字符
  3）加密芜果，對(duì)string1作sha1加密鞠呈，字段名和字段值都采用原始值，不進(jìn)行URL 轉(zhuǎn)義
  注意：計(jì)算簽名必須在服務(wù)端完成簽名右钾，返回前端蚁吝。
• 添加JS接口安全域名（在公眾號(hào)后臺(tái)的設(shè)置/公眾號(hào)設(shè)置/功能設(shè)置中添加）旱爆，這里需要實(shí)現(xiàn)MP_verify_AwmmQFM5B0vHg035.txt文件檢查功能
• 部署測(cè)試，注意事項(xiàng)：80端口窘茁，域名已備案

2.實(shí)例開發(fā)

官方DEMO頁面和例子傳送門：附錄6怀伦。

如果你有可以使用的公眾號(hào)，那么直接用就好了山林。如果沒有房待，就需要使用測(cè)試公眾號(hào)。在在公眾號(hào)后臺(tái)的開發(fā)/開發(fā)者工具/公眾平臺(tái)測(cè)試帳號(hào)驼抹，登陸進(jìn)入就可以使用測(cè)試公眾號(hào)了桑孩。

我這里的信息如下：
appID：wx5ee658102855e872
appSecret：af7207aaa4bec3b9b1ed941564a4580f

1）獲取access_token

// 這里應(yīng)該判斷是否存在簽名，是否已過期
//（稍后添加）
// ...
// 公眾號(hào)字段
var appID = "wxa2c416de84300ee5";
var appSecret = "bba57000821ac67cbcee3a573db85498";
// 獲取access_token
var tokenUrl = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+appID+'&secret='+appSecret;
request(tokenUrl, function (error, response, body) {
  if (response.statusCode === 200) {
    body = JSON.parse(body); 
    // 這里我緩存到了global
    global.wxshare.access_token = body.access_token;
    // 獲取jsapi_ticket
    // ...
}

2）獲取jsapi_ticket

// 獲取jsapi_ticket
var ticketUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + body.access_token + '&type=jsapi';
request(ticket, function (err, response, content) {
  content = JSON.parse(content);
  if (content.errcode == 0) {
    // 這里我緩存到了global
    global.wxshare.jsapi_ticket = content.ticket;
    // 計(jì)算signature
    // ...
  }
})

3）計(jì)算signature

// 計(jì)算signature
// 先拿一個(gè)當(dāng)前時(shí)間戳框冀，這里我緩存到了global
global.wxshare.deadline = new Date().getTime();
// 通過調(diào)用計(jì)算簽名方法
var signatureStr = sign(content.ticket, req.body.url);
// 當(dāng)前時(shí)間戳
signatureStr.deadline = new Date().getTime();
// 緩存簽名
if (signindex && signindex !== 0) {
  global.wxshare.signs(signindex, 1, signatureStr);
} else {
  global.wxshare.signs.push(signatureStr);
}
// 返回給頁面
res.status(200).json(signatureStr);

// 隨機(jī)字符串
var createNonceStr = function () {
  return Math.random().toString(36).substr(2, 15);
};

// 時(shí)間戳
var createTimestamp = function () {
  return parseInt(new Date().getTime() / 1000) + '';
};

// 排序拼接
var raw = function (args) {
  var keys = Object.keys(args);
  keys = keys.sort()
  var newArgs = {};
  keys.forEach(function (key) {
    newArgs[key.toLowerCase()] = args[key];
  });
  var string = '';
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k];
  }
  string = string.substr(1);
  return string;
};

/**
* @synopsis 簽名算法 
*
* @param jsapi_ticket 用于簽名的 jsapi_ticket
* @param url 用于簽名的 url 流椒，注意必須動(dòng)態(tài)獲取，不能 hardcode
*
* @returns
*/
var sign = function (jsapi_ticket, url) {
  var ret = {
    jsapi_ticket: jsapi_ticket,
    nonceStr: createNonceStr(),
    timestamp: createTimestamp(),
    url: url
  };
  var string = raw(ret);
      jsSHA = require('jssha');
      shaObj = new jsSHA(string, 'TEXT');
  ret.signature = shaObj.getHash('SHA-1', 'HEX');

  return ret;
};
module.exports = sign;

//檢查頁面鏈接對(duì)應(yīng)的簽名是否可用
var signtag = false;
var signindex;
// 檢查簽名
global.wxshare.signs.forEach(function (item, index) {
  if (item.url === req.body.url) {
    signindex = index;
    if (item.deadline && new Date().getTime() - item.deadline < 6000000) {
      signtag = true;
    }
  }
});
//當(dāng)簽名不可用時(shí)明也，檢測(cè)jsapi_ticket是否可用宣虾，來決定是直接請(qǐng)求簽名還是先請(qǐng)求jsapi_ticket再請(qǐng)求簽名
if (!signtag) {
   // 請(qǐng)求操作
   // 計(jì)算簽名操作
   // ...
}

// 相應(yīng)路由
app.post('/signture', Base.wxconfig);
// 對(duì)應(yīng)方法
exports.wxconfig = function(req,res,next) {
   // ...
}

4）前端調(diào)用

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  // 請(qǐng)求簽名
  $.ajax({
    url: "/signture",
    type: 'post',
    data: { url: location.href.split('#')[0] },
    success:function(res){
      wx.config({
        debug: false,
        appId: 'wxa2c416de84300ee5',
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature,
        jsApiList: [
          'checkJsApi',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ'
        ]
      }); 
      wx.ready(function () {
        var shareData = {
          title: document.title,
          desc: getDesc(),
          link: res.url,
          imgUrl: getImage()
        };
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareQQ(shareData);
      });
      wx.error(function (res) {
        alert(res.errMsg);  // 正式環(huán)境記得關(guān)閉啊Ｎ率０财瘛！帆吻！
      });
    }
  });
  // 獲取描述字段方法
  function getDesc() {
    var meta = document.getElementsByTagName("meta");
    for (var i=0;i<meta.length;i++){
      if(typeof meta[i].name!="undefined"&&meta[i].name.toLowerCase()=="description"){
        return meta[i].content;
      }
    }
  };
  // 獲取圖片
  function getImage() {
    return 'http://'+location.host+'/images/logo.png';
  };
</script>

5）配置測(cè)試

添加JS接口安全域名（在公眾號(hào)后臺(tái)的設(shè)置/公眾號(hào)設(shè)置/功能設(shè)置中添加）域那，這里需要實(shí)現(xiàn)MP_verify_AwmmQFM5B0vHg035.txt文件檢查功能。

因?yàn)檫@個(gè)MP_verify_AwmmQFM5B0vHg035.txt文件里猜煮，只有一行字符串次员，直接返回即可

// 相應(yīng)路由
app.get('/MP_verify_CwPkZ2phenWhKlmR.txt', Base.checkWx);

// 對(duì)應(yīng)方法
exports.checkWx = function(req, res) {
  res.send('CwPkZ2phenWhKlmR');
}

6）優(yōu)化請(qǐng)求（檢查微信環(huán)境，減少不必要的微信接口調(diào)用次數(shù)）

<script>
  // 檢查微信環(huán)境
  function isWeiXin() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
    } else {
      return false;
    }
  };
  // 如果為真王带，則請(qǐng)求
  if(isWeiXin()){
      // 去獲取signature簽名
      ....
  });
</script>

3.常見問題

官方常見錯(cuò)誤查閱傳送門：附錄5淑蔚。

因?yàn)樵趯?shí)際開發(fā)的時(shí)候，真的是不端的遇到問題愕撰，不斷的去找答案刹衫。錯(cuò)誤出現(xiàn)的話，是有一定順序的搞挣，這對(duì)我們找原因有一定的幫助带迟。首先是config fail，若沒錯(cuò)的話囱桨，才有可能出現(xiàn)invalid signature仓犬，若沒錯(cuò)的話，才有可能出現(xiàn)``` invalid url domain``舍肠。最后就完全沒錯(cuò)了搀继，說明已成功窘面。

1）config 錯(cuò)誤

如果config fail，一般說明存在配置字段遺漏叽躯，或者配置字段的值為空（null财边，undefined，""）点骑。

2）signature錯(cuò)誤

如果報(bào)invalid signature錯(cuò)誤制圈，一般說明簽名沒有生成正確，再核對(duì)一遍規(guī)則畔况。可以使用微信 JS 接口簽名校驗(yàn)工具：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign慧库，對(duì)比代碼生成出來的是否和檢驗(yàn)工具生成的一樣跷跪。比如時(shí)間戳長度，順序齐板，拼接遺漏吵瞻。

3）url domain錯(cuò)誤

如果報(bào)invalid url domain錯(cuò)誤，說明配置工作已經(jīng)OK啦甘磨。出現(xiàn)這個(gè)的原因是域名沒有添加到JS接口安全域名下橡羞，或者沒有使用80、443端口济舆。

4）其他錯(cuò)誤

如permission denied卿泽，接口無權(quán)限等等，查閱文檔吧滋觉。

4.附QQ分享

手機(jī)QQ對(duì)外分享組件接口文檔傳送門：http://open.mobile.qq.com/api/component/share

閱讀文檔后發(fā)現(xiàn)比較簡(jiǎn)單签夭，引用一個(gè)JS文件，然后幾行配置代碼椎侠。但注意一下：文檔頁面舉例代碼含有“微信配置”第租，請(qǐng)勿重復(fù)配置WXconfig。

// 引入JS腳本
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script>
<script type="text/javascript">
  // 配置
  setShareInfo({
      title:  document.title, // 獲取頁面的標(biāo)題
      summary: getDesc, //獲取頁面的desc
      pic: 'http://xxx/xx/pic.png', // 獲取圖片(這里自己寫吧我纪，整站固定圖片or頁面第一張或指定圖片)
      url: location.href // 獲取地址
  });

  // 獲取描述字段方法
  function getDesc() {
      var meta = document.getElementsByTagName("meta");
      for (var i=0;i<meta.length;i++){
           if(typeof meta[i].name!="undefined"&&meta[i].name.toLowerCase()=="description"){
                return meta[i].content;
           }
      }
  };
</script>

5.結(jié)束

本文的主要內(nèi)容就是關(guān)于“微信JS-SDK的接口調(diào)用”慎宾，那這里舉例就是分享接口，其他接口類推吧浅悉，用到什么去看文檔趟据。覺得難就不去看的話，就相當(dāng)于棄坑了术健；可是仔細(xì)去看一下文檔之宿，先理清思路步驟，在每個(gè)步驟去完成苛坚，串聯(lián)起來也就實(shí)現(xiàn)了比被∩眩回頭一看，發(fā)現(xiàn)并不難等缀。文章的最后附了一個(gè)QQ的分享配置方法枷莉，需要可以嘗試。

最后針對(duì)不同瀏覽器尺迂，這個(gè)就說不準(zhǔn)了笤妙。有的瀏覽器自己就可以幫你完成圖片和描述的完美呈現(xiàn)，有的就只能是URL地址（沒有描述）噪裕。真要去看這個(gè)蹲盘，可能要進(jìn)行反復(fù)測(cè)試找規(guī)律，想想都心累了膳音。我們比較常見的也就是“微信”召衔，“QQ”，也許還有“企業(yè)微信”祭陷。補(bǔ)充一句苍凛，“企業(yè)微信”不會(huì)使用JS-SDK的，但是它可以自動(dòng)幫你獲取到標(biāo)題兵志、描述醇蝴，但圖片地址就和頁面圖有關(guān)了。需要可以自己留意下想罕。

到這里悠栓，就先結(jié)束了。

學(xué)習(xí)是一條漫漫長路按价，每天不求一大步闸迷，進(jìn)步一點(diǎn)點(diǎn)就是好的。