微信公众号2
一、运行环境。（微信类的开发，测试最好是放在开发者工具上，在浏览器上微信的网页是受到限制的）
公众号是基于传统H5 开发与运行，传统H5 运行环境是浏览器。因为公众号网页是在微信这个容器中运行的，所以使用微信的SDK，可以调用微信原生的一些功能。
二、微信JS-SDK ： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
（个人）微信SDK应该的是给微信公众号网页所有的，可以使网页调用微信开放的一些接口，如拍照。
三、微信公众号 授权登录：https://www.cnblogs.com/sunshq/p/5132811.html（推荐，亲测有效） 或 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842（官方文档）
步骤：1、配置回调函数
2、组装授权Url.
把参数替换成自己的参数, appid填入测试号的appid, REDIRECT_URI填入 经过encodeURIComponent()的参数,SCOPE填入snsapi_userinfo, state=#wechat_redirect即可
3、把组装后的url填入微信开发者工具地址栏中就可以发起授权弹窗了。授权后直接进入页面。
注意：这里直接在微信中扫码，授权后，域名必须是备案的才可以直接打开。（微信中，必须是备案的域名才能打开网页。微信开发者可以打开没有备案的域名）
微信公众号：后台生成的二维码（一般是域名 open.weixin.qq.com/），在微信中打开会重定向 URL 的。使用 微信开发者工具就可以 调试。
express做后端服务器 开发 微信公众号网页 https://segmentfault.com/a/1190000016445803 或 https://www.cnblogs.com/wuyuchang/p/7170949.html（推荐，亲测有效，注意里面有几个单词字母有错别字，程序会报错。如，timestamp 有的地方变成了 timpstamp）
1、修改接口配置信息（同时也是一个经验加密签名的算法是否正确）
router.get('/wxJssdk', function(req, res, next) {
// var token = config.wechat.token
var token = "wxexpress"
var signature = req.query.signature
var nonce = req.query.nonce
var timestamp = req.query.timestamp
var echostr = req.query.echostr
console.log("req", req);
console.log("signature", signature);
console.log("nonce", nonce);
console.log("timestamp", timestamp);
console.log("echostr", echostr);
var str = [token, timestamp, nonce].sort().join('')
var sha = sha1(str)
console.log("sha", sha);
res.send(echostr);
if (sha === signature) { // 这里就可以校验自己的加密算法和微信要求的加密算法是不是一致
res.send(echostr);
} else {
res.send(wong);
}
});
2、填写安全域名
3、生成signature
/* 前端传入参数： url*/ router.post('/getJssdk', (req, res) => { const request = require('request') const grant_type = 'client_credential' const appid = 'wx1**********e' // 微信公众号的appid const secret = 'f1********************a' // 微信公众号的secret request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => { let access_token = JSON.parse(body).access_token request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => { let jsapi_ticket = JSON.parse(body).ticket let nonce_str = '123456' // 密钥，字符串任意，可以随机生成 let timestamp = new Date().getTime() // 时间戳 let url = req.body.url // 使用接口的url链接，不包含#后的内容 console.log('jsapi_ticket', jsapi_ticket); console.log('nonce_str', nonce_str); console.log('timestamp', timestamp); console.log('url', url); // 将请求以上字符串，先按字典排序，再以'&'拼接，如下：其中j > n > t > u，此处直接手动排序 let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '×tamp=' + timestamp + '&url=' + url console.log('str', str); // 用sha1加密 let signature = sha1(str) console.log('signature', signature); res.send({ appId: appid, timestamp: timestamp, nonceStr: nonce_str, signature: signature, }) }) }) })
4、前端 调用 getJssdk 方法，获取需要的参数
axios.post('/getAccessToken/getJssdk', {url: location.href}).then((response) => {
var data = response.data
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名，见附录1
jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
})
5、前端 在 wx.ready( )方法中，执行微信 JS-SDK的方法；或在 wx.error( ) 中告诉用户，微信接口不可用
wx.ready(function(){ // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 wx.checkJsApi({ jsApiList: ['onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function(res) { // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); }); wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log('微信config失败'); });
