答题积分小程序云开发实战-界面交互篇：注册登录页布局样式与逻辑交互开发

微信小程序云开发实战-答题积分赛小程序

界面交互篇：注册登录页布局样式与逻辑交互开发

写在前面-开发调试小技巧

模拟器通常默认展示的页面是首页，那么如果我们想切换到其他页面呢，那怎么办？我这里教给初学者三种方式，方便大家在搭建页面过程中，进行开发调试。

点击事件跳转

给页面按钮添加一个点击事件，然后在js中注册一个事件监听处理函数，里面是执行跳转至注册登录页的函数体。这样，只要点击按钮就能跳转到注册登录页了。

<button bindtap="goToLogin">去注册登录</button>

goToLogin() {
    wx.navigateTo({
            url: '../login/login'
    })
}

pages第一项

app.json的pages配置项，哪个放置在第一项，就默认展示哪个页面。

我们可以在开发调试阶段，把当前正在开发搭建的页面的路径优先放在该配置的第一项。这样，每次编译预览的时候，模拟器总是显示该页面。不需要通过点击按钮跳转页面那么麻烦。

添加编译模式

还有一种方式是，添加编译模式。

填写模式名称和启动页面这两项，然后点击确定。

然后点一下编译按钮。

后续即使修改文件后保存，自动编译依旧是保持在当前页面。

注册登录页效果图

注册登录布局与样式实现

这个注册登录页的页面布局，是比较简单明了的，十几行代码就能实现了。我曾做过消防安全知识答题、网络安全知识答题、安全生产知识答题等，都是使用这种注册登录方式实现的。

页面布局

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

获取头像昵称逻辑交互实现

当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善。注意：从基础库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) {
    // 表单失去焦点事件监听函数
    this.setData({
            nickName: e.detail.value
    })
},
bindKeyInput(e) {
    // 表单输入状态事件监听函数
    this.setData({
            nickName: e.detail.value
    })
}

保存后，可以在模拟器点击操作预览效果或者手机微信扫码后操作预览。

登录按钮组件button

给登录按钮添加一个点击事件。
在login.wxml中，编写代码：

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

在login.js中，编写代码：

login() {
}