小程序入门---登录流程
小程序git上的Demo：https://github.com/xwartz/wechat-app-demo
刚开始接触小程序时，便是在官网体验了下小程序，粗略的浏览各个组件和API，然后从git上下了个项目，本地体验了下。
之后根据官方Demo尝试制作一个自己的小Demo。
做了几个登录，注册，个人信息页面后，准备对接时，一直卡在登录流程上。
读官方文档登录流程后，以为是如下流程：
原以为是wx.login拿到code，然后在前端校验，获取session_key 和 openid。纠结许久，发现原来是自己思路错了。
并且，在用此接口时
控制台一直报域名不合法，解决方案是，在你的小程序开发后台设置里，配置api.weixin.qq.com域名。
正确的思路应该是，wx.login拿到code，向后台请求，在后台服务器对code进行处理（所以关于数据签名校验等其实是在后台进行的。），返回session_key 和 openid等需要的信息，如下：
方案一：
先取code,在判断是否存在openId。
现在，开始分析app()代码：
var Api = require('utils/api.js');
var Util = require('utils/util.js');
// var WxParse = require('../../wxParse/wxParse.js');
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
// this.getUserInfo();
},
onHide: function () {
console.log('App Hide')
},
Api:Api,
Util:Util,
globalData: {
hasLogin: false,
selectWoker:{},
currStudent:{}
},
getUserInfo:function(cb){
var that = this;
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo);
}else{
wx.login({
success: function (res) {
console.log("first:"+res.code);
wx.getUserInfo({success: function(ures) {}});
that.globalData.wxcode = res.code;
console.log("after:"+res.code);
that.ownerInfoQuery(that.globalData.wxcode,function(res){
if(res.status == "1"){
that.globalData.userInfo = res.datas;
typeof cb == "function" && cb(that.globalData.userInfo);
}else{
setTimeout(function(){
wx.redirectTo({
url: '../login/login',
duration:2000,
success: function(res){
// success
}
});
},1000);
}
});
}
})
}
},
//根据微信code获取openId
ownerInfoQuery: function(_code,callback) {
console.log('xcx_suremii_openId'+Util.config.version);
var that = this;
wx.getStorage({
key: 'xcx_suremii_openId'+Util.config.version,
success: function(res){
console.log('openId:'+res.data);
//如果有OpendId则直接登录
that.memberInfoQuery(res.data,callback);
},
fail: function() {
console.log('Api.getOpenId:'+Api.getOpenId);
//第一次没有openId基于code取openId
Util.AJAX(Api.getOpenId,{code:_code},function(res){
console.log(res);
if(res.data.status=="1"){
var openId = res.data.datas;
wx.setStorage({
key: 'xcx_suremii_openId'+Util.config.version,
data: openId,
success: function(res){
that.memberInfoQuery(openId,callback);
}
});
}else{
wx.showModal({
title:"",
content:"微信账号未关注小程序，请关注后再试试！",
// showCancel:false,
success:function(res){
if(res.confirm){
wx.redirectTo({
url: '../login/login',
duration:2000,
success: function(res){
// success
}
})
}
}
});
}
});
}
})
},
memberInfoQuery:function(_openId,callback){
Util.AJAX(Api.getAccountByOpenId,{openId:_openId},function(res){
callback(res.data);
},'POST');
}
});
代码思路：
方案二：
先判断是否有openId，在按需请求wx.login，获取code。
var Api = require('util/api.js');
var Util = require('util/util.js');
App({
onLaunch: function () {
var wxSessionKey, wxOpenId;
var that = this;
},
onShow: function () {
},
onHide: function () {
},
Api: Api,
Util: Util,
globalData: {
hasLogin: false
},
getInfoInit: function (cb) {
var that = this;
//是否有globalData.infoInit信息
if (that.globalData.infoInit) {
//当页面调用App({})的getInfoInit方法时，判断参数cb的类型是否为函数，是那么回传globalData.infoInit参数给回调函数cb,获取用户信息；
typeof cb == "function" && cb(that.globalData.infoInit);
} else {
//从本地缓存中取openid
wx.getStorage({
key: 'xcx_suremii_openId' + Api.version,
success: function (res) {
//缓存中有openid，用openid调用登录接口loginQuery
that.loginQuery(res.data, function (callbackRes) {
if (callbackRes.status == "1") {
//回调函数返回接口请求成功的数据信息
//存储infoInit信息到globalData上
that.globalData.infoInit = callbackRes.datas;
//当页面调用App({})的getInfoInit方法时，判断参数cb的类型是否为函数，是那么回传globalData.infoInit参数给回调函数cb,获取用户信息；
typeof cb == "function" && cb(that.globalData.infoInit);
} else {
//回调函数返回接口请求失败的数据信息，一秒后跳转登录页面
setTimeout(function () {
wx.redirectTo({
url: '../entry/login',
duration: 2000,
success: function (res) {
// success
}
});
}, 1000);
}
});
},
fail: function () {
//缓存中没有openid，获取openid，调用getOpenId接口
that.getOpenId(function (callbackRes) {
if (callbackRes.status == "1") {
//回调函数返回接口请求成功的数据信息
that.globalData.infoInit = callbackRes.datas;
typeof cb == "function" && cb(that.globalData.infoInit);
} else {
//回调函数返回接口请求失败的数据信息，一秒后跳转登录页面
setTimeout(function () {
wx.redirectTo({
url: '../entry/login',
duration: 2000,
success: function (res) {
// success
}
});
}, 1000);
}
});
}
})
}
},
//没有openId,用code换取openId
getOpenId: function (callback) {
var that = this;
//调用微信wx.login({})接口，获取code
wx.login({
success: function (res) {
//调用微信wx.getUserInfo({})接口，获取用户信息
wx.getUserInfo({ success: function (ures) { } });
//向后台服务器发送请求,用code换取openId
wx.request({
url: Api.API_HOST + Api.getOpenId,
data: { code: res.code },
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: { "Content-Type": "application/json" }, // 设置请求的 header
success: function (res) {
if (res.data.status == "1") {
//请求获取openId成功
var openId = res.data.datas;
//存储openId到storage
wx.setStorage({
key: 'xcx_suremii_openId' + Api.version,
data: openId,
success: function (res) {
that.loginQuery(openId, callback);
}
})
} else {
//请求获取openId失败
wx.showModal({
title: "",
content: "微信账号未关注小程序，请关注后再试试！",
// showCancel:false,
success: function (res) {
if (res.confirm) {
wx.redirectTo({
url: '../entry/login',
duration: 2000,
success: function (res) {
// success
}
})
}
}
});
}
}
})
}
})
},
//登录接口
loginQuery: function (_openId, callback) {
wx.request({
url: Api.API_HOST + Api.getAccountByOpenId,
data: { openId: _openId },
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: { "Content-Type": "application/json" }, // 设置请求的 header
success: function (res) {
//执行回调函数，传递接口返回数据信息
callback(res.data);
}
})
}
})
浙公网安备 33010602011771号