微信公眾號(hào)提供的與用戶互動(dòng)的功能有限伤塌，大部分的業(yè)務(wù)場(chǎng)景還是需要用戶跳轉(zhuǎn)到網(wǎng)頁(yè)中來實(shí)現(xiàn)。同時(shí)我們需要獲取微信用戶信息，這時(shí)候我們繞不開的一個(gè)重要的點(diǎn)就是微信網(wǎng)頁(yè)開發(fā)。根據(jù)官方文檔罕邀，網(wǎng)頁(yè)開發(fā)有幾個(gè)步驟：
步驟1--設(shè)置域名
設(shè)置回調(diào)域名，登錄公眾號(hào)后 养距，進(jìn)入 ‘開發(fā)-接口權(quán)限’ 诉探，下拉找到‘網(wǎng)頁(yè)授權(quán)’，修改設(shè)置域名（純域名棍厌，不帶http或https等協(xié)議頭）肾胯。域名需要ICP備案，填寫之后需要下載驗(yàn)證文件耘纱。把文件放到項(xiàng)目根目錄敬肚，路由設(shè)置該路徑為靜態(tài)文件。我使用的路由規(guī)則是 '/:file'束析，判斷為 txt文件名直接返回文件艳馒。如果同目錄下有其他不希望暴露的文件則需要更細(xì)致的判斷。
步驟2--邏輯實(shí)現(xiàn)
網(wǎng)頁(yè)授權(quán)有兩種形式
snsapi_base -- 獲取基本信息员寇，僅需要識(shí)別用戶的話鹰溜，通過這個(gè)就能拿到用戶的 openid。如果綁定了開放平臺(tái)的話丁恭，還會(huì)返回一個(gè) unionId。這種授權(quán)是不需要用戶同意的（省去一些信任成本）
snsapi_userinfo -- 獲取用戶詳細(xì)信息斋日，包括用戶性別牲览、昵稱、地區(qū)恶守、性別第献、微信頭像等。如果需要的話選這種兔港，需要用戶確認(rèn)登錄庸毫。
相關(guān)代碼長(zhǎng)這樣（koa2框架的寫法）：
'use strict'
const rp = require('request-promise')
let scopePage = async (ctx, next)=>{
if(!ctx.query.code && !ctx.query.state) {
//首次進(jìn)入，需要跳轉(zhuǎn)到scopeurl 來獲取 code
let curUrl = ctx.href
let scopeUrl = generatorScopeUrl(curUrl, 'info')
ctx.status = 302;
ctx.redirect(scopeUrl)
} else if(ctx.query.code && ctx.query.state) {
//用戶同意授權(quán)
let code = ctx.query.code;
let appid = 'yourappid'; //公眾號(hào)appid
let fetchWechatUserInfo = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=SECRET&code=${code}&grant_type=authorization_code `;
let options = {
method: 'GET',
uri: fetchWechatUserInfo,
json: true
}
let userInfo = await rp(options);
if(userInfo.errcode){
throw new Error('fetch userInfo failure, please check the params')
}
let {openid, access_token, refresh_token} = userInfo
let fetchWechatUserDetailInfoUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN `;
let userDetailInfo = await rp({method:'GET', uri: fetchWechatUserDetailInfoUrl, json:true })
userInfo = Object.assign({}, userInfo, userDetailInfo)
... //dosomething
}
}
function generatorScopeUrl(url, type) {
if(!url) return false;
let scopeType = 'snsapi_base';
if(type == 'info){
scopeType = 'snsapi_userinfo';
}
let state = 'userstate'; //自定義字符串
let appid = 'yourappid'; //公眾號(hào)的appid
return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=${scopeType}&state=${state}#wechat_redirect `
}
一般拿到用戶信息后衫樊，將相關(guān)信息渲染到模板中飒赃。這樣就能給每個(gè)用戶返回不一樣的內(nèi)容了利花。
在用戶后續(xù)的操作中，我們可以進(jìn)一步完善用戶信息（譬如要求用戶綁定手機(jī)號(hào)碼）载佳，后面如果需要對(duì)用戶推送通知之類的就可以實(shí)現(xiàn)了炒事。
微信網(wǎng)頁(yè)開發(fā)更強(qiáng)大的功能在 JSSDK 中，以后再記錄蔫慧。
