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

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴(kuò)展宣傳的重要窗口，一個合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，成都創(chuàng)新互聯(lián)面向各種領(lǐng)域：邊坡防護(hù)網(wǎng)等成都網(wǎng)站設(shè)計、成都全網(wǎng)營銷解決方案、網(wǎng)站設(shè)計等建站排名服務(wù)。

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

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

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

• 創(chuà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'>
????????????<!--賬號-->
????????????<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("跳轉(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：這個就是簡單的注冊頁面，其實很多元素我也抄的網(wǎng)上的，但是要理解這個設(shè)計的思路很理念，別搬磚都不知道去×××，那就尷尬了。

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

網(wǎng)站題目：「小程序JAVA實戰(zhàn)」小程序注冊界面的開發(fā)（29）
地址分享：http://chinadenli.net/article44/ppsiee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站營銷、虛擬主機(jī)、微信公眾號、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)