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

但是注册的时候由于不同的注册方式应该有不同的界面支持，故在本程序中我们要写两个注册界面和一个登录界面，两个注册界面分别位手机注册界面和企业用户注册界面。 在微信小程序中，每一个界面的文件夹下有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保存后，会自动生成各个页面的文件夹及文件夹下各个文件如图：

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

1. 登录界面 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>

login.wxss:

/* 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;}

login.js

// pages/login/login.jsPage({

  /**   * 页面的初始数据   */  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.jsPage({

  /**   * 页面的初始数据   */  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.jsPage({

  /**   * 页面的初始数据   */  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'        })      }    })  }})

最终，表现结果如图：