微信自定义分享的签名版实现

如果你没有微信公众号，那文章就不需要看了。此文介绍的是微信新版本的分享功能，2015年1月，微信已经抛弃了旧版本的分享。

微信的自定义分享功能，是病毒式传播的一把利剑。

demo

demo 请在微信中打开
 demo2 请在微信中打开

分享接口应用，最常见的莫过于公众号文章分享。通过分享按钮，用户可以将自己喜欢的文章分享给微信好友，也可分享到微信朋友圈。
可以在用户分享时，为其设置个性化的分享图片、标题、描述等，从而使分享的内容更生动有趣，以获得更好的传播效果。

有时候，你可能只需要做一个H5页面，没有相关的后台。但是微信的签名功能，又必须使用。所以，独立的后台是很有必要的，这个后台，能为任意公众号生成签名信息，微信的签名只有2个小时，所有缓存签名信息也是必须要实现的。

签名 signature

然而在使用这些牛逼的功能之前，有一座大山困在了开发者前面--signature。

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

wx.config({
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

参数 timestamp、nonceStr、signature ，都由后台传递过来。不能硬编码到页面，因为 signature 的有效期为 2个小时。所以一个再简单的页面，都需要使用一个后台前面生成来支持。

再看 signature 的生成方法，

配置微信公众号
获取access_token
获取jsapi_ticket
签名算法
复杂度可以吓尿你，算法参考微信JS-SDK官网。简单点描述
把 noncestr、jsapi_ticket、url 等参数连接进行 sha1 加密。微信也给出了部分语言的实现源码) .

完整的实现

然后，生成这些东西都简单，可怎么和页面整合呢。微信组件需要在页面加载后，初始化 wx的配置。

1. 引入微信 JS

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

获取签名等参数

var sign;
  function jsonpCallback(data) {
    sign = data.sign;
    wx.config({
      debug: false,
      appId: 'wxd98888751036c960',
      timestamp: sign.timestamp,
      nonceStr: sign.nonceStr,
      signature: sign.signature,
      jsApiList: [
        // 所有要调用的 API 都要加到这个列表中
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ'
      ]
    });
  }
  // 根据当前页面路径动态获取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的方式，传递参数 appid、url。因为一个appid 可能对应多个url，我有多个活动页面都需要使用到微信的分享。
因为js都是从上往下执行的，所以再jsonp回调之后，sign 被初始化了。sign中包含着签名、时间戳等信息。

需要注意的地方

url 是变化的。页面分享到朋友圈后，微信会自动给链接加上

原链接 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 需要再次申请一个签名

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

后端

微信也给出了实现逻辑，后端唯一要做的，就是http请求的实现，和签名信息的缓存。说了这么多，直接上源码吧。
微信签名--源码实现

clone 源码
安装nodejs环境
npm install
在 config/weixin.js 中配置自己的应用，这里需要配置自己的微信公众号，appid 和secret key。
node app.js ok 已经运行了
实际上，一套这种系统，能为无数的微信公众号提供签名信息服务，但是前提是你得把 secret key 给我，但是这种做法太不安全，不建议你这做。

完整的源码

微信签名--源码实现
 html 5 源码例子

前端页面只能在公众号信任的域名下面运行，所以 html 5 源码例子 在你的服务器应该是不能运行的。

附件：
微信朋友圈API分享代码自定义图标和分享链接。

微信JS-SDK 官方文档

最后编辑于：2017.11.27 02:57:45