如果你沒有微信公眾號(hào)，那文章就不需要看了。此文介紹的是微信新版本的分享功能，2015年1月，微信已經(jīng)拋棄了舊版本的分享。

微信的自定義分享功能，是病毒式傳播的一把利劍。

demo

demo 請(qǐng)?jiān)谖⑿胖写蜷_
demo2 請(qǐng)?jiān)谖⑿胖写蜷_

分享接口應(yīng)用，最常見的莫過于公眾號(hào)文章分享。通過分享按鈕，用戶可以將自己喜歡的文章分享給微信好友，也可分享到微信朋友圈。
可以在用戶分享時(shí)，為其設(shè)置個(gè)性化的分享圖片、標(biāo)題、描述等，從而使分享的內(nèi)容更生動(dòng)有趣，以獲得更好的傳播效果。

有時(shí)候，你可能只需要做一個(gè)H5頁(yè)面，沒有相關(guān)的后臺(tái)。但是微信的簽名功能，又必須使用。所以，獨(dú)立的后臺(tái)是很有必要的，這個(gè)后臺(tái)，能為任意公眾號(hào)生成簽名信息，微信的簽名只有2個(gè)小時(shí)，所有緩存簽名信息也是必須要實(shí)現(xiàn)的。

簽名 signature

然而在使用這些牛逼的功能之前，有一座大山困在了開發(fā)者前面--signature。

分享的 web 頁(yè)面需要先配置好微信的 js 才能正常使用分享等的功能。且看代碼，

wx.config({
    appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: '', // 必填，生成簽名的隨機(jī)串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

參數(shù) timestamp、nonceStr、signature ，都由后臺(tái)傳遞過來。不能硬編碼到頁(yè)面，因?yàn)?signature 的有效期為 2個(gè)小時(shí)。所以一個(gè)再簡(jiǎn)單的頁(yè)面，都需要使用一個(gè)后臺(tái)前面生成來支持。

再看 signature 的生成方法，

1. 配置微信公眾號(hào)
2. 獲取access_token
3. 獲取jsapi_ticket
4. 簽名算法
   復(fù)雜度可以嚇尿你，算法參考微信JS-SDK官網(wǎng)。簡(jiǎn)單點(diǎn)描述
   把 noncestr、jsapi_ticket、url 等參數(shù)連接 進(jìn)行 sha1 加密。微信也給出了部分語言的實(shí)現(xiàn)源碼) .

完整的實(shí)現(xiàn)

然后，生成這些東西都簡(jiǎn)單，可怎么和頁(yè)面整合呢。 微信組件需要在頁(yè)面加載后，初始化 wx的配置。

1. 引入微信 JS

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

2. 獲取簽名等參數(shù)

var sign;
  function jsonpCallback(data) {
    sign = data.sign;
    wx.config({
      debug: false,
      appId: 'wxd98888751036c960',
      timestamp: sign.timestamp,
      nonceStr: sign.nonceStr,
      signature: sign.signature,
      jsApiList: [
        // 所有要調(diào)用的 API 都要加到這個(gè)列表中
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ'
      ]
    });
  }
  // 根據(jù)當(dāng)前頁(yè)面路徑動(dòng)態(tài)獲取token。 類似 url?timeline=user
  var str = "http://test.weixin.bigertech.com/api/sign?appId=wxd98888751036c960&callback=jsonpCallback&url="
  var href = encodeURIComponent(window.location.href);
  var script_elem = document.createElement("script");
  script_elem.src = str + href;
  document.body.appendChild(script_elem);

使用 JSONP的方式，傳遞參數(shù) appid、url。因?yàn)橐粋€(gè)appid 可能對(duì)應(yīng)多個(gè)url，我有多個(gè)活動(dòng)頁(yè)面都需要使用到微信的分享。
因?yàn)閖s都是從上往下執(zhí)行的，所以再jsonp回調(diào)之后，sign 被初始化了。sign中包含著簽名、時(shí)間戳等信息。

需要注意的地方

url 是變化的。 頁(yè)面分享到朋友圈后，微信會(huì)自動(dòng)給鏈接加上

原鏈接 http://weixin.res.meizu.com/mx5story/index.html ，
分享到朋友圈后 http://weixin.res.meizu.com/mx5story/index.html?from=timeline&isappinstalled=0。
分享給群組 http://weixin.res.meizu.com/mx5story/index.html?scene=4&from=groupmessage&isappinstalled=0

不同的url 需要再次申請(qǐng)一個(gè)簽名

<script type="text/javascript">
  wx.config({
    debug: true,
    appId: 'wxd98888751036c960',
    timestamp: sign.timestamp,
    nonceStr: sign.nonceStr,
    signature: sign.signature,
    jsApiList: [
      // 所有要調(diào)用的 API 都要加到這個(gè)列表中
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ'
    ]
  });
</script>

后端

微信也給出了實(shí)現(xiàn)邏輯，后端唯一要做的，就是http請(qǐng)求的實(shí)現(xiàn)，和簽名信息的緩存。說了這么多，直接上源碼吧。
微信簽名--源碼實(shí)現(xiàn)

1. clone 源碼
2. 安裝nodejs環(huán)境
3. npm install
4. 在 config/weixin.js 中配置自己的應(yīng)用，這里需要配置自己的微信公眾號(hào)，appid 和secret key。
5. node app.js ok 已經(jīng)運(yùn)行了
6. 實(shí)際上，一套這種系統(tǒng)，能為無數(shù)的 微信公眾號(hào)提供簽名信息服務(wù)，但是前提是你得把 secret key 給我，但是這種做法太不安全，不建議你這做。

完整的源碼

微信簽名--源碼實(shí)現(xiàn)
html 5 源碼例子

前端頁(yè)面只能在公眾號(hào)信任的域名下面運(yùn)行，所以 html 5 源碼例子 在你的服務(wù)器應(yīng)該是不能運(yùn)行 的。

附件：
微信朋友圈API分享代碼自定義圖標(biāo)和分享鏈接。

微信JS-SDK 官方文檔