微信小程序之如何实现登录注册功能

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

但是注册的时候由于不同的注册方式应该有不同的界面支持，故在本程序中我们要写两个注册界面和一个登录界面，两个注册界面分别位手机注册界面和企业用户注册界面。

在微信小程序中，每一个界面的文件夹下有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="title">account</view>

</view>

<view class="title">passwd</view>

</view>

<button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">login</button>

<view><navigator url="../mobile/mobile">手机快速注册</navigator></view>

<view><navigator url="../company/company">企业用户注册</navigator></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;

opacity:0.2;

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:"",

password:""

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});

}

})

最总，表现结果如图：

2.手机注册界面

mobile.wxml:

</view>

<text class="option">xx用户注册协议</text>

</view>

mobile.wxss:

.content{

width:100%;

height:600px;

background-color:#f2f2f2;

}

.hr{

padding-top:20px;

}

.numbg{

border:1pxsilid grey;

width:90%;

margin:0auto;

background: white;

border-radius:5px;

display: flex;

flex-direction: row;

height:50px;

}

.numbgview{

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){

varcontent = e.detail.value;

if(content!=''){

this.setData({

disabled:false,

btnstate:"primary",

mobile:content

});

}else{

this.setData({

disabled:true,

btnstate:"default",

mobile:""

});

}

})

最终，表现结果如图：

3.企业用户注册界面

company.wxml：

</view>

</view>

</view>

</view>

</view>

<view class="code">发送验证码</view>

</view>

</view>

<text class="agree">注册则视为同意</text><text class="opinion">《xx用户注册协议》</text>

</view>

</form>

company.wxss：

.content{

width:100%;

height:700px;

background-color:#f2f2f2;

}

.hr{

padding-top:40px;

}

.item{

margin:0auto;

border:1pxsolid#cccccc;

height:40px;

width:90%;

border-radius:3px;

background-color:#ffffff;

margin-bottom:15px;

}

.iteminput{

height:40px;

line-height:40px;

margin-left:10px;

}

.holder{

font-size:14px;

color:#999999;

}

.flex{

display:flex;

flex-direction: row;

}

.flexinput{

width:300px;

}

.itemswitch{

margin-top:5px;

margin-right:5px;

}

.mobileInfo{

display:flex;

flex-direction: row;

}

.mobile{

margin:0auto;

border:1pxsolid#cccccc;

height:40px;

width:50%;

border-radius:3px;

background-color:#ffffff;

margin-bottom:15px;

display: flex;

flex-direction: row;

margin-left:5%;

}

.mobileinput{

margin-top:8px;

margin-left:10px;

}

.code{

border:1pxsolid#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){

varcontent = e.detail.value;

if(content!=""){

this.setData({disabled:false,btnstate:"primary"});

}else{

this.setData({disabled:true,btnstate:"default"});

}

formSubmit:function(e){

console.log(e);

varuser =newObject();

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'

})

}

})

}

})

最终，表现结果如图：

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,734评论 6赞 505
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,931评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,133评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,532评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,585评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,462评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,262评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,153评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,587评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,792评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,919评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,635评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,237评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,855评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,983评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,048评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,864评论 2赞 354

微信小程序之如何实现登录注册功能

推荐阅读更多精彩内容