亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

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

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

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

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

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

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

點擊事件跳轉

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

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

pages第一項

app.json的pages配置項，哪個放置在第一項，就默認展示哪個頁面。


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


添加編譯模式

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


填寫模式名稱和啟動頁面這兩項，然后點擊確定。


然后點一下編譯按鈕。


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


注冊登錄頁效果圖


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

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

頁面布局

在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="請輸入昵稱" maxlength="12" />
            </view>
        </view>

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

頁面樣式

在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;
}

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

當小程序需要讓用戶完善個人資料時，可以通過微信提供的頭像昵稱填寫能力快速完善。注意：從基礎庫2.24.4版本起。

在【詳情】-【本地設置】-【調試基礎庫】這里，選擇合適的基礎庫，這里要求2.24.4以上，我建議選高一點。


獲取頭像組件button

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

在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;
    // 將獲取到頭像信息的臨時路徑，渲染到頁面展示
    this.setData({
    		avatarUrl
    });
}

保存后，可以在模擬器點擊操作預覽效果或者手機微信掃碼后操作預覽。


獲取昵稱組件input

需要將 input 組件 type 的值設置為 nickname，當用戶在此 input 進行輸入時，鍵盤上方會展示微信昵稱。

在login.wxml中，編寫代碼：

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

在login.js中，編寫代碼：

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

保存后，可以在模擬器點擊操作預覽效果或者手機微信掃碼后操作預覽。


登錄按鈕組件button

給登錄按鈕添加一個點擊事件。

在login.wxml中，編寫代碼：

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

在login.js中，編寫代碼：

login() {
}

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定