vue本地调试微信h5分享

2,718 阅读3分钟

代码块直接一行显示,算了弄截图了,这是纯前端计算 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}