• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
 
  刚开始接触小程序时,便是在官网体验了下小程序,粗略的浏览各个组件和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);
      }
    })
  }
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序--登录流程梳理发布时间:2022-07-18
下一篇:
微信小程序开发发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap