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

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

demo

demo 請?jiān)谖⑿胖写蜷_
demo2 請?jiān)谖⑿胖写蜷_

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

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

簽名 signature

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

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

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

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

再看 signature 的生成方法，

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

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

然后，生成這些東西都簡單，可怎么和頁面整合呢愤诱。 微信組件需要在頁面加載后云头，初始化 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)前頁面路徑動(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 可能對應(yīng)多個(gè)url昏滴，我有多個(gè)活動(dòng)頁面都需要使用到微信的分享。
因?yàn)閖s都是從上往下執(zhí)行的对人，所以再jsonp回調(diào)之后谣殊，sign 被初始化了。sign中包含著簽名牺弄、時(shí)間戳等信息姻几。

需要注意的地方

url 是變化的。 頁面分享到朋友圈后势告，微信會(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 需要再次申請一個(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請求的實(shí)現(xiàn)，和簽名信息的緩存吵护。說了這么多盒音，直接上源碼吧。
微信簽名--源碼實(shí)現(xiàn)

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

完整的源碼

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

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

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

微信JS-SDK 官方文檔