云開發是微信平臺新開放的功能，為開發者提供集成了服務器，數據庫和資源存儲的云服務。這篇文章主要介紹了小程序云開發初探(小結)，感興趣的小伙伴們可以參考一下
云開發是微信平臺新開放的功能，為開發者提供集成了服務器，數據庫和資源存儲的云服務。本文將基于官方文檔，以一個小例子來作為探索云開發的相關功能。
一、新建云開發項目新建項目
將微信開發助手更新之后，選擇云開發模板。
項目目錄
項目目錄分為了2大塊內容：cloudfunctions（云函數）和miniprogram。miniprogram存放的是和普通開發相同的業務代碼和資源，cloudfunctions中則存放了可以上傳至云端的代碼，在云開發中被稱為云函數。
云開發模板建立之后，會帶有一些相關例子可以熟悉api。
二、控制臺
微信開發者工具更新之后，在工具欄上會有一個控制臺入口，點擊可出現以下面板，可查看相關數據情況。
概覽
概覽界面如上圖所示，展示了該 云開發項目下使用云資源的統計數據。
用戶管理
凡是訪問過云項目的用戶，都會在用戶管理下留有訪問記錄。前提是該小程序在app.js中設置traceUser:true，表示允許記錄用戶信息。
wx.cloud.init({
env:'......',
traceUser: true,
})
數據庫
數據庫是控制臺中最常用的功能之一，在該界面下，可以快速建立數據集合，可以理解為數據表。可在控制臺中建立新的集合，添加記錄有三種方式：控制臺手動添加、文件導入以及調用api。調用api會在每條記錄中自動插入用戶_openid。
存儲管理
存儲管理可保存小程序端上傳的文件，可通過調用api進行上傳，上傳名稱和路徑需要自己定義。
云函數
云函數對cloudfunctions中上傳的函數進行管理，可進行調試，查看調用日志等信息。
云函數添加方式有2種，可視化添加與IDE添加，可視化添加的云函數直接上傳至了云端，IDE中添加需要上傳部署才可以調用。如果要刪除云函數，在控制臺刪除之后，IDE中同步云函數列表即可。
統計分析
統計分析對云服務的調用情況有針對得給出了數據。
三、環境配置
api會在每條記錄中自動插入用戶_openid。
項目初始化需要在app.js中進行配置，env中填寫的就是自主配置的環境ID。
wx.cloud.init({
env:'mina-cloud-test001'
})
四、實際應用
本例以上傳書籍信息為實際應用，實現基本的書籍信息增刪改查功能，以及圖片的上傳刪除。
讀取數據庫數據
先通過調用wx.cloud.database();獲取數據庫所有集合，然后通過查詢具體集合的方式獲取數據。
const db = wx.cloud.database();
const _ = db.command;
db.collection('bookList').get().then(res => {
console.log('get', res)
self.setData({
bookList: res.data
});
})
增加數據
const db = wx.cloud.database();
const _ = db.command;
db.collection('bookList').add({
data: {
bookMes: self.data.bookMes
}
}).then(res => {
console.log(res)
})
刪除數據
<pre class="brush:js;" style="margin: 3px auto 0px; padding: 0px 0px 0px 5px; outline: none; background: rgb(255, 255, 255); width: 640px; line-height: 20px; clear: both; font-size: 14px; border-left: 3px solid rgb(108, 226, 108);"> db.collection('bookList').doc(id).remove().then(res => {
console.log(res)
wx.showToast({
title: '刪除成功！',
})
self.getBook();
}).catch(err => {
console.log('err', res)
})
})</pre>
增加數據
<pre class="brush:js;" style="margin: 3px auto 0px; padding: 0px 0px 0px 5px; outline: none; background: rgb(255, 255, 255); width: 640px; line-height: 20px; clear: both; font-size: 14px; border-left: 3px solid rgb(108, 226, 108);"> const db = wx.cloud.database();
const _ = db.command;
db.collection('bookList').doc(id).remove().then(res => {
console.log(res)
}).catch(err => {
console.log('err', res)
})
})</pre>
改變數據
<pre class="brush:js;" style="margin: 3px auto 0px; padding: 0px 0px 0px 5px; outline: none; background: rgb(255, 255, 255); width: 640px; line-height: 20px; clear: both; font-size: 14px; border-left: 3px solid rgb(108, 226, 108);"> const db = wx.cloud.database();
const _ = db.command
db.collection('bookList').doc(self.data.currentId).update({
data: {
bookMes:self.data.bookMes
}
}).then(res=>{
console.log('update',res)
self.getBook();
}).catch(console.error)</pre>
查詢數據&調用云函數
查詢數據采用云函數為例
先在云函數中定義查詢函數，每個需要調用云開發api的云函數都必須使用wx-server-sdk，當新創建一個云函數時，項目會提示是否需要使用依賴，選擇是則會自動安裝wx-server-sdk。
函數中的event參數代表由小程序端傳遞過來的參數，除此之外默認包含了userInfo，可用來做用戶鑒權操作。
<pre class="brush:js;" style="margin: 3px auto 0px; padding: 0px 0px 0px 5px; outline: none; background: rgb(255, 255, 255); width: 640px; line-height: 20px; clear: both; font-size: 14px; border-left: 3px solid rgb(108, 226, 108);"> //云函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const _ = db.command
//云函數函數入口
exports.main = async (event, context) => {
return db.collection('bookList').where({
'bookMes.name': _.eq(event.bookMes.name),
'bookMes.chooseTags':_.in(event.bookMes.chooseTags)
}).get({
success:function(res){
return res
}
})
}</pre>
小程序端引用云函數，name為云函數文件夾的名稱，data中存放的是傳遞給云函數的參數，云函數通過event獲取：
<pre class="brush:js;" style="margin: 3px auto 0px; padding: 0px 0px 0px 5px; outline: none; background: rgb(255, 255, 255); width: 640px; line-height: 20px; clear: both; font-size: 14px; border-left: 3px solid rgb(108, 226, 108);"> wx.cloud.callFunction({
name: 'searchBook',
// 傳給云函數的參數
data: {
bookMes: self.data.bookMes
}
}).then(res => {
console.log('search',res.result.data)
self.setData({
bookList:res.result.data
})
})</pre>
本文中的api使用方式僅為示例，實際上服務端的api比小程序端的api豐富，實現功能更多。建議設計文件存儲、數據庫增刪改查的操作都在云函數中進行。
上傳圖片
上傳圖片需要先調用wx.chooseImage返回的filePath參數，然后自主定義cloudPath，即上傳至云端的地址。
<pre class="brush:js;" style="margin: 3px auto 0px; padding: 0px 0px 0px 5px; outline: none; background: rgb(255, 255, 255); width: 640px; line-height: 20px; clear: both; font-size: 14px; border-left: 3px solid rgb(108, 226, 108);"> choose() {
let self = this
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {
// console.log(res.tempFilePaths[0])
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
self.setData({
bookPic: res.tempFilePaths[0]
})
}
})
}，
upload(){
let self = this
const filePath = self.data.bookPic
let myDate = new Date();
let time = '' + myDate.getFullYear() + (myDate.getMonth() + 1) + myDate.getDate() + myDate.getHours() + myDate.getMinutes() + myDate.getSeconds();
const cloudPath = 'book-image' + time + filePath.match(/\.[^.]+?$/)[0];
return wx.cloud.uploadFile({
cloudPath,
filePath,
}).then(res => {
console.log('upload', res)
let bookMes = self.data.bookMes;
bookMes.bookPic = res.fileID;
return self.setData({
bookMes
});
}).catch(err => {
console.log('error',err)
})
}</pre>
刪除圖片
刪除圖片或其他文件需要具體的fileId，可通過查詢得到，通過該fileID進行刪除。
<pre class="brush:js;" style="margin: 3px auto 0px; padding: 0px 0px 0px 5px; outline: none; background: rgb(255, 255, 255); width: 640px; line-height: 20px; clear: both; font-size: 14px; border-left: 3px solid rgb(108, 226, 108);"> wx.cloud.deleteFile({
fileList: [fileId],
success: res => {
console.log('delete', res.fileList)
},
fail: err => {
console.log('deleteE', err)
}
})</pre>
五、發現存在的問題
在實際寫例子的過程中，也發現了一些問題，因為云開發的功能開放不久，功能并不是很完善，總結了一些發現的小問題：
- 數據庫暫不支持模糊查詢
- 數據庫集合之間無法關聯
- 上傳圖片如果cloudPath和之前的圖片一致的話，返回結果雖然現實成功，但實際替換成了之前的舊圖
- globalData定義方法發生改變，無法與onLaunch同級進行定義。
六、結語
關于云開發，官方文檔給出的說明比較詳細，仔細閱讀文檔可以較快速得實現上手應用。但由于目前其功能的局限性，較為復雜的公司業務不適合采用該模式進行開發，適合個人小型業務采用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
