微信小程序云开发(数据库)
版权声明: https://blog.csdn.net/qq_40999496/article/details/82773484
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。
云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
目前提供三大基础能力支持:
1、云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码
2、数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库
3、存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
具体的可以去小程序文档上查看,下面用一个登录注册的案例来演示小程序云开发数据库的运用
注册
在创建的时候,要在点下一步的时候,调数据库来看用户名有没有重复的。在点击同意的时候来调用数据库,然后把所有的判断放到下一步来判断。所有条件都满足就将用户名和密码放到全局变量中。
-
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
-
}
-
}
-
}
-
})
在完善信息的时候获取所有的变量(用户名和密码也在内),然后在点击下一步完成按钮将数据上传到数据库。
-
?
-
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调数据库的密码和用户输入的密码是否相等。如果相等将用户的信息保存到全局变量中。
-
?
-
var app = getApp();
-
Page({
-
data: {
-
bindName: ‘‘,
-
bindPassword: ‘‘,
-
isChecked: false,
-
userName: ‘‘,
-
phone: ‘‘,
-
realName: ‘‘,
-
card: ‘‘,
-
email: ‘‘,
-
userId: ‘‘
-
},
-
// 点击注册账号
-
registerTap: function() {
-
wx.redirectTo({
-
url: ‘../register/register‘
-
})
-
},
-
// 获取用户名
-
bindNameInput: function(e) {
-
this.setData({
-
bindName: e.detail.value
-
})
-
var that = this;
-
if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
-
this.setData({
-
isChecked: true
-
})
-
} else if (that.data.bindName.length === 0) {
-
this.setData({
-
isChecked: false
-
})
-
}
-
},
-
// 获取密码
-
bindPasswordInput: function(e) {
-
this.setData({
-
bindPassword: e.detail.value
-
})
-
var that = this;
-
if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
-
this.setData({
-
isChecked: true
-
})
-
} else if (that.data.bindPassword.length === 0) {
-
this.setData({
-
isChecked: false
-
})
-
}
-
},
-
// 点击登录
-
bindingSuccess: function() {
-
var that = this;
-
var bindName = that.data.bindName;
-
var bindPassword = that.data.bindPassword;
-
if (bindName.length !== 0 && bindPassword.length !== 0) {
-
// 初始化云
-
wx.cloud.init({
-
env: ‘wubaib-9543f7‘,
-
traceUser: true
-
});
-
// 初始化数据库
-
const db = wx.cloud.database();
-
db.collection(‘userInformation‘).where({
-
userName: bindName
-
}).get().then(res => {
-
console.log(res.data);
-
if (res.data[0].userPassword === bindPassword) {
-
console.log("登录成功");
-
// 保存手机号,真实姓名,身份证号,邮箱 保存用户名
-
that.setData({
-
userName: res.data[0].userName,
-
phone: res.data[0].phone,
-
realName: res.data[0].realName,
-
card: res.data[0].card,
-
email: res.data[0].email,
-
userId: res.data[0]._id
-
})
-
app.appData.userinfo = {
-
phone: that.data.phone,
-
realName: that.data.realName,
-
card: that.data.card,
-
email: that.data.email
-
}
-
app.appData.account = {
-
userName: that.data.userName
-
}
-
app.appData.userId = {
-
userId: that.data.userId
-
}
-
wx.switchTab({
-
url: ‘../personalCenter/personalCenter‘,
-
})
-
} else {
-
wx.showToast({
-
title: ‘用户名或密码错误‘,
-
icon: ‘none‘,
-
duration: 2000
-
})
-
}
-
})
-
}
-
},
-
})
-
-
?
登录WXML
-
<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
-
<!--返回主页 -->
-
<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
-
<!--返回主页 -->
-
<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>