微信小程序开发——登录登出示例

WeChat小程序交流（QQ群：769977169）

登录操作：在进入某个页面之前，判断用户信息是否存在，如果存在则进入该页面，如果不存在则跳转到登录页面。

登出操作：点击登出按钮，清除用户信息，同时跳转到登录页面。

效果图

代码示例

1、登录页面A

xxx.wxml

  
  
  登录

xxx.wxjs

说明：

（1）var app = getApp()，用于获取全局变量

（2）inputName函数用于获取输入的帐号

（3）inputPassword函数用于获取密码

（4）loginClick函数用于登录，登录时，判断帐号和密码是否为空，不为空时则进行赋值并进行跳转

var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    name:null,
    password:null,
  },

  inputName: function (even) {
    this.setData({
      name:even.detail.value
    })
  },

  inputPassword: function (even) {
    this.setData({
      password: even.detail.value
    })
  },

  loginClick: function(even) {
    var nameTmp = this.data.name;
    if (nameTmp == null) {
      wx.showToast({
        title: '请输入帐号',
      })
      return;
    }

    var passwordTmp = this.data.password;
    if (passwordTmp == null) {
      wx.showToast({
        title: '请输入密码',
      })
      return;
    }

    var userInfoTmp = { name: nameTmp, password: passwordTmp};
    if (userInfoTmp) {
      app.globalData.userInfo = userInfoTmp;
      wx.redirectTo({
        url: 'user',
      })
    }
  }
}

2、登录成功后页面B

xxx.wxml

  登录成功后
  用户名是：{{userInfo.name}}
  密码是：{{userInfo.password}}
  退出

xxx.wxjs

说明：

（1）var app = getApp()用于获取全局变量

（2）loginoutClick函数用于登出，清空用户信息后，同时进行跳转到登录页面

（3）onload函数加载时，判断是否存在用户信息，存在则显示用户信息，不存在则跳转到登录页面

var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo:null,
  },

  loginoutClick: function(even) {
    userInfo: null;
    wx.redirectTo({
      url: 'login',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var userInfoTmp = app.globalData.userInfo;
    if (userInfoTmp == null) {
      wx.redirectTo({
        url: 'login',
      })
    } else {
      this.setData({
        userInfo: userInfoTmp
      })
    }
  }
}