溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下微信小程序云開發數據庫的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
開發者可以使用云開發開發微信小程序、小游戲，無需搭建服務器，即可使用云端能力。
云開發為開發者提供完整的云端支持，弱化后端和運維概念，無需搭建服務器，使用平臺提供的 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>
以上是“微信小程序云開發數據庫的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
