微信小程序(第二十三章)- 注册页面的实现
页面实现
基本和登录页面一样。
代码如下:
<!--定义form组件-->
<form bindsubmit="toRegister">
<!--输入框区块-->
<view id="inputView">
<!--文本框-->
<input type="text" placeholder="用户名" name="userName"></input>
<!--密码框-->
<input type="text" placeholder="输入密码6~12位字母、数字组合" password name="userPwd"></input>
<input type="text" placeholder="确认密码" password name="userPwd1"></input>
<!--昵称-->
<input type="text" placeholder="昵称" name="nickName"></input>
<!--真实姓名-->
<input type="text" placeholder="真实姓名" name="realName"></input>
<!--手机号-->
<input type="number" placeholder="手机号" name="phone"></input>
<!--地址-->
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" name="place">
<view class="picker">
来自:{{region[0]}} - {{region[1]}} - {{region[2]}}
</view>
</picker>
</view>
<!--按钮区域-->
<view id="buttonView">
<button form-type="submit">注册</button>
<view>已有账号,去登录</view>
</view>
</form>
/*给页面设置整体背景色*/
page{
background: #f0eff5;
}
/*输入框区域样式*/
#inputView{
background:#fff;
padding:0 30rpx;
}
#inputView > picker{
height:88rpx;
line-height: 88rpx;
}
#inputView > input{
height:88rpx;
border-bottom: 1rpx solid #f1f1f1;
}
/*按钮区域样式*/
#buttonView{
width:690rpx;
margin:80rpx auto 0;
}
#buttonView > button{
width:690rpx;
height:88rpx;
font-size:36rpx;
background:#87cefa;
color:#fff;
}
#buttonView > view{
font-size:28rpx;
color:#87cefa;
text-align: right;
margin-top: 36rpx;
}
// pages/register/register.js
Page({
/**
* 页面的初始数据
*/
data: {
region:['北京市','北京市','海淀区'],
customItem:'全部'
},
bindRegionChange: function (e) {
console.log(e.detail.value)
this.setData({
region: e.detail.value
})
},
toRegister(e){
console.log(e)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})