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

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

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

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

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

点击事件跳转

给页面按钮增加一个点击事件，而后在 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() {}