小程序入門---登錄流程
阿新 • • 發佈：2018-01-23
pen 接口 config 一個 toolbar woker acc redirect secret
小程序官網：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161102
開發工具: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359
小程序git上的Demo：https://github.com/xwartz/wechat-app-demo
剛開始接觸小程序時，便是在官網體驗了下小程序，粗略的瀏覽各個組件和API，然後從git上下了個項目，本地體驗了下。
之後根據官方Demo嘗試制作一個自己的小Demo。
做了幾個登錄，註冊，個人信息頁面後，準備對接時，一直卡在登錄流程上。
讀官方文檔登錄流程後，以為是如下流程：
![技術分享圖片]()
原以為是wx.login拿到code，然後在前端校驗，獲取session_key 和 openid。糾結許久，發現原來是自己思路錯了。
![技術分享圖片]()
並且，在用此接口時
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
控制臺一直報域名不合法，解決方案是，在你的小程序開發後臺設置裏，配置api.weixin.qq.com域名。
正確的思路應該是，wx.login拿到code，向後臺請求，在後臺服務器對code進行處理（所以關於數據簽名校驗等其實是在後臺進行的。），返回session_key 和 openid等需要的信息，如下：
方案一： 
現在，開始分析app()代碼：
現在，開始分析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);
}
})
}
})
小程序入門---登錄流程