小程序入门---登录流程

小程序官网：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等需要的信息，如下：

方案一：

先取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);
      }
    })
  }
})