微信小程序选项卡功能开发步骤与方法全解析
470
2023-11-07
微信小程序云开发（数据库）详解
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
目前提供三大基础能力支持：
1、云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
2、数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
3、存储：在小程序前端直接上传/-云端文件，在云开发控制台可视化管理
具体的可以去小程序文档上查看，下面用一个登录注册的案例来演示小程序云开发数据库的运用
注册
在创建的时候，要在点下一步的时候，调数据库来看用户名有没有重复的。在点击同意的时候来调用数据库，然后把所有的判断放到下一步来判断。所有条件都满足就将用户名和密码放到全局变量中。
?
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
var app = getApp();
Page({
data: {
userName: ,
userPassword: ,
userPasswordAgain: ,
checkbox: false,
repetition: false
},
// 返回主页面
backHomeTap: function() {
wx.switchTab({
url: ../index/index,
})
},
// 绑定
bindingTap: function () {
wx.redirectTo({
url: ../login/login,
})
},
// 用户名
userNameInput: function(e) {
this.setData({
userName: e.detail.value
});
},
// 密码
userPasswordInput: function(e) {
this.setData({
userPassword: e.detail.value
});
},
// 再次输入密码
userPasswordAgainInput: function(e) {
this.setData({
userPasswordAgain: e.detail.value
});
},
// 同意
checkboxChange: function() {
if (this.data.checkbox === false) {
this.setData({
checkbox: true
})
} else {
this.setData({
checkbox: false
})
}
var that = this;
var userName = this.data.userName;
// 初始化云
wx.cloud.init({
env: wubaib-9543f7,
traceUser: true
});
// 初始化数据库
const db = wx.cloud.database();
const _ = db.command;
db.collection(userInformation).where({
userName: _.eq(userName)
}).get({
success: function (res) {
if (res.data.length === 1) {
that.setData({
repetition: true
})
}
}
})
},
// 下一步，完善个人信息
perfectInforTap: function() {
var userName = this.data.userName;
var userPassword = this.data.userPassword;
var checkbox = this.data.checkbox;
var userPasswordAgain = this.data.userPasswordAgain;
var name = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
var repetition = this.data.repetition;
if (userName === ) {
wx.showToast({
title: 请输入用户名,
icon: none,
duration: 2000,
mask: true
})
} else if (!name.test(userName)) {
wx.showToast({
title: 用户名格式不正确,
icon: none,
duration: 2000,
mask: true
})
} else if (repetition === true) {
wx.showToast({
title: 用户名已存在,
icon: none,
duration: 2000,
mask: true
})
} else if (userPassword === ) {
wx.showToast({
title: 请输入密码,
icon: none,
duration: 2000,
mask: true
})
} else if (userPassword.length < 6) {
wx.showToast({
title: 密码最少6位,
icon: none,
duration: 2000,
mask: true
})
} else if (userPassword !== userPasswordAgain) {
wx.showToast({
title: 两次密码输入不一致,
icon: none,
duration: 2000,
mask: true
})
} else if (checkbox === false) {
wx.showToast({
title: 请选中已阅读,
icon: none,
duration: 2000,
mask: true
})
} else {
wx.redirectTo({
url: perfectInfor/perfectInfor,
})
// 保存用户名和密码
app.appData.account = {
userName: userName,
userPassword: userPassword
}
}
}
})
在完善信息的时候获取所有的变量（用户名和密码也在内），然后在点击下一步完成按钮将数据上传到数据库。
?
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
var app = getApp();
Page({
data: {
userName: ,
userPassword: ,
phone: ,
realName: ,
card: ,
email: ,
},
// 返回主界面
backHomeTap: function() {
wx.switchTab({
url: ../../index/index,
})
},
// 手机号
phoneInput: function(e) {
this.setData({
phone: e.detail.value
});
},
// 真实姓名
nameInput: function(e) {
this.setData({
realName: e.detail.value
});
},
// 身份证
cardInput: function(e) {
this.setData({
card: e.detail.value
})
},
// email
emailInput: function(e) {
this.setData({
email: e.detail.value
})
},
// 下一步完成
registerSuccessTap: function() {
var phone = this.data.phone;
var realName = this.data.realName;
var card = this.data.card;
var email = this.data.email;
var userName = this.data.userName;
var userPassword = this.data.userPassword;
var phonereg = /^1[345789]\d{9}$/;
var namereg = /^[\u4E00-\u9FA5]+$/;
var cardreg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/;
var emailreg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
var that = this;
if (phone === ) {
wx.showToast({
title: 请输入手机号,
icon: none,
duration: 2000,
mask: true
});
} else if (!phonereg.test(phone)) {
wx.showToast({
title: 请输入正确的手机号,
icon: none,
duration: 2000,
mask: true
})
} else if (!namereg.test(realName)) {
wx.showToast({
title: 请输入正确的名字,
icon: none,
duration: 2000,
mask: true
})
} else if (card === ) {
wx.showToast({
title: 请输入身份证,
icon: none,
duration: 2000,
mask: true
})
} else if (!cardreg.test(card)) {
wx.showToast({
title: 请输入正确的身份证,
icon: none,
duration: 2000,
mask: true
})
} else if (email === ) {
wx.showToast({
title: 请输入邮箱,
icon: none,
duration: 2000,
mask: true
})
} else if (!emailreg.test(email)) {
wx.showToast({
title: 请输入正确的邮箱,
icon: none,
duration: 2000,
mask: true
})
} else {
// 初始化云
wx.cloud.init({
env: wubaib-9543f7,
traceUser: true
});
// 初始化数据库
const db = wx.cloud.database();
db.collection(userInformation).add({
// data 字段表示需新增的 JSON 数据
data: {
realName: realName,
userName: userName,
userPassword: userPassword,
phone: phone,
email: email,
card: card
},
success: function(res) {
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
console.log(res);
console.log(res.errMsg);
}
})
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this.setData({
userName: app.appData.account.userName,
userPassword: app.appData.account.userPassword
})
},
})
登录
在登录页面，先获取用户输入的用户名和密码。在点击登录的时候，先根据userName调数据库的密码和用户输入的密码是否相等。如果相等将用户的信息保存到全局变量中。
登录WXML
?
1
2
3
4
5
6
7
8
<view class=phoneNumberContainer>
<input placeholder=用户名 maxlength=11 bindinput="bindNameInput"></input>
</view>
<view class=passwordContainer>
<input placeholder=密码 password="true" bindinput="bindPasswordInput"></input>
</view>
<view class="{{isChecked?bindingChecked:bindingNormal}}" bindtap=bindingSuccess>立即登录</view>
<view class=registerContainer bindtap=registerTap>注册账号</view>
注册第一步的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
<!--返回主页 -->
<view class=backHome bindtap=backHomeTap>
<image src=/images/homeIcon.png class=backHomeImg></image>
</view>
<!--头部 -->
<view class=headerContainer>
<!--创建账户 -->
<view class=headerListContainer headerListActive>
<view class=headerListView>1</view>
<text class=headerListText>创建账户</text>
</view>
<!--完善个人信息 -->
<view class=headerListContainer>
<view class=headerListView>2</view>
<text class=headerListText>完善个人信息</text>
</view>
<!--注册成功 -->
<view class=headerListContainer>
<view class=headerListView>3</view>
<text class=headerListText>注册成功</text>
</view>
<view class=transverseLineLeft></view>
<view class=transverseLineright></view>
</view>
<view class=mainContainer>
<!--用户名 -->
<view class=mainListContainer>
<view class=mainListText>用户名</view>
<input class=mainListInput placeholder=请输入数字,字母或中文 maxlength=25 bindinput=userNameInput></input>
</view>
<!--密码 -->
<view class=mainListContainer>
<view class=mainListText>密码</view>
<input class=mainListInput placeholder=长度6~14位 password=true maxlength=14 bindinput=userPasswordInput></input>
</view>
<!--确认密码 -->
<view class=mainListContainer>
<view class=mainListText>确认密码</view>
<input class=mainListInput placeholder=请再次输入密码 password=true maxlength=14 bindinput=userPasswordAgainInput></input>
</view>
</view>
<!--agree -->
<view class=agreeContainer>
<checkbox class=agreeCheckbox checked="{{check}}" bindtap="checkboxChange"/>
<text>我已阅读并接受</text>
<text class=clause>《用户注册条款》</text>
</view>
<!--nextButton -->
<view class=nextButton bindtap=perfectInforTap>下一步，完善个人信息</view>
<!--binding -->
<view class=bindingContainer>
<text>已有账号</text>
<text class=binding bindtap=bindingTap>请绑定</text>
</view>
注册第二步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
<!--返回主页 -->
<view class=backHome bindtap=backHomeTap>
<image src=/images/homeIcon.png class=backHomeImg></image>
</view>
<!--头部 -->
<view class=headerContainer>
<!--创建账户 -->
<view class=headerListContainer headerListOldActive>
<view class=headerListView>1</view>
<text class=headerListText>创建账户</text>
</view>
<!--完善个人信息 -->
<view class=headerListContainer headerListActive>
<view class=headerListView>2</view>
<text class=headerListText>完善个人信息</text>
</view>
<!--注册成功 -->
<view class=headerListContainer>
<view class=headerListView>3</view>
<text class=headerListText>注册成功</text>
</view>
<view class=transverseLineLeft></view>
<view class=transverseLineright></view>
</view>
<!--main -->
<view class=mainContainer>
<!--手机 -->
<view class=mainListContainer>
<view class=mainListText>手机</view>
<input class=mainListInput placeholder=请输入手机号码 maxlength="11" bindinput=phoneInput></input>
</view>
<!--真实姓名 -->
<view class=mainListContainer>
<view class=mainListText>真实姓名</view>
<input class=mainListInput placeholder=请输入真实姓名 maxlength=25 bindinput=nameInput></input>
</view>
<!--证件类型 -->
<view class=mainListContainer>
<view class=mainListText>证件类型</view>
<view class=cardText>中华人民共和国居民身份证</view>
</view>
<!--证件号码 -->
<view class=mainListContainer>
<view class=mainListText>证件号码</view>
<input class=mainListInput type=idcard placeholder=请输入身份证号码 maxlength="18" bindinput=cardInput></input>
</view>
<!--邮箱 -->
<view class=mainListContainer>
<view class=mainListText>邮箱</view>
<input class=mainListInput placeholder=请输入常用的邮箱地址 bindinput=emailInput></input>
</view>
</view>
<!--nextButton -->
<view class=nextButton bindtap=registerSuccessTap>下一步，完成</view>
以上就是本文的全部内
您可能感兴趣的文章:微信小程序实现一张或多张图片上传（云开发）微信小程序云开发详细教程微信小程序云开发之新手环境配置微信小程序云开发使用方法新手初体验微信小程序实现文件、图片上传功能微信小程序-拍照或选择图片并上传文件微信小程序实现云开发上传文件、图片功能
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~