对于公众号开发，这已经是很老的话题了，之前倒是也做过些许，不过写的都是后端的接口，对于前端操作的一些流程还不是很清楚，比如很重要的一个入口功能，授权的流程。
说到授权登录，微信小程序也有授权登录，两者授权登录过程大同小异，都是先拿code换取openid（用户对当前公众号或小程序的唯一标识）和access_token。注意，此处access_token与基础支持中的access_token不同，此处的access_token是根据每个用户的不同生成的，每个用户都不一样，而基础access_token是对接口调用的标识。然后小程序的话前端可以直接拿到用户信息（微信头像、昵称、地区和性别信息） ，而公众号号就需要通过openid和access_token调用接口来获取用户基本信息。
公众号用户授权基于授权作用域（scope参数）的不同，分为静默授权（scope为snsapi_base）和非静默授权（scope为snsapi_userinfo）。静默授权就是用户无感知的就授权了，但只能不弹出授权页面，直接跳转，只能获取用户openid，非静默授权会弹出授权页面，可通过openid拿到头像、昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 。
公众号授权登录的效果大概都像下面这样，就是一进入首页就弹出让用户授权的弹窗（非静默授权）。
前端主要网页授权步骤如下
// 授权获取code
toRedirect() {
let redirect_uri = encodeURIComponent(this.$redirect_uri);
let url = this.$auth_url.replace('REDIRECT_URI',redirect_uri);
if (this.wechatCode == null || this.wechatCode === '') {
window.location.href = url;
} else {
this.saveOpenID();
}
},
// 截取url中的code方法
getUrlCode() {
var url = location.search
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
var strs = str.split("&")
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
}
}
return theRequest
},
// 拿code换取accessToken和openid最后获取用户信息
saveOpenID() {
if(this.wechatCode) {
this.getOpenId();
}
},
getOpenId() {
let url = this.$api_url + this.$access_token_uri + '/' + this.wechatCode;
uni.request({
async: false,
url: url,
method: 'GET',
success: (res) => {
console.log('getOpenId:',res);
this.userOpenid = res.data.data.openid;
this.accessToken = res.data.data.access_token;
uni.setStorage({
key: 'user_openid',
data: this.userOpenid
});
this.login();
}
})
},
// 获取登录用户信息
login() {
let url = this.$api_url + this.$user_info_uri + '/' + this.accessToken + '/' + this.userOpenid;
uni.request({
async: false,
url: url,
method: 'GET',
success: (res) => {
console.log('login:',res);
uni.setStorage({
key: 'user_info',
data: res.data.data
})
}
})
},
onLoad() {
if (!this.userOpenid) {
this.wechatCode = '';
this.wechatCode = this.getUrlCode().code;
this.toRedirect();
};
},山水有相逢，来日皆可期，谢谢阅读，我们再会
我手中的金箍棒，上能通天，下能探海
