微信网页开发
一、基于微信的h5网页开发
与正常的网页开发相比，微信网页可以调用微信功能
1.扫码
2.录音
3.分享到朋友圈
4.摇一摇
…
开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
二、通过模板引擎，实现服务端渲染
使用服务器渲染的目的就是将后端产生的数据注入到h5页面上
基本配置：
app.set(\’文件目录\’,‘views’)
app.set(\’view engine\’,\’ejs\’)
res.render(\’ejs模板的文件名\’,数据obj)
例如：
//指定模板目录
app.set(path.join(__dirname,\’./views\’),\’views\’)
//使用ejs 模板引擎
app.set(\’view engine\’,\’ejs\’)
// 列子
app.get(\’/test\’,(req,res)=>{
//渲染一个模板
res.render(\’hehe\’,{name:\’韩梅梅\’,age:16})
})
三、渲染模式
渲染一个页面
1. 发起ajax 获取数据 浏览器进行渲染 客户端渲染
2. 服务器将数据处理好 直接将完整的页面发给你 服务端渲染
四、获取ticker
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
// 获取jsapi_ticker
function getTicket(access_token){
let url =`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`
return axios.get(url)
}
五、singnture 签名算法
签名生成规则如下：
1. 参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。
2. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。
3. 对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
六、部分代码
1、通过config接口注入权限验证配置
服务器端：
app.get(\’/iwantsay\’,async (req,res)=>{
let appId =APPID
// timestamp 是以s为单位的时间戳
let timestamp =parseInt((new Date()).getTime()/1000)
// nonceStr 16位随机字符串
let nonceStr = randomstring.generate(16);
let url =\’http://qstest.natapp1.cc/iwantsay\’
// signature 需要由 timestamp nonceStr 以及h5页面的url 和 ticket 进行加密处理
let token =await getToken()
let data = await getTicket(token)
let ticket=data.data.ticket
let string =`jsapi_ticket=${ticket}&noncestr=${nonceStr}×tamp=${timestamp}&url=${url}`
// 加密处理
let signature =crypto.createHash(\’sha1\’).update(string).digest(\’hex\’)
// 业务处理
let num = Math.ceil(Math.random()*44)
let img =`http://qstest.natapp1.cc/${num}.png`
res.render(\’hehe\’,{signature,nonceStr,timestamp,appId,img})
})
ejs文件：
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: \'<%-appId%>\’, // 必填，公众号的唯一标识
timestamp:\'<%-timestamp%>\’, // 必填，生成签名的时间戳
nonceStr: \'<%-nonceStr%>\’, // 必填，生成签名的随机串
signature: \'<%-signature%>\’,// 必填，签名
jsApiList: [\’checkJsApi\’,\’updateTimelineShareData\’,\’scanQRCode\’,\’startRecord\’,\’stopRecord\’,\’playVoice\’] // 必填，需要使用的JS接口列表
});
2、通过ready接口处理成功验证（wx.config验证成功之后执行）
wx.ready(function(){
// 回调内部表示所有api都可以用
// 分享到朋友圈
wx.updateTimelineShareData({
title: \’I WANT SAY\’, // 分享标题
link: \’http://qstest.natapp1.cc/iwantsay\’, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: \’https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3386247472,87720242&fm=26&gp=0.jpg\’, // 分享图标
success: function () {
// 设置成功
}
})
//扫一扫
document.getElementById(\’btn2\’).addEventListener(\’click\’,()=>{
wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: [“qrCode”,”barCode”], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
alert(result)
}
});
})
let localId = null
// 开始录音
document.getElementById(\’btn3\’).addEventListener(\’click\’,()=>{
wx.startRecord()
})
// 停止录音
document.getElementById(\’btn4\’).addEventListener(\’click\’,()=>{
wx.stopRecord({
success: function (res) {
localId = res.localId;
}
});
// 播放录音
document.getElementById(\’btn5\’).addEventListener(\’click\’,()=>{
if(!localId){
alert(\’请先录音\’)
return false
}
wx.playVoice({
localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
});
});
})
});
3、通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
alert(res)
});