51 Mordern技术站

微信小程序开发之 - 会员管理（登录）

2019年01月22日 19:51

原创作品，转载时请务必以超链接形式标明文章原始出处，否则将追究法律责任。

最近搞了一下微信小程序，其实挺简单的。首先我们需要下载一个微信开发者工具，本地测试阶段的时候我们也不需要注册微信appID。先看图。

看到没，这个就是登录界面。输入用户名和密码，调用api登录。我们先看一下开发环境，微信开发者工具。

其实这个工具做的挺烂的，刚开始的时候复制粘贴都不支持，让人大跌眼镜。后来重启了几回，才没有这种现象了。

今天我们就来看一下登录界面的代码实现。

<import src="../../components/customtoast/customtoast.wxml" />
<template is="toast" data="{{ ..._toast_ }}" />
<view class="container2">
<view class="login-icon">
<image class="login-img" src="../../images/loginLog.jpg"></image>
</view>
<form bindsubmit="doLogin" report-submit='true'>
<view class="login-from">
<!--手机号码-->
<view class="inputView">
<image class="nameImage" src="../../images/zhanghao.png"></image>
<label class="loginLab">用户名：</label>
<input class="inputText" placeholder='请输入手机号' value='{{userNo}}' type='text' bindinput="userNoChanged" maxlength='20' />
</view>
<view class="line"></view>
<view class="inputView">
<image class="nameImage" src="../../images/yanzhengma.png"></image>
<span class="loginLab">密
<text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;&nbsp;</text>码：</span>
<input class="inputText" placeholder='请输入密码' type='password' value='{{userPassword}}' bindinput="userPasswordChanged" maxlength='50' />
</view>

<view class="loginBtnView">
<button class="login-btn" form-type="submit">登录</button>
</view>
</view>
</form>
</view>
<loading hidden="{{submitTipHidden}}">
提交中...
</loading>

在这里，我们引入一个自定义toast组件。因为微信的toast组件实在是太桑眼了，自带一个对号。

其实看这个代码有点像vue的绑定，其实就是一些绑定语法。页面主要是绑定用户名和密码两个输入框，不过让我难过的是，双向绑定必须通过bindinput方法实现，看一下js逻辑实现部分。

var appInstance = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userNo: '', //手机号码
    userPassword: '', //密码
    code: null,
    submitTipHidden: true, //提交提醒是否隐藏标识
    isSubmited: false, //是不是已经提交标识
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    wx.getStorage({
      key: 'customerInfo',
      success: function(res) {
        if (res.data && res.data.UserNo) {
          wx.redirectTo({
            url: '../index/index'
          });
        }
      }
    });
    //toast组件实例
    new appInstance.ToastPannel();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /** 
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.setData({
      currentDate: appInstance.Util.formatTime(new Date())
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },

  /**
   * 检查手机号码
   */
  checkUserNo: function(userNo) {
    if (!/^1[34578]\d{9}$/.test(userNo)) {
      return false;
    }
    return true;
  },

  /**
   * 登录
   */
  doLogin: function(e) {
    var _this = this;
    //检查手机号码
    if (!_this.data.userNo) {
      return this.show('请输入用户名');
    }

    if (!this.checkUserNo(_this.data.userNo)) {
      return this.show('用户名必须为手机号');
    }
    //检查密码是否为空
    if (!_this.data.userPassword) {
      return this.show('密码不能为空');
    }

    _this.setData({
      submitTipHidden: false,
      isSubmited: true,
    });

    //调用接口wx.login()获取临时登录凭证（code）
    wx.login({
      success: function(callback) {
        if (callback.code) {
          _this.data.code = callback.code;
          let requestUrl = appInstance.AppConstant.OAUTH2_ACCESSTOKEN_URL +
            `&username=${_this.data.userNo}&password=${_this.data.userPassword}`;

          //调用api
          appInstance.HTTP.wxRequest({
            url: requestUrl,
            method: 'POST',
            data: {
              grant_type: "password",
              username: _this.data.userNo,
              password: _this.data.userPassword,
              client_id: appInstance.AppConstant.CLIENTID
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            }
          }).then(res => {
            _this.setData({
              submitTipHidden: true,
              isSubmited: false
            });
            if (res && !res.error) {
              appInstance.Util.setStorage("tokenInfo", res);
              _this.doUserLogin(res.access_token);
            } else {
              _this.show("用户名或者密码不正确");
            }
          }).catch(err => {
            _this.setData({
              submitTipHidden: true,
              isSubmited: false
            });
            return _this.show("发生异常，App认证失败");
          })
        } else {
          _this.setData({
            submitTipHidden: true,
            isSubmited: false
          });
          return _this.show("微信身份验证失败");
        }
      }
    });
  },
  doUserLogin: function(access_token) {
    var _this = this;
    _this.setData({
      submitTipHidden: false,
      isSubmited: true,
    });

    appInstance.HTTP.wxRequest({
      url: appInstance.AppConstant.CUSTOMERURL,
      method: 'GET',
      data: {
        userNo: _this.data.userNo,
        password: _this.data.userPassword
      },
      header: {
        'content-type': 'application/json',
        'authorization': 'bearer ' + access_token
      }
    }).then(res => {
      _this.setData({
        submitTipHidden: true,
        isSubmited: false
      });

      appInstance.Util.setStorage('customerInfo', res);
      wx.redirectTo({
        url: '../index/index'
      });
    })
  },
  userNoChanged(event) {
    this.data.userNo = event.detail.value;
  },
  userPasswordChanged(event) {
    this.data.userPassword = event.detail.value;
  },
})

关于刚才的绑定，有userNoChanged，需要我们手动赋值，真的是让人无语。点击登录按钮以后，我们用用户名和密码去请求access_token和refresh_token。关于token的获取请参阅我的另一篇文章http://www.51mordern.com/tech_article/page/Njg=

好的，获取到token以后，我们就拿着access_token去调用api获取user信息。获取到user信息以后，我们把它放到本地存储wxStorage中，这个storage也许就是localStorage。登录成功后，就跳转至主页。