微信公众号提供的与用户互动的功能有限，大部分的业务场景还是需要用户跳转到网页中来实现。同时我们需要获取微信用户信息，这时候我们绕不开的一个重要的点就是微信网页开发。根据官方文档，网页开发有几个步骤：
步骤1--设置域名
设置回调域名，登录公众号后 ，进入 ‘开发-接口权限’ ，下拉找到‘网页授权’，修改设置域名（纯域名，不带http或https等协议头）。域名需要ICP备案，填写之后需要下载验证文件。把文件放到项目根目录，路由设置该路径为静态文件。我使用的路由规则是 '/:file'，判断为 txt文件名直接返回文件。如果同目录下有其他不希望暴露的文件则需要更细致的判断。
步骤2--逻辑实现
网页授权有两种形式
snsapi_base -- 获取基本信息，仅需要识别用户的话，通过这个就能拿到用户的 openid。如果绑定了开放平台的话，还会返回一个 unionId。这种授权是不需要用户同意的（省去一些信任成本）
snsapi_userinfo -- 获取用户详细信息，包括用户性别、昵称、地区、性别、微信头像等。如果需要的话选这种，需要用户确认登录。
相关代码长这样（koa2框架的写法）：
'use strict'
const rp = require('request-promise')
let scopePage = async (ctx, next)=>{
if(!ctx.query.code && !ctx.query.state) {
//首次进入，需要跳转到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) {
//用户同意授权
let code = ctx.query.code;
let appid = 'yourappid'; //公众号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'; //公众号的appid
return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=${scopeType}&state=${state}#wechat_redirect `
}
一般拿到用户信息后，将相关信息渲染到模板中。这样就能给每个用户返回不一样的内容了。
在用户后续的操作中，我们可以进一步完善用户信息（譬如要求用户绑定手机号码），后面如果需要对用户推送通知之类的就可以实现了。
微信网页开发更强大的功能在 JSSDK 中，以后再记录。
