激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

答題積分小程序云開發(fā)實(shí)戰(zhàn)-界面交互篇:注冊(cè)登錄布局樣式與交互

發(fā)布時(shí)間：2024-01-18 20:26:00 瀏覽量：192次

微信小程序云開發(fā)實(shí)戰(zhàn)-答題積分賽小程序

界面交互篇：注冊(cè)登錄頁(yè)布局樣式與邏輯交互開發(fā)

寫在前面-開發(fā)調(diào)試小技巧

模擬器通常默認(rèn)展示的頁(yè)面是首頁(yè)，那么如果我們想切換到其他頁(yè)面呢，那怎么辦？我這里教給初學(xué)者三種方式，方便大家在搭建頁(yè)面過程中，進(jìn)行開發(fā)調(diào)試。

點(diǎn)擊事件跳轉(zhuǎn)

給頁(yè)面按鈕添加一個(gè)點(diǎn)擊事件，然后在js中注冊(cè)一個(gè)事件監(jiān)聽處理函數(shù)，里面是執(zhí)行跳轉(zhuǎn)至注冊(cè)登錄頁(yè)的函數(shù)體。這樣，只要點(diǎn)擊按鈕就能跳轉(zhuǎn)到注冊(cè)登錄頁(yè)了。

<button bindtap="goToLogin">去注冊(cè)登錄</button>
goToLogin() {
    wx.navigateTo({
    		url: '../login/login'
    })
}

pages第一項(xiàng)

app.json的pages配置項(xiàng)，哪個(gè)放置在第一項(xiàng)，就默認(rèn)展示哪個(gè)頁(yè)面。


我們可以在開發(fā)調(diào)試階段，把當(dāng)前正在開發(fā)搭建的頁(yè)面的路徑優(yōu)先放在該配置的第一項(xiàng)。這樣，每次編譯預(yù)覽的時(shí)候，模擬器總是顯示該頁(yè)面。不需要通過點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面那么麻煩。


添加編譯模式

還有一種方式是，添加編譯模式。


填寫模式名稱和啟動(dòng)頁(yè)面這兩項(xiàng)，然后點(diǎn)擊確定。


然后點(diǎn)一下編譯按鈕。


后續(xù)即使修改文件后保存，自動(dòng)編譯依舊是保持在當(dāng)前頁(yè)面。


注冊(cè)登錄頁(yè)效果圖


注冊(cè)登錄布局與樣式實(shí)現(xiàn)

這個(gè)注冊(cè)登錄頁(yè)的頁(yè)面布局，是比較簡(jiǎn)單明了的，十幾行代碼就能實(shí)現(xiàn)了。我曾做過消防安全知識(shí)答題、網(wǎng)絡(luò)安全知識(shí)答題、安全生產(chǎn)知識(shí)答題等，都是使用這種注冊(cè)登錄方式實(shí)現(xiàn)的。

頁(yè)面布局

在login.wxml中，編寫布局代碼：

<view class="page-con">
    <view class="page">
        <view class="avatar-wrapper-box text-center padding-top-xl">
            <button class="avatar-wrapper">
                <image class="avatar" src="/images/0.png" mode="widthFix"></image>
            </button>
        </view>

        <view class="weui-input-box">
            <view class="solids padding margin-top">
                <input type="nickname" class="weui-input" placeholder="請(qǐng)輸入昵稱" maxlength="12" />
            </view>
        </view>

        <view class="padding margin-top-xl">
            <button class='cu-btn block round lg bg-blue'> 登 錄 </button>
        </view>
    </view>
</view>

頁(yè)面樣式

在login.wxss中，編寫樣式代碼：


page{
		background-color: #fff;
}

.page-con {
		padding: 20rpx;
}
.page {
    padding: 100rpx 20rpx;
    border-radius: 10rpx;
}
.weui-input-box {
		padding: 50rpx 20rpx;
}
.weui-input-box .solids {
		border-radius: 100rpx;
}
.avatar-wrapper-box .avatar-wrapper {
    display: inline-block;
    width: 100rpx;
    height: 100rpx;
    padding: 0;
    margin: 0;
    border-radius: 50rpx;
    overflow: hidden;
}

獲取頭像昵稱邏輯交互實(shí)現(xiàn)

當(dāng)小程序需要讓用戶完善個(gè)人資料時(shí)，可以通過微信提供的頭像昵稱填寫能力快速完善。注意：從基礎(chǔ)庫(kù)2.24.4版本起。

在【詳情】-【本地設(shè)置】-【調(diào)試基礎(chǔ)庫(kù)】這里，選擇合適的基礎(chǔ)庫(kù)，這里要求2.24.4以上，我建議選高一點(diǎn)。


獲取頭像組件button

需要將 button 組件 open-type 的值設(shè)置為 chooseAvatar，當(dāng)用戶選擇需要使用的頭像之后，可以通過 bindchooseavatar 事件回調(diào)獲取到頭像信息的臨時(shí)路徑。

在login.wxml中，編寫代碼：

<button
    class="avatar-wrapper"
    open-type="chooseAvatar"
    bind:chooseavatar="onChooseAvatar">
        <image
            class="avatar"
            src="{{avatarUrl}}"
            mode="widthFix">
        </image>
</button>

在login.js中，編寫代碼：

onChooseAvatar(e) {
    const { avatarUrl } = e.detail;
    // 將獲取到頭像信息的臨時(shí)路徑，渲染到頁(yè)面展示
    this.setData({
    		avatarUrl
    });
}

保存后，可以在模擬器點(diǎn)擊操作預(yù)覽效果或者手機(jī)微信掃碼后操作預(yù)覽。


獲取昵稱組件input

需要將 input 組件 type 的值設(shè)置為 nickname，當(dāng)用戶在此 input 進(jìn)行輸入時(shí)，鍵盤上方會(huì)展示微信昵稱。

在login.wxml中，編寫代碼：

<input
    type="nickname"
    class="weui-input"
    placeholder="請(qǐng)輸入昵稱"
    maxlength="12"
    bindinput="bindKeyInput"
    bindblur="bindblurFn"
/>

在login.js中，編寫代碼：

bindblurFn(e) {
    // 表單失去焦點(diǎn)事件監(jiān)聽函數(shù)
    this.setData({
    		nickName: e.detail.value
    })
},
bindKeyInput(e) {
    // 表單輸入狀態(tài)事件監(jiān)聽函數(shù)
    this.setData({
    		nickName: e.detail.value
    })
}

保存后，可以在模擬器點(diǎn)擊操作預(yù)覽效果或者手機(jī)微信掃碼后操作預(yù)覽。


登錄按鈕組件button

給登錄按鈕添加一個(gè)點(diǎn)擊事件。

在login.wxml中，編寫代碼：

<button class='cu-btn block round lg bg-blue' bindtap="login"> 登 錄 </button>

在login.js中，編寫代碼：

login() {
}

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定