分享该文章的原因是，后台由于各种原因迟迟或者未能提供该jssdk接口给你，但你项目中又必须用到该接口的话，阻塞你的项目进程，这里就自己手动用node实现jssdk
安装教程
1. git clone https://gitee.com/Jaction/wx_JSSDK.git
2. cd wx_JSSDK
3. cnpm i
4. cnpm run start
注意先cnpm run start 之前先全局安装supervisor
cnpm i supervisor -g
image.png
项目启动成功
一、微信公众平台
参数和白名单
地址：微信公众平台官网
账号： 用非个人微信的邮箱注册个账号
- 开发者ID(AppID)
- 开发者密码(AppSecret)
- 配置白名单 (node项目部署的服务端IP，不设置的话，请求微信公共接口会提示你去配置白名单)
图片如下
地址： 微信公众平台 - 开发 - 基本配置
image.png
image.png
设置JS接口安全域名
JS接口安全域名是前端部署服务器后的链接，而不是你node部署的服务器
注意点：
- 链接的详细地址，包括二级域名和文件目录 比如： xxx.baidu.com/h5/active
- txt文件也是放在服务器的h5/active文件下，比如是采用vue + webpack编译的话，就放在跟index.html同个文件下
image.png
image.png
到此为止： 微信公众平台的设置基本就搞定了，剩下就是实例开发问题了
二、node项目
node项目采用koa2框架来做的，这里就不多说如何构建koa2了，自行百度
koa2 test_jssdk
cd test_jsskd
cnpm i
cnpm run start
网页就localhost:3000打开就ok
分别在以下文件新建或者编辑代码
方法 一
// app.js
const jssdk = require('./routes/jssdk')
app.use(pccjssdk.routes(), pccjssdk.allowedMethods())
这里写了post和get两种请求方式，任一用其中一种即可
// routes/jssdk.js
const router = require('koa-router')()
const jssdk = require('./../jssdk/index.js')
router.prefix('/jssdk')
router.post('/api', async (ctx, next)=> {
let { url } = await ctx.request.body;
console.log(ctx.request.body, 'ctx.request.body')
ctx.body = {
resCode: 0,
obj: await jssdk(url),
msg: ''
}
})
router.get('/api', async (ctx, next)=> {
let { url } = await ctx.request.query;
ctx.body = {
resCode: 0,
obj: await jssdk(url),
msg: ''
}
})
module.exports = router
// jssdk/index.js
let sign = require('./sign.js');
const appid = "wx83647cc6a3d31xxx"; // 复制自己的appid
const appSecret = "c1bd64f161cb8644d65275d99893xxxx"; // 复制自己的appSecret
// 后台请求用了flyio的库来做，也比较容易，自行百度查找
let fly=require("flyio")
// 获取access_token
let getAccessToken = ()=> {
return new Promise((resolve, reject)=> {
let url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+appid+'&secret='+appSecret;
fly.get(url).then(res=> {
console.log(res, '获取access_token')
resolve({
access_token: res.data.access_token,
expires_in: res.data.expires_in
})
}).catch(error=> {
console.log(error)
})
})
}
// 获取jsapi_ticket
let getJsapiTicket = ()=> {
return new Promise((resolve, reject)=> {
getAccessToken().then(res=> {
let {access_token, expires_in} = res;
let ticketUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi';
fly.get(ticketUrl).then(params=> {
console.log(params, '获取jsapi_ticket')
let ticket = '';
if (params.data.errmsg == 'ok') {
ticket = params.data;
resolve(ticket)
} else {
reject()
}
}).catch(error=> {
console.log(error)
})
})
})
}
// 计算signature
let getSignature = (url)=> {
return new Promise((resolve, reject)=>{
getJsapiTicket().then(res=> {
console.log(res, '计算signature')
let ticket = res.ticket;
let getSign = sign(ticket, url);
console.log(getSign, 'getSign')
resolve(getSign);
})
})
}
// var signatureStr = sign(content.ticket, req.body.url);
module.exports = (url)=> {
return new Promise((resolve, reject)=> {
getSignature(url).then(res=> {
console.log(res, '========>>>>>' + JSON.stringify(res))
resolve({
appid,
jsapi_ticket: res.jsapi_ticket,
noncestr: res.nonceStr,
sign: res.signature,
timestamp: res.timestamp,
})
})
})
}
// jssdk/sign.js
// 随机字符串
const domain = 'http://creapptest.pacificcoffee.com.cn/h5/coupon/';
var crypto = require('crypto'); // hash加密
var createNonceStr = function () {
return Math.random().toString(36).substr(2, 15);
};
// 时间戳
var createTimestamp = function () {
return parseInt(new Date().getTime() / 1000) + '';
};
// 排序拼接
var raw = function (args) {
var keys = Object.keys(args);
keys = keys.sort()
var newArgs = {};
keys.forEach(function (key) {
newArgs[key.toLowerCase()] = args[key];
});
var string = '';
for (var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr(1);
return string;
};
/**
* @synopsis 签名算法
*
* @param jsapi_ticket 用于签名的 jsapi_ticket
* @param url 用于签名的 url ，注意必须动态获取，不能 hardcode
*
* @returns
*/
let sign = (jsapi_ticket, url = domain)=> {
let ret = {
jsapi_ticket: jsapi_ticket,
nonceStr: createNonceStr(),
timestamp: createTimestamp(),
url: url
};
let string = raw(ret);
let shasum = crypto.createHash('sha1');
shasum.update(string);
let signature = shasum.digest("hex");
ret.signature = signature;
return ret;
};
module.exports = sign;
方法二
const router = require("koa-router")();
const fs = require("fs");
const path = require("path");
const moment = require("moment");
const request = require("request");
var crypto = require("crypto");
const appid = "wx83647cc6a3d31bc3";
const appSecret = "c1bd64f161cb8644d65275d99893cc10";
router.prefix('/jssdk')
const filePath = path.join(__dirname, "/wxconfig.json");
router.post("/wxconfig", async (ctx, next) => {
const req = ctx.request.body;
console.log(req);
let nowUrl = req.url;
// 定义两个函数返回Promise对象，用来组成串行，并最终获取到jsapi_ticket后最终处理成签名。
// 获取accessToken
const getToken = function() {
let p1 = new Promise((reslove, reject) => {
request(
"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+ appid +"&secret=" + appSecret,
function(error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body); // 注意返回的数据是一个纯字符串，要格式化处理
let token = JSON.parse(body).access_token;
if (token !== "") {
reslove(getJsapi(token));
}
}
}
);
});
return p1;
};
// 获取jsapi_ticket
const getJsapi = function(token) {
let p2 = new Promise((reslove, reject) => {
request(
"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" +
token +
"&type=jsapi",
function(error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body); // 注意返回的数据是一个纯字符串，要格式化处理
// 存储当前 ticket
const ticketData = {
jsapi_ticket: "",
time: moment().format("YYYY/MM/DD HH:mm:ss")
};
if (JSON.parse(body).errcode === 0) {
// 如果成功获取到
ticketData.jsapi_ticket = JSON.parse(body).ticket;
/* 这里是将在这个同级目录下创建一个json文件用来存储jsapi_ticket，
和请求时间，用于下次接口被调用的过期校验。*/
fs.writeFile(filePath, JSON.stringify(ticketData), function(err) {
if (err) console.error(err);
console.log("写入ticketData的json文件成功！");
});
reslove(JSON.parse(body).ticket);
} else {
fs.writeFile(filePath, JSON.stringify(ticketData), function(err) {
if (err) console.error(err);
console.log("写入ticketData的json文件失败！");
});
}
}
}
);
});
return p2
.then(result => {
console.log(result);
// 在这里返回签名生成函数的结果给前台
let sendData = getSignature(nowUrl, result);
ctx.status = 200;
ctx.body = sendData;
})
.catch(err => {
console.log(err);
});
};
/* 这里是先判断存储json文件是否存在，若不存在或者文件存在但已过期，
就调用上方的串行函数，直接返回生成的签名给前台。若文件存在没过期，
直接使用json文件中的jsapi_ticket生成签名返回给前台使用。*/
if (fs.existsSync(filePath)) {
console.log("文件路径存在");
// 先读取
const jsapiData = JSON.parse(fs.readFileSync(filePath));
console.log(jsapiData);
// 先判断时间是否过期，若不过期传key，过期不传key
let t1 = jsapiData.time; // 数据,必须是2018/12-/01 12:09:04这种格式，否则Date对象无法转换
let dateBegin = new Date(t1); // 转化为Date对象的形式
let dateEnd = new Date(); //当前时间数据
let dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
// console.log(Math.floor(dateDiff / 1000))
if (Math.floor(dateDiff / 1000) > 7198) {
// 缓存时间超过有效期（过期）
sendData = await getToken();
} else {
// 不过期，调用签名生成函数生成结果直接ctx返回给前台
let signaData = await getSignature(nowUrl, jsapiData.jsapi_ticket);
ctx.status = 200;
ctx.body = signaData;
}
} else {
console.log("文件路径不存在");
sendData = await getToken();
}
});
// 生成签名函数
const getSignature = function(nowUrl, key) {
let noncestr = Math.random()
.toString(36)
.substr(2); // 随机字符串
let timestamp = moment().unix(); // 获取时间戳，数值类型
let jsapi_ticket = `jsapi_ticket=${key}&noncestr=${noncestr}×tamp=${timestamp}&url=${nowUrl}`;
// console.log(jsapi_ticket)
jsapi_ticket = getSha1(jsapi_ticket);
return {
appid: appid,
noncestr: noncestr,
timestamp: timestamp,
signature: jsapi_ticket
};
};
/**
* @sha1加密模块 (加密固定,不可逆)
* @param str string 要加密的字符串
* @retrun string 加密后的字符串
* */
const getSha1 = function(str) {
var sha1 = crypto.createHash("sha1"); //定义加密方式:md5不可逆,此处的md5可以换成任意hash加密的方法名称；
sha1.update(str);
var res = sha1.digest("hex"); //加密后的值d
return res;
};
module.exports = router;
在线获取jssdk的singure签名
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
前端接口请求
url: http://localhost:3000/pccjssdk/api&url=xxxx
{
"resCode": 0,
"obj": {
"appid": "wx83647cc6a3d31xxx",
"jsapi_ticket": "HoagFKDcsGMVCIY2vOjf9u7m4h2TBKvKibbo42NtVLAJnUlWRP2q6wvlCxBKs_AhSScE-XK8qbdLscaZQBAYQ",
"noncestr": "b9756av9i04",
"sign": "33b212eb473471de5a1bcf645626f421072864f8",
"timestamp": "1547721744"
},
"msg": ""
}
到此为止node的接口已经写好，前端自行调用便可
项目地址：码云
前端H5页面调用
在vue构建项目，初始化wx.config,最好在main.js做好
import wx from 'weixin-js-sdk'
window.wx = wx;
// 常见问题
// 如果怎么修复都是报签名失败，尝试不用encodeURIComponent去编码链接
axios({
url: 'http://h5collect.vcihg.com/h5collect/index.php/home/index/shareCode?myurl=' + encodeURIComponent(window.location.href),
method: 'get',
}).then((res) => {
let data = res.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // ', // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名，见附录1
jsApiList: [
'onMenuShareTimeline', // 分享到朋友圈
'onMenuShareAppMessage', // 分享给朋友
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.error(function(result) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
alert(result + '测试报错，上线后就可以修复');
});
})
其他页面
mounted () {
this.$nextTick(()=> {
wx.ready(()=> {
this.wxJsJdk();
});
})
},
methods: {
wxJsJdk () {
wx.ready(()=> {
// 分享给朋友
wx.onMenuShareAppMessage(this.winxin());
// 分享到朋友圈
wx.onMenuShareTimeline(this.winxin());
})
},
weixinShare() {
// 分享到朋友圈
console.log('onMenuShareTimeline 朋友圈');
wx.onMenuShareTimeline(this.winxin());
},
weixinShareFirend() {
// 分享给朋友
console.log('onMenuShareAppMessage 微信朋友');
wx.onMenuShareAppMessage(this.winxin());
},
winxin() {
return {
title: '我爱二次元第二季海选招募',
desc: '百万梦想基金，打造次元之星。《我爱二次元》第二季王者荣归，即日启动！',
link: location.href,
imgUrl: this.imgUrl,
success: function () {
this.$dialog.toast({
mes: '分享成功！',
timeout: 1500,
icon: 'success'
});
},
cancel: function () {
// 用户取消分享后执行的回调函数
this.$dialog.toast({
mes: '分享失败',
timeout: 1500,
icon: 'success'
});
}
}
},
}
}
注意：利用微信浏览器内置api做分享，在微信公众平台前端网页上添加分享按钮
微信官网api资料
3、测试号管理
