「小程序JAVA實戰」小程序注冊界面的開發（29）

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

開發最重要的就是實操！

開發人員很少人懂美工

我就懂css 其實也設計不出來什么好看的，在網上找了個參照物，自己自己模仿這搞了下

• 創建一個新項目刪除其中初始化的一些無用的項目。

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'>
????????????<!--賬號-->
????????????<view?class="inputView">
????????????????<image?class="nameImage"?src="../../resource/images/username.png"></image>
????????????????<label?class="loginLabel">賬號</label>
????????????????<input?name="username"?type="text"?class="inputText"?placeholder="請輸入賬號"/>
????????????</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="請輸入密碼"/>
????????????</view>

????????????<!--按鈕-->
????????????<view>
????????????????<button?class="loginBtn"?type="primary"?form-type='submit'>注冊</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;

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

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

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

/*表單內容*/
.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：這個就是簡單的注冊頁面，其實很多元素我也抄的網上的，但是要理解這個設計的思路很理念，別搬磚都不知道去×××，那就尷尬了。

>>原創文章，歡迎轉載。轉載請注明：轉載自IT人故事會，謝謝！
>>原文鏈接地址：「小程序JAVA實戰」小程序注冊界面的開發（29）