小程序現(xiàn)在對(duì)開發(fā)者來說越來越友好啦舀患，可以說任何新手小白都可以很輕松的開發(fā)一款小程序，尤其是現(xiàn)在又支持云開發(fā)气破，簡(jiǎn)直是如虎添翼
文章首發(fā)公眾號(hào)「代碼集中營(yíng)」
什么是云開發(fā)
云開發(fā)就是不需要開發(fā)者搭建服務(wù)器聊浅，直接使用數(shù)據(jù)庫(kù)，省去了搭建服務(wù)器的麻煩堵幽，這個(gè)概念并不是現(xiàn)在才有的狗超，如果大家有用過Bmob后端云弹澎、知曉云 就知道他們的原理
代碼君在大學(xué)的時(shí)候朴下，畢設(shè)就是用的Bmob云，這樣開發(fā)者不用去購(gòu)買搭建服務(wù)器苦蒿，不用操心服務(wù)端的穩(wěn)定性和數(shù)據(jù)庫(kù)的安裝
云開發(fā)模塊介紹
-
云開發(fā)入口
注意這個(gè)入口必須是由申請(qǐng)過小程序id的才會(huì)顯示殴胧，如果你用測(cè)試的appid，是沒有這個(gè)入口的
image.png - 云開發(fā)控制臺(tái)介紹
熟悉的朋友可以跳過此步
數(shù)據(jù)庫(kù)模塊
寫后臺(tái)的對(duì)數(shù)據(jù)庫(kù)可能不陌生佩迟，新手小白會(huì)一臉懵逼团滥，簡(jiǎn)單說，數(shù)據(jù)庫(kù)是服務(wù)端的核心报强，比如你登錄時(shí)候灸姊，需要驗(yàn)證是否注冊(cè)過，就需要查看數(shù)據(jù)庫(kù)里面有沒有用戶信息存儲(chǔ)模塊
此模塊是用來存儲(chǔ)資源的秉溉，比如一些圖片資源你要訪問的話力惯，發(fā)現(xiàn)都是本地的，會(huì)限制你的訪問召嘶，你把圖片上傳到這里面父晶，就可以使用網(wǎng)絡(luò)路徑訪問啦
云函數(shù)模塊
函數(shù)主要是一些方法，數(shù)據(jù)庫(kù)的增刪改查都可以寫成函數(shù)的形式弄跌，對(duì)于小白來說甲喝，可以先放后，理解不了沒關(guān)系铛只，代碼君直接教你數(shù)據(jù)庫(kù)查詢就好埠胖，雖然方法簡(jiǎn)單粗暴糠溜，不夠優(yōu)雅設(shè)置
主要記住設(shè)置里面的環(huán)境名稱以及環(huán)境ID，環(huán)境ID特別重要直撤，代碼君剛?cè)胧值闹皇蔷鸵驗(yàn)檫@個(gè)配置錯(cuò)了诵冒，查了好久問題才發(fā)現(xiàn)的，切記谊惭！切記汽馋！不要再掉坑里
云開發(fā)環(huán)境搭建
-
云開發(fā)開通
首次點(diǎn)擊云開發(fā)，會(huì)引導(dǎo)你開通圈盔，這里就不介紹了豹芯，唯一要說的是，會(huì)彈出一個(gè)創(chuàng)建環(huán)境的對(duì)話框驱敲，要求輸入環(huán)境名稱和環(huán)境ID铁蹈，這個(gè)自己定義就好，定義好一定要區(qū)分好環(huán)境名稱與環(huán)境ID众眨，不要弄混握牧，可在設(shè)置中查看
image.png - 小程序與云函數(shù)建立連接
- 在project.config.json 加入云端同步路徑,后面配置的路徑是自己定義的，配置完成記得保存娩梨，比如我定義的cloudbaseRoot路徑是在根目錄里的cloudbaseTest文件沿腰，所以我需要在根目錄上創(chuàng)建cloudbaseTest文件夾相匹配，后面這個(gè)文件夾就是用來和云端建立連接的
"cloudfunctionRoot": "cloudbaseTest/",
正常配置完成狈定，保存一下颂龙，cloudbaseTest文件夾就會(huì)出現(xiàn)一個(gè)云圖標(biāo)，說明你配置成功啦
-
同步環(huán)境列表
在cloudbaseTest文件夾右鍵纽什，會(huì)有一個(gè)同步環(huán)境列表功能措嵌，無論你是在本地新增了某個(gè)函數(shù)。還是在云控制臺(tái)新增了某個(gè)文件芦缰，這里都會(huì)進(jìn)行同步企巢。有點(diǎn)類似于Git一樣
image.png
云開發(fā)使用指南
- 在app.js 初始化云開發(fā),初始化代碼如下
wx.cloud.init({
//環(huán)境id，不是環(huán)境名稱哈
env: 'majun-tv-4g57vf5e3ca092f8',
traceUser: true,
})
-
創(chuàng)建數(shù)據(jù)庫(kù)表
在云開發(fā)控制臺(tái)的數(shù)據(jù)模塊創(chuàng)建一個(gè)test_demo表让蕾，用于模擬存儲(chǔ)用戶信息
image.png 數(shù)據(jù)庫(kù)增刪改查
首先初始化db浪规，在界面創(chuàng)建的時(shí)候，db代碼君設(shè)置了全局參數(shù)涕俗，方便引用罗丰，然后就可以執(zhí)行對(duì)應(yīng)的邏輯判斷了，增刪改查代碼都在下面再姑，注釋寫的很清楚萌抵，代碼君就不過多解釋啦
// pages/test/test.js
// 全局db
var db;
Page({
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onReady: function (options) {
//初始化db
db = wx.cloud.database({
//環(huán)境id
env: 'majun-tv-4g57vf5e3ca092f8'
})
},
/**
* 添加用戶
*/
AddUser: function (options) {
//新用戶創(chuàng)建，存入數(shù)據(jù)庫(kù)
db.collection('test_demo').add({
// data 字段表示需新增的 JSON 數(shù)據(jù)
data: {
"username": "測(cè)試用戶1",
"password": "123456",
},
success: function (res) {
// res 是一個(gè)對(duì)象，其中有 _id 字段標(biāo)記剛創(chuàng)建的記錄的 id
console.log(res)
//存儲(chǔ)id绍填，用于刪除
wx.setStorageSync('db_id', res._id)
}
})
},
/**
* 刪除用戶
*/
deleteUser: function () {
var _id=wx.getStorageSync('db_id');
//表的名稱+要?jiǎng)h除的數(shù)據(jù)id
db.collection('test_demo').doc(_id).remove({
success: function(res) {
console.log(res)
}
})
},
/**
* 獲取用戶列表
*/
getUserList: function () {
db.collection('test_demo').get({
success: function(res) {
// res.data 是一個(gè)包含集合中有權(quán)限訪問的所有記錄的數(shù)據(jù)霎桅，不超過 20 條
console.log(res.data)
}
})
},
})
