当前位置:主页 > 小程序开发 > 基础 >

微信小程序开发之用户登录实践教程

栏目:基础 来源: 微信小程序开发网 阅读: 2017-11-29
  有很多的微信小程序需要用户登录才能做接下来的一系列操作,例如,电商微信小程序,如果用户通过小程序购买上面的产品的话,就需要登录这个小程序,然后填写用户收货地址、下单进行购买,这样的小程序在开发的时候必须开发用户登录、用户中心功能和界面。

  当然,并不是所有的小程序都需要登录,例如,查询天气、字典、提供咨询数据等,这些都不需要,不过一般的企业开发的小程序都需要开发用户登录功能,因为,企业一般都是商业行业,必定牵涉到在小程序里面购买销售的问题,这时就需要用户登录了。

  如果我们做微信小程序开发的,不会开发小程序的登录功能的话,这是说不过去的,如果你找工作的话,肯定对会员中心做大量的开发,本教程将带领大家去开发一个会员登录的功能。

要求:

  当用户进入到微信小程序以后,如果点击下面的tabBar的用户中心后,如果用户没有登录,则跳转到登录中心,若用户已经登录过了则进入到用户中心,在用户中心显示用户名、头像等。

分析

  为了对这个功能进行开发,我们对这个功能拆分成几个小功能,然后,一步一步的开发,我们把这个功能拆分成两大功能,一个是用户中心,一个是登录。

  1)用户中心

  点击tabBar上面的“用户中心”以后,进入到用户中心,在这个用户中心判断当前用户是否已经登录,如果没有登录,通过跳转的方式,跳转到登录中心。

  2)登录功能

  当进入到登录界面以后,就显示例如输入框,包括用户名和密码,输入完以后,用户点击“登录”按扭就登录微信小程序。

  在这个登录的过程其实是通过查询小程序后台数据,比对用户输入的用户名和密码,看看否一致,如果一致则登录成功,并且,把登录的用户名和密码保存到全局app.js里面的对象里面,这个有点类似网站里面的cookie。

  当然,因为,我们是在演示,没有实际的数据,只能把大体的开发过程,以及主要的代码进行编写开发,其它的过程都怱略,其实,只要是把主要的代码逻辑弄明白了,会员登录功能就理解了。

  其它的就容易了,例如,既然有登录,那么,必定有注册,像注册这种功能就是一个表单组件构成的,然后,把数据向数据库里面插入就行了非常简单,这也是本教程里面不讲的原因,因为,太简单没有什么值得讲的。

  我们主要把用户登录的逻辑搞明白了,再来开发小程序就容易的多了,作为一个开发人员最重要的就是把逻辑搞明白。

开发

  1)创建三个小程序页面,分别是微信小程序首页、登录页、用户中心页面,如下图所示:



  2)编写一个保存用户名和密码信息的对象appData。

  在app.js里面编写的appData对象如下所示:

App({

  appData : {
    userinfo : null,
  }

})

  appData对象里面的userinfo是用来保存已经登录的用户的用户名和密码的,这个类似网站里面的cookie功能。

  3)在用户中心user.js里面判断用户是否登录

  当用户点击“用户中心”后,小程序就会加载“用户中心”页面,然后,自动执行user.js里面的onLoad函数,我们就在这个函数里面编写判断代码。

  这样用户中心这个页面一加载完成以后,就会判断用户是否登录了,代码如下所示:

var app = getApp();
Page({
  data:{
    username:null
  },
  onLoad:function(options){
    if(app.appData.userinfo == null ){
        wx.redirectTo({url:"../login/login"})
    }else{
      this.setData({username:app.appData.userinfo.username})

    }
  }
})


  如果用户没有登录,那么,app.appData.userinfo里面的值就是null,此时就通过小程序的api接口wx.redirectTo定位到登录页面。

  如果是登录了则获取保存在app.appData.userinfo里面的用户名,赋给“用户中心”里面的data里面的用户名username。

  这样在用户中心的user.wxml里面的{{username}}就可以得到登录后的用户名,代码如下:

   <view>
      {{username}}
   </view>


  这样在用户中心就显示出登录用户的名称。

  同样的道理用户的头像等其它信息也是这样处理的,这里不一一讲解了,只要会一个其它都会处理了。

没有登录时的处理:

  上面处理的是登录后的,如果用户还没有登录,则进入到登录界面,例如界面如下图所示:



  在这一步,我们开发时需要处理的两件事情,一件是用户填写好的用户名和密码的获取,二是点击登录后的处理。

  1)获取用户名和密码

  为了获取用户名和密码,我们需要在login.wxml里面的输入框中帮助定两个bindinput事件,代码如下所示:

  <view><input bindinput="usernameInput" /></view>
 <input style="flex-grow:1" password="true"  bindinput="passwordInput"/>


  然后,在login.js里面处理编辑两个函数usernameInput和passwordInput,代码如下所示:


var app = getApp();
Page({
 data:{   
username:null,  
 password:null,
 
},
 
 loginBtnClick:function (){
   app.appData.userinfo = {username:this.data.username,password:this.data.password}
    wx.redirectTo({url:"../user/user"})

  },

 

 usernameInput : function (event){   
    this.setData({username:event.detail.value})

  },

  passwordInput : function (event){
   this.setData({password:event.detail.value})

  }


})

})


  通过这两个函数我们把用户输入的用户名和密码都获取到并且赋给了data里面定义的username和password。

  2)处理点击“登录”按扭后的数据

  当用户点击“登录”后,把数据保存到appData对象里面的userinfo,这个用户再一次进入到“用户中心”时就会获取这里面的保存的数据,然后,显示在用户中心,而不再跳转了。

  要实现这个功能就要在login.wxml里面的例如按扭上面绑定一个事件loginBtnClick,代码如下:

 <button class="login-btn" bindtap="loginBtnClick">登录</button>


  通过这个事件把用户提交的用户名和密码保存到对象app.appData.userinfo里面,这个在上面的代码中已经给出来了。

  这样就完整的实现了微信小程序用户的登录功能了。