微信小程序选项卡功能开发步骤与方法全解析
579
2023-11-10
微信小程序实现登录注册界面
本文实例为大家分享了微信小程序实现登录注册界面的具体代码，供大家参考，具体内容如下
微信小程序登录注册界面demo,存在不足之处,请指教!
界面图片：
1.js代码：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
Page({
/**
* 页面的初始数据
*/
data: {
current:1,
codeText:获取验证码,
counting:false,
},
// 登陆注册监听
click(e){
let index = e.currentTarget.dataset.code;
this.setData({
current:index
})
},
//获取验证码
getCode(){
var that = this;
if (!that.data.counting) {
wx.showToast({
title: 验证码已发送,
})
//开始倒计时60秒
that.countDown(that, 60);
}
},
//倒计时60秒
countDown(that,count){
if (count == 0) {
that.setData({
codeText: 获取验证码,
counting:false
})
return;
}
that.setData({
counting:true,
codeText: count + 秒后重新获取,
})
setTimeout(function(){
count--;
that.countDown(that, count);
}, 1000);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
2.wxml代码：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<view class="top-box">
<view>Hi</view>
<view class="next-text">欢迎使用！</view>
</view>
<!-- 登录、注册 -->
<view class="center-box">
<view class="nav">
<view class="left {{current==1?select:}}" bindtap="click" data-code="1">
<text>登录</text>
</view>
<view class="right {{current==0?select:}}" bindtap="click" data-code="0">
<text>注册</text>
</view>
</view>
<!-- 登录 -->
<view class="input-box" hidden="{{current==0}}">
<view class="wei-input">
<icon type="waiting" color="#44ADFB" size="16"></icon>
<input class="input" auto-focus placeholder="请输入手机号/登录名"/>
</view>
<view class="wei-input">
<icon type="success" color="#44ADFB" size="16"></icon>
<input class="input" auto-focus placeholder="请输入登录密码"/>
</view>
<view class="forget">
<text>忘记密码?</text>
</view>
</view>
<!-- 注册 -->
<view class="input-box" hidden="{{current==1}}">
<view class="wei-input">
<icon type="waiting" color="#44ADFB" size="16"></icon>
<input class="input" auto-focus placeholder="请输入手机号"/>
</view>
<view class="wei-input">
<icon type="waiting" color="#44ADFB" size="16"></icon>
<input class="input" auto-focus placeholder="请输入6位验证码"/>
<text class="input-code" bindtap="getCode">{{codeText}}</text>
</view>
<view class="wei-input">
<icon type="success" color="#44ADFB" size="16"></icon>
<input class="input" auto-focus placeholder="请输入密码"/>
</view>
<view class="wei-input">
<icon type="success" color="#44ADFB" size="16"></icon>
<input class="input" auto-focus placeholder="请确认密码"/>
</view>
</view>
<view class="sumbit-btn">
<button class="button"
style="background-color: #33ccff;font-size: 30rpx;"
type="primary">立即{{current==1?登录:注册}}</button>
</view>
</view>
<!-- 重影 -->
<view class="shadow shadow-1"></view><view class="shadow shadow-2"></view>
<!-- 说明 -->
<view class="bottom-box">
demo·开源·点赞·收藏·打赏·Jeffery~
</view>
3.wxss代码：
您可能感兴趣的文章:微信小程序登录与注册功能的实现详解微信小程序实现登录注册功能详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）微信小程序实现注册登录功能(表单校验、错误提示)微信小程序+云开发实现欢迎登录注册微信小程序登录态和检验注册过没的app.js写法微信小程序实现登录注册tab切换效果微信小程序实现登录界面示例微信小程序实现登录界面
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~