⼩程序之如何实现登录注册功能
初步分析，程序⼀共有两个界⾯即：登录界⾯和注册界⾯。
但是注册的时候由于不同的注册⽅式应该有不同的界⾯⽀持，故在本程序中我们要写两个注册界⾯和⼀个登录界⾯，两个注册界⾯分别位⼿机注册界⾯和企业⽤户注册界⾯。
在⼩程序中，每⼀个界⾯的⽂件夹下有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-
/></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-
/></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>
htmlborder<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:1pxsolid#cccccc;
width:90%;
margin:0auto;
}
.btn{
width:90%;
margin-top:40px; color:grey;
}
.operate{
display: flex;
flex-direction: row;
}
.operateview{
margin:0auto;
margin-top:40px;
font-size :14px; color:#333333;
}
login.js：
// pages/login/login.js Page({
/**
* 页⾯的初始数据
*/
data: {
disabled:true, btnstate:"default", account:"",
},
accountInput:function(e){
varcontent = e.detail.value;
if(content!=''){
this.setData({disabled:false,btnstate:"primary",account:content}); }else{
this.setData({disabled:true,btnstate:"default"});
}
},
pwdBlur:function(e){
varpassword= e.detail.value;
if(password!=''){
this.setData({password:passwd});
}
}
})
最总，表现结果如图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。