将会用到view视图容器组件、button按钮组件、image图片组件、input输入框组件、checkbox多项选择器组件、switch开关选择组件、navigator页面连接组件等。
一、新建一个名为form的项目：
二、在app.json文件里添加"pages/login/login""pages/mobile/mobile""pages/company/company"3个文件目录，并删除默认的文件目录以及对应的文件夹：
三、在"pages/login/login"文件里，进行账号密码输入框布局设计，并添加相应的样式：
（login.wxml）
1/*pages/login/login.wxss*/2.content{3margin-top:40px;4}5.account{6display:flex;7flex-direction:row;8padding-left:20px;9padding-top:20px;10padding-bottom:10px;11width:90%;12}13.title{14margin-right:30px;15font-weight:bold;16}17.hr{18border:1pxsolid#cccccc;19opacity:0.2;20width:90%;21margin:0auto;22}23.see{24position:absolute;25right:20px;26}效果图如下：
1.account{2display:flex;3flex-direction:row;4padding-left:20px;5padding-top:20px;6padding-bottom:10px;7width:90%;8}9.title{10margin-right:30px;11font-weight:bold;12}13.hr{14border:1pxsolid#cccccc;15opacity:0.2;16width:90%;17margin:0auto;18}19.see{20position:absolute;21right:20px;22}23.btn{24width:90%;25margin-top:40px;26color:#999999;27}28.operate{29display:flex;30flex-direction:row;31}32.operateview{33margin:0auto;34margin-top:40px;35font-size:14px;36color:#333333;37}38.login{39display:flex;40flex-direction:row;41margin-top:150px;42}43.loginview{44margin:0auto;45}效果图如下：
1//pages/login/login.js2Page({3data:{4disabled:true,5btnstate:"default",6account:"",7password:""8},9accountInput:function(e){10varcontent=e.detail.value;11console.log(content);12if(content!=""){13this.setData({disabled:false,btnstate:"primary",account:content});14}15},16pwdBlur:function(e){17varpassword=e.detail.value;18if(password!=""){19this.setData({password:password});20}21}22})效果如下：
Ⅱ、手机号注册设计
在手机号注册中，需要设计输入框用来输入手机号，设计同意注册以及进行下一步按钮。
六、在"pages/mobile/mobile"文件中，进行手机号输入框布局设计，并添加相应样式：
（mobile.wxml）
12
1/*pages/mobile/mobile.wxss*/2.content{3width:100%;4height:600px;5background-color:#f2f2f2;6}7.hr{8padding-top:20px;9}10.numbg{11border:1pxsolid#cccccc;12width:90%;13margin:0auto;14background-color:#ffffff;15border-radius:5px;16display:flex;17flex-direction:row;18height:50px;19}20.numbgview{21margin-left:20px;22margin-top:14px;23}效果图如下：
七、在"pages/mobile/mobile"文件中，设计注册协议和下一步按钮操作，并添加相应的样式：
12
1/*pages/mobile/mobile.wxss*/2.content{3width:100%;4height:600px;5background-color:#f2f2f2;6}7.hr{8padding-top:20px;9}10.numbg{11border:1pxsolid#cccccc;12width:90%;13margin:0auto;14background-color:#ffffff;15border-radius:5px;16display:flex;17flex-direction:row;18height:50px;19}20.numbgview{21margin-left:20px;22margin-top:14px;23}24.xieyi{25margin-top:15px;26margin-left:15px;27}28.agree{29font-size:13px;30margin-left:5px;31color:#666666;32}33.opinion{34font-size:13px;35color:#000000;36font-weight:bold;37}38.btn{39width:90%;40margin-top:30px;41}效果：
八、在"pages/mobile/mobile"文件中，添加mobileblur事件，如果输入手机号，下一步按钮变为可用状态：
1//pages/mobile/mobile.js2Page({3data:{4disabled:true,5btnstate:"default",6mobile:""7},8mobileblur:function(e){9varcontent=e.detail.value;10if(content!=""){11this.setData({disabled:false,btnstate:"primary",account:content});12}13else{14this.setData({disabled:true,btnstate:"default",mobile:""});15}16}17})效果图：
Ⅲ、企业用户注册设计
在企业用户注册中，有6个表单项：用户名、密码、企业全称、联系人姓名、手机号和短信验证码。还有一个注册按钮和同意注册协议。
九、在"page/company/company"文件中，进行用户名、密码、企业全称、联系人姓名、手机号、短信验证码表单项布局设计，并添加相应的样式：
（company.wxml）
十、在"pages/company/company"文件中，设计注册按钮和同意注册协议，并添加相应的样式：
十一、当输入用户名后，注册按钮即变为可用状态，同时将表单内容提交到company.js文件后台里，保存到缓存界面：