微信小程序云開發(fā)（數(shù)據(jù)庫）詳解
更新時間：2019年05月17日 09:46:05 作者：一個減肥的小胖子
使用云開發(fā)開發(fā)微信小程序、小游戲，無需搭建服務器，這篇文章主要為大家詳細介紹了微信小程序云開發(fā)數(shù)據(jù)庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
開發(fā)者可以使用云開發(fā)開發(fā)微信小程序、小游戲，無需搭建服務器，即可使用云端能力。
云開發(fā)為開發(fā)者提供完整的云端支持，弱化后端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業(yè)務開發(fā)，即可實現(xiàn)快速上線和迭代，同時這一能力，同開發(fā)者已經(jīng)使用的云服務相互兼容，并不互斥。
目前提供三大基礎能力支持：
1、云函數(shù)：在云端運行的代碼，微信私有協(xié)議天然鑒權，開發(fā)者只需編寫自身業(yè)務邏輯代碼
2、數(shù)據(jù)庫：一個既可在小程序前端操作，也能在云函數(shù)中讀寫的 JSON 數(shù)據(jù)庫
3、存儲：在小程序前端直接上傳/下載云端文件，在云開發(fā)控制臺可視化管理
具體的可以去小程序文檔上查看，下面用一個登錄注冊的案例來演示小程序云開發(fā)數(shù)據(jù)庫的運用
注冊
在創(chuàng)建的時候，要在點下一步的時候，調數(shù)據(jù)庫來看用戶名有沒有重復的。在點擊同意的時候來調用數(shù)據(jù)庫，然后把所有的判斷放到下一步來判斷。所有條件都滿足就將用戶名和密碼放到全局變量中。
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
});
// 初始化數(shù)據(jù)庫
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
}
}
}
})
在完善信息的時候獲取所有的變量（用戶名和密碼也在內），然后在點擊下一步完成按鈕將數(shù)據(jù)上傳到數(shù)據(jù)庫。
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
});
// 初始化數(shù)據(jù)庫
const db = wx.cloud.database();
db.collection('userInformation').add({
// data 字段表示需新增的 JSON 數(shù)據(jù)
data: {
realName: realName,
userName: userName,
userPassword: userPassword,
phone: phone,
email: email,
card: card
},
success: function(res) {
// res 是一個對象，其中有 _id 字段標記剛創(chuàng)建的記錄的 id
console.log(res);
console.log(res.errMsg);
}
})
}
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function() {
this.setData({
userName: app.appData.account.userName,
userPassword: app.appData.account.userPassword
})
},
})
登錄
在登錄頁面，先獲取用戶輸入的用戶名和密碼。在點擊登錄的時候，先根據(jù)userName調數(shù)據(jù)庫的密碼和用戶輸入的密碼是否相等。如果相等將用戶的信息保存到全局變量中。
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
});
// 初始化數(shù)據(jù)庫
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'>
<!--創(chuàng)建賬戶 -->
<view class='headerListContainer headerListActive'>
<view class='headerListView'>1</view>
<text class='headerListText'>創(chuàng)建賬戶</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='請輸入數(shù)字,字母或中文' 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'> <!--創(chuàng)建賬戶 --> <view class='headerListContainer headerListOldActive'> <view class='headerListView'>1</view> <text class='headerListText'>創(chuàng)建賬戶</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實現(xiàn)貪吃蛇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
上半年自學了JavaScript，然后就做了個打字小游戲玩玩2011-12-12
這篇文章主要介紹了如何利用JS編寫一個簡單的2048小游戲,代碼簡單易懂對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
JavaScript處理數(shù)組數(shù)據(jù)的示例詳解
這篇文章主要為大家詳細介紹了JavaScript如何處理數(shù)組數(shù)據(jù),包括數(shù)據(jù)匹配和剔除,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解一下2023-10-10
Javascript實現(xiàn)跨域后臺設置攔截的方法詳解
這篇文章主要給大家介紹了關于Javascript實現(xiàn)跨域后臺設置攔截的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-08-08
原生javascript實現(xiàn)文件異步上傳的實例講解
下面小編就為大家?guī)硪黄鷍avascript實現(xiàn)文件異步上傳的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要給大家總結介紹了關于javascript中的一些奇葩的日期換算方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要介紹了Javascript原型鏈和原型的一個誤區(qū),需要的朋友可以參考下2014-10-10
在html頁面里面為某個元素的事件指定處理程序有很多種方式2011-12-12
這篇文章主要weidajiaxiangxi介紹了很酷的星級評分系統(tǒng)原生JS實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08