小程序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);
}
})
}
})

