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


     
      刚开始接触小程序时,便是在官网体验了下小程序,粗略的浏览各个组件和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);
          }
        })
      }
    })
  • 相关阅读:
    Python3学习之路~8.5 SocketServer实现多并发
    Python3学习之路~8.4 利用socket实现文件传送+MD5校验
    [jzyzoj2021]lca模板题
    [BZOJ4542] [JZYZOJ2014][Hnoi2016] 大数(莫队+离散化)
    BZOJ3289[JZYZOJP2018]: Mato的文件管理 莫队+树状数组+离散化
    离散化的后续
    数据离散化 ( 以及 stl 中的 unique( ) 的用法 )+ bzoj3289:Mato的文件管理
    stl upper_bound()
    [BZOJ 3720][JZYZOJ 2016]gty的妹子树 强制在线 树分块/树套树
    所以学树分块的时候为什么要看vector啊sjb
  • 原文地址:https://www.cnblogs.com/xmyun/p/6407114.html
走看看 - 开发者的网上家园