本文给大家带来的是微信小程序红色账号免费注册页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--registerAccount.wxml-->
<view class="top-switch">
<view class="left">
<button class="lbutton" bindtap="default"> 绑定已有账号 </button>
</view>
<view class="right">
<button class="rbutton" bindtap="default"> 注册新的账号 </button>
</view>
</view>
<view class="form-here">
<!-- <view class="form-account"> -->
<input class="form-account" placeholder="请输入邮箱地址" />
<view class="hr" style="margin-top:5px;"></view>
<!-- </view> -->
<!-- <view class="form-password"> -->
<input class="form-password" placeholder="请输入昵称"/>
<view class="hr" style="margin-top:5px;"></view>
<input password class="form-password" placeholder="请输入密码" />
<view class="hr" style="margin-top:5px;"></view>
<input password class="form-password" placeholder="请确认密码" />
<view class="hr" style="margin-top:5px;"></view>
<input type="number" class="form-password" placeholder="请输入手机号"/>
<view class="hr" style="margin-top:5px;"></view>
<view class="verify">
<view class="verify-input">
<input class="form-password" placeholder="手机验证码" />
<view class="hr" style="margin-top:5px;"></view>
</view>
<button class="getcode">获取验证码</button>
</view>
<!-- </view> -->
</view>
<view class="submit">
<view class="agree">
<checkbox color="#f9364f" value="点击注册" checked="true"/>点击注册，表示您同意佰客国际 <text class="agreement">《服务协议》</text>
</view>
<button class="sub-button">免费注册</button>
</view>
|
二、wxss样式文件代码如下：
/* bindAccount.wxss */
.top-switch{
background-color:#ffffff;
padding:10px 15px;
display:flex;
}
.left{
width:50%;
padding:0 10px;
border-right:1rpx solid #d6d6d6;
}
.right{
width:50%;
padding:0 10px;
}
.lbutton{
border: 1px solid #f9364f;
line-height:1;
border-radius:20px;
padding:5px 10px;
color:#f9364f;
}
.rbutton{
line-height:1;
border-radius:20px;
padding:5px 10px;
color:#ffffff;
background-color:#f9364f;
}
/*form */
.form-here{
margin-top:10px;
background-color:#ffffff;
padding:20px 30px;
}
.form-password{
margin-top:20px;
}
.submit{
margin-top:30px;
display:flex;
justify-content:center;
flex-flow:column wrap;
}
/*addition */
.verify{
display:flex;
justify-content:space-between;
}
.verify-input{
width:60%;
}
.getcode{
height:40px;
line-height:40px;
background-color:#f9364f;
color:#ffffff;
}
.agree{
text-align:center;
font-size:12px;
}
.sub-button{
background-color:#f9364f;
color:#ffffff;
line-height:1.8;
border-radius:30px;
padding:5px 120px;
margin-top:20px;
}
.agreement{
color: #40a1e0;
}
|
三、js页面代码如下：
// registerAccount.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
formSubmit: function (e) {
console.log('传值处理..')
wx.redirectTo({
url: '../../pages/mergeTrans/mergeTrans',
})
}
})
|
.jpg)
.jpg)
