小程序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); } }) } })
请发表评论