微信小程序之登录注册界面的实现

初步分析，程序一共有两个界面即：登录界面和注册界面。

但是注册的时候由于不同的注册方式应该有不同的界面支持，故在本程序中我们要写两个注册界面和一个登录界面，两个注册界面分别位手机注册界面和企业用户注册界面。在微信小程序中，每一个界面的文件夹下有4个文件，如图：

login为登录界面各文件存储的文件夹，其下有四个文件，从其后缀名可以看出其与web开发中的各种类型文件的相似之处。

wxml文件主要表示界面上有那些东西；
wxss文件则对wxml中的文件的样式，颜色等进行修饰；
js文件则主要是负责一些业务逻辑的处理，（可以粗浅的理解为存储定义一些数据和函数）;
json文件则是记录一些页面的设置。了解了这些后，我们便可以开始着手代码的编写了。

首先，新建一个项目。项目整体结构如图：

在app.json中添加我们要完成的页面，删除我们不需要的页面。修改后的app.json如下：

{
  "pages":[
    "pages/login/login",
    "pages/mobile/mobile",
    "pages/company/company"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

如上，pages中的内容即为最终成品中所含的页面。本小程序含有login,mobile和company三个页面，用来实现登录，手机注册和企业用户注册三个功能。编辑完成app.json文件后按ctrl+s保存后，会自动生成各个页面的文件夹及文件夹下各个文件如图：

接下来我们只需要逐个完成其中的功能和页面就好了。

登录界面 login.wxml

<view class="content">
  <view class="account">
    <view class="title">account</view>
    <view class="number"><input bindinput="accountInput" placeholder="username/email/phone" placeholder-style="color:#999999;"/></view>
  </view>
  <view class="hr"></view>
  <view class="account">
    <view class="title">passwd</view>
    <view class="number"><input bindiblur="pwdBlur" placeholder="please input password" password placeholder-style="color:#999999;"/></view>
  </view>
  <view class="hr"></view>
  <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">login</button>
  <view class="operate">
      <view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
      <view><navigator url="../company/company">企业用户注册</navigator></view>
      <view>找回密码</view>
  </view>
</view>

/* pages/login/login.wxss */
.content{
  margin-top: 40px;
}
.account{
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
  width:90%;
}
.title{
  margin-right: 30px;
  font-weight: bold;
}
.hr{
  border:1px solid #cccccc;
  opacity: 0.2;
  width:90%;
  margin:0 auto;
}
.btn{
  width: 90%;
  margin-top: 40px;
  color:grey;
}
.operate{
  display: flex;
  flex-direction: row;
}
.operate view{
  margin:0 auto;
  margin-top: 40px;
  font-size : 14px;
  color:#333333;
}

// pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    disabled:true,
    btnstate:"default",
    account:"",
    password:""
  },

  accountInput:function(e){
    var content = e.detail.value;
    if(content!=''){
      this.setData({disabled:false,btnstate:"primary",account:content});
    }else{
      this.setData({disabled:true,btnstate:"default"});
    }
  },
  pwdBlur:function(e){
    var password= e.detail.value;
    if(password!=''){
      this.setData({password:passwd});
    }
  }
})

最总，表现结果如图：

2.手机注册界面

mobile.wxml:

<view class="content">
   <view class="hr"></view>
   <view class="numbg">
     <view>+86</view>
     <view><input placeholder="please input phone number" maxlength="11" bindblur="mobileblur"/></view>
   </view>
   <view class="xieyi">
     <icon type="success" color="red" size="18"></icon>
     <text class="agree">同意</text>
     <text class="option">xx用户注册协议</text>
   </view>
</view>

mobile.wxss:

.content{
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
}
.hr{
  padding-top: 20px;
}
.numbg{
  border:1px silid grey;
  width:90%;
  margin:0 auto;
  background: white;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  height: 50px;
}
.numbg view{
  margin-left: 20px;
  margin-top: 14px;
}
.xieyi{
  margin-top: 15px;
  margin-left: 15px;
}
.agree{
  font-size:13px;
  margin-left: 5px;
  color: #666666;
}
.option{
  font-size: 13px;
  color: #000000;
  font-weight: bold;
}
.btn{
  width: 90%;
  margin-top: 30px;
}

mobile.js

// pages/mobile/mobile.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    disabled:true,
    btnstate:"default",
    mobile:""
  },
  mobileblur:function(e){
    var content = e.detail.value;
    if(content!=''){
      this.setData({
        disabled:false,
        btnstate:"primary",
        mobile:content
      });
    }else{
      this.setData({
        disabled:true,
        btnstate:"default",
        mobile:""
      });
    }
  }
})

最终，表现结果如图：

3.企业用户注册界面

company.wxml

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="content">
    <view class="hr"></view>
    <view class="item">
      <input type="text" name="loginName" placeholder="请设置4-20位用户名" placeholder-class="holder" bindblur="accountblur"/>
    </view>
    <view class="item flex">
      <input type="text" password name="password" placeholder="请设置6-20位登录密码" placeholder-class="holder"/>
      <switch type="switch" name="switch"/>
    </view>
    <view class="item">
      <input type = "text" name="company" placeholder="请填写工商局注册名称" placeholder-class="holder"/>
    </view>
    <view class="item">
      <input type="text" name="userName" placeholder="联系人姓名" placeholder-class="holder"/>
    </view>
    <view class="mobileInfo">
      <view class="mobile">
        <input type="text" name="mobile" placeholder="请输入手机号" placeholder-class="holder"/>
      </view>
      <view class="code">发送验证码</view>
    </view>
    <view class="item">
      <input type="text" name="code" placeholder="短信验证码" placeholder-class="holder"/>
    </view>
    <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" form-type="submit">注册</button>
    <view class="xieyi">
      <text class="agree">注册则视为同意</text><text class="opinion">《xx用户注册协议》</text>
    </view>
  </view>
</form>

company.wxss

.content{
  width: 100%;
  height: 700px;
  background-color: #f2f2f2;
}
.hr{
  padding-top: 40px;
}
.item{
  margin:0 auto;
  border:1px solid #cccccc;
  height:40px;
  width:90%;
  border-radius:3px;
  background-color: #ffffff;
  margin-bottom: 15px;
}
.item input{
  height:40px;
  line-height: 40px;
  margin-left: 10px;
}
.holder{
  font-size: 14px;
  color:#999999;
}
.flex{
  display:flex;
  flex-direction: row;
}
.flex input{
  width:300px;
}
.item switch{
  margin-top: 5px;
  margin-right: 5px;
}
.mobileInfo{
  display:flex;
  flex-direction: row;
}
.mobile{
  margin:0 auto;
  border:1px solid #cccccc;
  height:40px;
  width:50%;
  border-radius: 3px;
  background-color: #ffffff;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  margin-left: 5%;
}
.mobile input{
  margin-top: 8px;
  margin-left: 10px;
}
.code{
  border: 1px solid #cccccc;
  height: 40px;
  width:35%;
  background-color: #EFEEEC;
  border-radius:3px;
  text-align: center;
  margin-left: 10px;
  line-height: 40px;
  color: #999999;
  font-size: 15px;
  margin-bottom: 15px;
  margin-right: 5%;
}
.btn{
  width: 90%;
  color: #999999;
  margin-top: 40px;
}
.xieyi{
  margin-top: 15px;
  margin-left:15px;
  font-size: 13px;
}
.agree{
  margin-left: 5px;
  columns: #666666;
}
.opinion{
  color:red;
  font-weight: bold;
  text-decoration: underline;
}

company.js

// pages/company/company.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    disabled:true,
    btnstate:"default"
  },
  accountblur:function(e){
    var content = e.detail.value;
    if(content!=""){
      this.setData({disabled:false,btnstate:"primary"});
    }else{
      this.setData({disabled:true,btnstate:"default"});
    }
  },
  formSubmit:function(e){
    console.log(e);
    var user = new Object();
    user.account = e.detail.value.loginName;
    user.password = e.detail.value.password;
    user.company = e.detail.value.company;
    user.userName = e.detail.value.userName;
    usesr.code = e.detail.value.code;
    user.mobile = e.detail.value.mobile;
    user.switch = e.detail.value.switch;
    wx.setStorageSync('user', user);
    wx.showToast({
      title: '注册成功',
      inco:"success",
      duration:1000,
      success:function(){
        wx.navigateTo({
          url: '../login/login'
        })
      }
    })
  }
})