代码块直接一行显示,算了弄截图了,这是纯前端计算 signature ,然后去分享,这里把appID 和 appSecret 值暴露在前端代码里貌似有风险,最好还是让后端封装下,再去调用接口直接获取 signature。
一、首先的话准备好一个内网穿透的工具,就是内网映射到指定域名,然后就可以通过外网访问本地的程序了,我用的是natapp(搭建教程natapp.cn/article/wec…);
二、微信公众平台接口测试帐号申请(mp.weixin.qq.com/debug/cgi-b…),在里面拿到appID和appsecret,配置好安全域名(内网穿透的域名);
三、安装微信 JS-SDK
npm install weixin-js-sdk --save
在对应页面引入 import wx from 'weixin-js-sdk'
四、配置反向代理
直接调用微信的获取 access_token 及 ticket 接口会出现跨域
在 vue.config.js 里配置
四、通过接口获取 access_token 和 ticket 计算出 signature
1、调用 api.weixin.qq.com/cgi-bin/tok… 获取 access_token,appID、appSecret 就是测试号的 appID、appSecret
2、然后通过获取到的 access_token 调用 api.weixin.qq.com/cgi-bin/tic… 获取 ticket
3、通过微信开发文档developers.weixin.qq.com/doc/offiacc… 知道了 j将 ticket 通过组装得到的字符串进行 sha1 签名,得到 signature。(文中 sha1 方法百度来的)
注意:
1、分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致;
2、分享的图标如果是本地的图片则无法显示,我遇到的是这样;
function sha1(s) { var data = new Uint8Array(this.encodeUTF8(s)) var i, j, t var l = (((data.length + 8) >>> 6) << 4) + 16, s = new Uint8Array(l << 2) s.set(new Uint8Array(data.buffer)), (s = new Uint32Array(s.buffer)) for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2) s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8) s[l - 1] = data.length << 3 var w = [], f = [ function() { return (m[1] & m[2]) | (~m[1] & m[3]) }, function() { return m[1] ^ m[2] ^ m[3] }, function() { return (m[1] & m[2]) | (m[1] & m[3]) | (m[2] & m[3]) }, function() { return m[1] ^ m[2] ^ m[3] } ], rol = function(n, c) { return (n << c) | (n >>> (32 - c)) }, k = [1518500249, 1859775393, -1894007588, -899497514], m = [1732584193, -271733879, null, null, -1009589776] ;(m[2] = ~m[0]), (m[3] = ~m[1]) for (i = 0; i < s.length; i += 16) { var o = m.slice(0) for (j = 0; j < 80; j++) (w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1)), (t = (rol(m[0], 5) + f[(j / 20) | 0]() + m[4] + w[j] + k[(j / 20) | 0]) | 0), (m[1] = rol(m[1], 30)), m.pop(), m.unshift(t) for (j = 0; j < 5; j++) m[j] = (m[j] + o[j]) | 0 } t = new DataView(new Uint32Array(m).buffer) for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2) var hex = Array.prototype.map .call(new Uint8Array(new Uint32Array(m).buffer), function(e) { return (e < 16 ? '0' : '') + e.toString(16) }) .join('') return hex}