微信小程式雲開發（資料庫）
阿新 • • 發佈：2019-01-03
開發者可以使用雲開發開發微信小程式、小遊戲，無需搭建伺服器，即可使用雲端能力。
雲開發為開發者提供完整的雲端支援，弱化後端和運維概念，無需搭建伺服器，使用平臺提供的 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>