「小程序JAVA實(shí)戰(zhàn)」小程序注冊(cè)界面的開發(fā)（29）

小程序基本所有的常用組件已經(jīng)了解的差不多了，基本可以實(shí)戰(zhàn)了，本次就開始小程序的真正實(shí)戰(zhàn)，完成小程序的一個(gè)注冊(cè)頁面的設(shè)計(jì)。源碼：https://github.com/limingios/wxProgram.git 中的No.15

開發(fā)最重要的就是實(shí)操！

開發(fā)人員很少人懂美工

我就懂css 其實(shí)也設(shè)計(jì)不出來什么好看的，在網(wǎng)上找了個(gè)參照物，自己自己模仿這搞了下

• 創(chuàng)建一個(gè)新項(xiàng)目刪除其中初始化的一些無用的項(xiàng)目。

userRegister.wxml

<view>
????<view?class="login-icon">
????????<image?class="login-img"?src="../../resource/images/dsp.jpg"></image>
????</view>
????<view?class="login-from">
????????<form?bindsubmit='doRegist'>
????????????<!--賬號(hào)-->
????????????<view?class="inputView">
????????????????<image?class="nameImage"?src="../../resource/images/username.png"></image>
????????????????<label?class="loginLabel">賬號(hào)</label>
????????????????<input?name="username"?type="text"?class="inputText"?placeholder="請(qǐng)輸入賬號(hào)"/>
????????????</view>

????????????<view?class="line"></view>

????????????<!--密碼-->
????????????<view?class="inputView">
????????????????<image?class="keyImage"?src="../../resource/images/password.png"></image>
????????????????<label?class="loginLabel">密碼</label>
????????????????<input?name="password"?type="text"?class="inputText"?password="{{true}}"?placeholder="請(qǐng)輸入密碼"/>
????????????</view>

????????????<!--按鈕-->
????????????<view>
????????????????<button?class="loginBtn"?type="primary"?form-type='submit'>注冊(cè)</button>
????????????</view>

????????????<view>
????????????????<button?class="goLoginBtn"?type="warn"?bindtap="goLoginPage">返回登錄</button>
????????????</view>
????????</form>
????</view>
</view>

userRegister.js

const?app?=?getApp()

Page({
????data:?{

????},

????doRegist:?function(e)?{
??????var?me?=?this;
??????var?formObject?=?e.detail.value;
??????var?username?=?formObject.username;
??????var?password?=?formObject.password;

??????//?簡(jiǎn)單驗(yàn)證
??????if?(username.length?==?0?||?password.length?==?0)?{
????????wx.showToast({
??????????title:?'用戶名或密碼不能為空',
??????????icon:?'none',
??????????duration:?3000
????????})
??????}
????},
????goLoginPage:function(e){
??????console.log("跳轉(zhuǎn)到登錄");
????}
})

page?{
????background-color:?whitesmoke;
}

.login-img?{
????width:?750rpx;
}

/*表單內(nèi)容*/
.inputView?{
????background-color:?white;
????line-height:?45px;
}

/*輸入框*/
.nameImage,?.keyImage?{
????margin-left:?22px;
????width:?20px;
????height:?20px;
}

.loginLabel?{
????margin:?15px?15px?15px?10px;
????color:?gray;
????font-size:?15px;
}

.inputText?{
????float:?right;
????text-align:?right;
????margin-right:?22px;
????margin-top:?11px;
????font-size:?15px;
}

.line?{
????width:?100%;
????height:?1px;
????background-color:?gainsboro;
????margin-top:?1px;
}

/*按鈕*/
.loginBtn?{
????width:?80%;
????margin-top:?35px;
}

.goLoginBtn?{
????width:?80%;
????margin-top:?15px;
}

PS：這個(gè)就是簡(jiǎn)單的注冊(cè)頁面，其實(shí)很多元素我也抄的網(wǎng)上的，但是要理解這個(gè)設(shè)計(jì)的思路很理念，別搬磚都不知道去×××，那就尷尬了。

>>原創(chuàng)文章，歡迎轉(zhuǎn)載。轉(zhuǎn)載請(qǐng)注明：轉(zhuǎn)載自IT人故事會(huì)，謝謝！
>>原文鏈接地址：「小程序JAVA實(shí)戰(zhàn)」小程序注冊(cè)界面的開發(fā)（29）