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

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

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

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

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

• 創(chuàng)建一個(gè)新項(xiàng)目刪除其中初始化的一些無(wú)用的項(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è)頁(yè)面，其實(shí)很多元素我也抄的網(wǎng)上的，但是要理解這個(gè)設(shè)計(jì)的思路很理念，別搬磚都不知道去×××，那就尷尬了。

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

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

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

廣告

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