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

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

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