微信小程序云开发实战-答题积分赛小程序
界面交互篇：注册登录页布局样式与逻辑交互开发
写在前面-开发调试小技巧
模拟器通常默认展示的页面是首页，那么如果我们想切换到其他页面呢，那怎么办？我这里教给初学者三种方式，方便大家在搭建页面过程中，进行开发调试。
点击事件跳转
给页面按钮添加一个点击事件，然后在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() {
}