微信小程序注册、登录功能

登录与注册相似，就只分析注册了
github地址:https://github.com/axlsdtkl/wechat-mini/tree/master/treehole

项目结构：

enroll.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#F2F2F2",
  "navigationBarTitleText": "洞主注册",
  "navigationBarTextStyle": "black"
}

enroll.wxml

<!--pages/enroll/enroll.wxml-->
<view class='background'>
	<view class='first'>
		<input id='name' placeholder='用户名' placeholder-class="plas" class='inputs' tyep='text' bindinput='usernameInput'/>
	</view>
	<view class='second'>
		<input id='phonenumber' placeholder='手机号' placeholder-class="plas" class='inputs' type='number' bindinput='phonenumberInput'/>
	</view>
	<view class='second'>
		<input id='psw' placeholder='登录密码' placeholder-class="plas" class='inputs' type='password' bindinput='passwordInput'/>
	</view>
	<view class='second'>
		<input id='pswack' placeholder='确认密码' placeholder-class="plas" class='inputs' type='password' bindinput='passwordInputAck'/>
	</view>
	<view id='btn' class='click' bindtap='regist'>注册</view>
	<view class='cha' bindtap="signin">
		<text class='no'>已有账号，点我登录</text>
	</view>
</view>

enroll.wxss

/* pages/enroll/enroll.wxss */
page{
  left:0rpx;
  right:0rpx;
  background-color:white;
}
.first{
  width:90%;
  height:100rpx;
  margin-top:80rpx;
  margin-left:5%;
  margin-right:5%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  background-color:#F2F2F2;
}
.plas{
  font-size:30rpx;
  color:#CCCCCC;
}
.inputs{
  line-height:100rpx;
  font-size:30rpx;
  color:#000;
  margin:auto;
  margin-left:20rpx;
  width:100%;
}
.second{
  width:90%;
  height:100rpx;
  margin-top:30rpx;
  margin-left:5%;
  margin-right:5%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  background-color:#F2F2F2;
}

.click{
  width:90%;
  height:100rpx;
  line-height:100rpx;
  margin:auto;
  margin-top:100rpx;
  margin-left:5%;
  margin-right:5%;
  background-color:#F76968;
  text-align:center;
  color:white;
  font-size:33rpx;
}

.cha{
  width:90%;
  height:50rpx;
  margin:auto;
  margin-top:30rpx;
  margin-left:5%;
  margin-right:5%;
}

.no{
  color:black;
  font-size:28rpx;
  margin-left:15rpx;
  font-family:PingFangSC-regular;
}

enroll.js

// pages/enroll/enroll.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username: "",
    phonenumber: "",
    password: "",
    passwordack: "",
  },
  signin: function (e) {
    wx.redirectTo({//这里进行页面跳转功能
      url: '/pages/login/login'
    })
  },
  regist: function (e) {
    var that = this
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    if (that.data.username == '') {
      wx.showModal({
        title: '提示！',
        content: '请输入用户名！',
        showCancel: false,
        success(res) { }
      })
    } else if (that.data.phonenumber == '') {
      wx.showModal({
        title: '提示！',
        content: '请输入手机号！',
        showCancel: false,
        success(res) { }
      })
    } else if (that.data.phonenumber.length != 11) {
      wx.showModal({
        title: '提示！',
        content: '手机号长度有误，请重新输入！',
        showCancel: false,
        success(res) { }
      })
    } else if (!myreg.test(that.data.phonenumber)) {
      wx.showModal({
        title: '提示！',
        content: '请输入正确的手机号码！',
        showCancel: false,
        success(res) { }
      })
    } else if (that.data.password == '') {
      wx.showModal({
        title: '提示！',
        content: '请输入密码！',
        showCancel: false,
        success(res) { }
      })
    } else if (that.data.passwordack == '') {
      wx.showModal({
        title: '提示！',
        content: '请输入确认密码！',
        showCancel: false,
        success(res) { }
      })
    }else if (that.data.password !=that.data.passwordack) {
      wx.showModal({
        title: '提示！',
        content: '两次输入密码不一致！',
        showCancel: false,
        success(res) { }
      })
    } else {
      console.log("success")
    }
  },
  usernameInput: function (e) {
    this.data.username = e.detail.value
  },
  phonenumberInput: function (e) {
    this.data.phonenumber = e.detail.value
  },
  passwordInput: function (e) {
    this.data.password = e.detail.value
  },
  passwordInputAck: function (e) {
    this.data.passwordack = e.detail.value
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

登录功能同注册，基本一样，更为简单