一、基於微信的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)
});