开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论