微信小程之登录（附登录demo）

前言
微信小程序发布出来，很快就在互联网引发了一场风波。很多人都跃跃欲试，可是就登录这一块，搞了好久都搞不住。所以我来总结一下。可能以后会有变更，但至少目前是这个样子

原理
用户进入小程序后，肯定有一部分要与后端交互的。然后我们在这个交互的地方启动验证。
比方说进入首页，首页可能会显示list吧，list你肯定要请求接口吧，接口你肯定要带上用户的唯一标识3rd_session吧。然后就在这儿把关，验证3rd是否合法。
当然你也可以每次请求都验证，但是我感觉没必要。只要在进入小程序的第一个与后端交互处验证就行

9a619858fb8415b0df67c30063716a44.jpg (75.57 KB, 下载次数: 68)

下载附件

2017-2-21 11:15 上传

项目架构

2176e24eca454332eb1859978c1d8007.jpg (19.9 KB, 下载次数: 70)

下载附件

2017-2-21 11:15 上传

cfg.js

var host='';
var arr={
    //请求接口（获取新的3rd_session和验证3rd_session）
    loginURI:host+'/index.php?g=wxapp&m=Base&a=userLogin',
    sessionCheckURI:host+'/index.php?g=wxapp&m=memo&a=addMemo'
}
function gets(arg){
    return arr[arg];
}
 module.exports ={
  gets:gets
}

util.js

var cfg_js=require('cfg.js');
//用户登录
function getNewSession(saveSesionOk){
    wx.login({
      success: function(res) {
          wx.request({
            url: cfg_js.gets('loginURI'),
            data: {code: res.code},
            success: function(res){
                var new_session=res.data.session;
                wx.setStorage({
                  key:"session",
                  data:new_session,
                  success:function(res){
                      saveSesionOk(res)
                  }
                })
            }
          })
      }
    });
}
//set本地存储
function setStrg(key,value,success){
  wx.setStorage({
    key:key,
    data:value,
    success: function(res){
      success(res)
    }
  })
}
//get本地存储
function getStrg(key,success,fail){
  wx.getStorage({
    key: key,
    success: function(res){
      success(res)
    },
    fail: function(res) {
      fail(res)
    }
  })
}
//封装post请求
function post(url,data,success){
   wx.request({
        url: url,
        data:data,
        method: 'POST',
        header: {'content-type': 'application/x-www-form-urlencoded'},
        success: function(res) {
          success(res)
        }
    })
}
//封装get请求
function got(url,data,success){
   wx.request({
        url: url,
        data:data,
        header: {'content-type': 'application/json'},
        success: function(res) {
          success(res)
        }
    })
}
//3rd_session检测
function sessionCheck(session,success){
    //0代表不合法，1代表ok
    var url= cfg_js.gets('sessionCheckURI')+"&session="+session;
    post(url,{},function(res){
        success(res)
    })
}
//第一次验证。一般情况下，登录只需要在程序开始的第页面验证一次就好
function firstReqest(sessionCheckOk){
        // ---------------------------------验证登录开始------------------------------
        getStrg("session",function(res){
          //获取本地seesin成功
            var session=res.data;
            sessionCheck(session,function(res){
                 var status=res.data;
                 status=1;//假设验证成功（本地的3rd_session和服务器的3rd_session一致）
                //与后台匹配失败
                if(status==0){
                      //重新登录
                      getNewSession(function(res){
                          getStrg("session",function(res){
                              //获取本地session成功
                                var session=res.data;
                                sessionCheckOk(session)
                          },null)
                      })
                }else{
                  sessionCheckOk(session)
                }
            })
        },function(res){
          //获取本地seesin失败
             getNewSession(function(res){
                  getStrg("session",function(res){
                        var session=res.data;
                        sessionCheckOk(session)
                  },null)
              })
        })
        // ---------------------------------结束---------------------------
}
module.exports = {
  getNewSession: getNewSession,
  setStrg:setStrg,
  getStrg:getStrg,
  post:post,
  got:got,
  sessionCheck:sessionCheck,
  firstReqest:firstReqest
}

index.js

var util_js=require('../../utils/util.js');
Page({
  data: {
    content:'未登录'
  },
  //事件处理函数
  onLoad: function () {
        var that = this
        util_js.firstReqest(function(session){
            that.setData({content:'登录成功'})
        })
  }
})

index.wxml

{{content}}

效果预览

129c933fa5af55b362243c317d9f169d.jpg (4.04 KB, 下载次数: 65)

下载附件

2017-2-21 11:15 上传

源码下载：

源码文件：dingshao-WechatApp_login-master.zip