小程序云開發(fā)初探(小結(jié))
云開發(fā)是微信平臺(tái)新開放的功能，為開發(fā)者提供集成了服務(wù)器，數(shù)據(jù)庫(kù)和資源存儲(chǔ)的云服務(wù)。本文將基于官方文檔，以一個(gè)小例子來(lái)作為探索云開發(fā)的相關(guān)功能。
一、新建云開發(fā)項(xiàng)目新建項(xiàng)目
將微信開發(fā)助手更新之后，選擇云開發(fā)模板。
項(xiàng)目目錄
項(xiàng)目目錄分為了2大塊內(nèi)容：cloudfunctions（云函數(shù)）和miniprogram。miniprogram存放的是和普通開發(fā)相同的業(yè)務(wù)代碼和資源，cloudfunctions中則存放了可以上傳至云端的代碼，在云開發(fā)中被稱為云函數(shù)。
云開發(fā)模板建立之后，會(huì)帶有一些相關(guān)例子可以熟悉api。
二、控制臺(tái)
微信開發(fā)者工具更新之后，在工具欄上會(huì)有一個(gè)控制臺(tái)入口，點(diǎn)擊可出現(xiàn)以下面板，可查看相關(guān)數(shù)據(jù)情況。
概覽
概覽界面如上圖所示，展示了該 云開發(fā)項(xiàng)目下使用云資源的統(tǒng)計(jì)數(shù)據(jù)。
用戶管理
凡是訪問過(guò)云項(xiàng)目的用戶，都會(huì)在用戶管理下留有訪問記錄。前提是該小程序在app.js中設(shè)置traceUser:true，表示允許記錄用戶信息。
wx.cloud.init({
env:'......',
traceUser: true,
})
數(shù)據(jù)庫(kù)
數(shù)據(jù)庫(kù)是控制臺(tái)中最常用的功能之一，在該界面下，可以快速建立數(shù)據(jù)集合，可以理解為數(shù)據(jù)表?？稍诳刂婆_(tái)中建立新的集合，添加記錄有三種方式：控制臺(tái)手動(dòng)添加、文件導(dǎo)入以及調(diào)用api。調(diào)用api會(huì)在每條記錄中自動(dòng)插入用戶_openid。
存儲(chǔ)管理
存儲(chǔ)管理可保存小程序端上傳的文件，可通過(guò)調(diào)用api進(jìn)行上傳，上傳名稱和路徑需要自己定義。
云函數(shù)
云函數(shù)對(duì)cloudfunctions中上傳的函數(shù)進(jìn)行管理，可進(jìn)行調(diào)試，查看調(diào)用日志等信息。
云函數(shù)添加方式有2種，可視化添加與IDE添加，可視化添加的云函數(shù)直接上傳至了云端，IDE中添加需要上傳部署才可以調(diào)用。如果要?jiǎng)h除云函數(shù)，在控制臺(tái)刪除之后，IDE中同步云函數(shù)列表即可。
統(tǒng)計(jì)分析
統(tǒng)計(jì)分析對(duì)云服務(wù)的調(diào)用情況有針對(duì)得給出了數(shù)據(jù)。
三、環(huán)境配置
api會(huì)在每條記錄中自動(dòng)插入用戶_openid。
項(xiàng)目初始化需要在app.js中進(jìn)行配置，env中填寫的就是自主配置的環(huán)境ID。
wx.cloud.init({
env:'mina-cloud-test001'
})
四、實(shí)際應(yīng)用
本例以上傳書籍信息為實(shí)際應(yīng)用，實(shí)現(xiàn)基本的書籍信息增刪改查功能，以及圖片的上傳刪除。
讀取數(shù)據(jù)庫(kù)數(shù)據(jù)
先通過(guò)調(diào)用wx.cloud.database();獲取數(shù)據(jù)庫(kù)所有集合，然后通過(guò)查詢具體集合的方式獲取數(shù)據(jù)。
const db = wx.cloud.database();
const _ = db.command;
db.collection('bookList').get().then(res => {
console.log('get', res)
self.setData({
bookList: res.data
});
})
增加數(shù)據(jù)
const db = wx.cloud.database();
const _ = db.command;
db.collection('bookList').add({
data: {
bookMes: self.data.bookMes
}
}).then(res => {
console.log(res)
})
刪除數(shù)據(jù)
db.collection('bookList').doc(id).remove().then(res => {
console.log(res)
wx.showToast({
title: '刪除成功！',
})
self.getBook();
}).catch(err => {
console.log('err', res)
})
})
增加數(shù)據(jù)
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)
})
})
改變數(shù)據(jù)
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)
查詢數(shù)據(jù)&調(diào)用云函數(shù)
查詢數(shù)據(jù)采用云函數(shù)為例
先在云函數(shù)中定義查詢函數(shù)，每個(gè)需要調(diào)用云開發(fā)api的云函數(shù)都必須使用wx-server-sdk，當(dāng)新創(chuàng)建一個(gè)云函數(shù)時(shí)，項(xiàng)目會(huì)提示是否需要使用依賴，選擇是則會(huì)自動(dòng)安裝wx-server-sdk。
函數(shù)中的event參數(shù)代表由小程序端傳遞過(guò)來(lái)的參數(shù)，除此之外默認(rèn)包含了userInfo，可用來(lái)做用戶鑒權(quán)操作。
//云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const _ = db.command
//云函數(shù)函數(shù)入口
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
}
})
}
小程序端引用云函數(shù)，name為云函數(shù)文件夾的名稱，data中存放的是傳遞給云函數(shù)的參數(shù)，云函數(shù)通過(guò)event獲取：
wx.cloud.callFunction({
name: 'searchBook',
// 傳給云函數(shù)的參數(shù)
data: {
bookMes: self.data.bookMes
}
}).then(res => {
console.log('search',res.result.data)
self.setData({
bookList:res.result.data
})
})
本文中的api使用方式僅為示例，實(shí)際上服務(wù)端的api比小程序端的api豐富，實(shí)現(xiàn)功能更多。建議設(shè)計(jì)文件存儲(chǔ)、數(shù)據(jù)庫(kù)增刪改查的操作都在云函數(shù)中進(jìn)行。
上傳圖片
上傳圖片需要先調(diào)用wx.chooseImage返回的filePath參數(shù)，然后自主定義cloudPath，即上傳至云端的地址。
choose() {
let self = this
wx.chooseImage({
count: 1, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
success: function (res) {
// console.log(res.tempFilePaths[0])
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的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)
})
}
刪除圖片
刪除圖片或其他文件需要具體的fileId，可通過(guò)查詢得到，通過(guò)該fileID進(jìn)行刪除。
wx.cloud.deleteFile({
fileList: [fileId],
success: res => {
console.log('delete', res.fileList)
},
fail: err => {
console.log('deleteE', err)
}
})
五、發(fā)現(xiàn)存在的問題
在實(shí)際寫例子的過(guò)程中，也發(fā)現(xiàn)了一些問題，因?yàn)樵崎_發(fā)的功能開放不久，功能并不是很完善，總結(jié)了一些發(fā)現(xiàn)的小問題：
- 數(shù)據(jù)庫(kù)暫不支持模糊查詢
- 數(shù)據(jù)庫(kù)集合之間無(wú)法關(guān)聯(lián)
- 上傳圖片如果cloudPath和之前的圖片一致的話，返回結(jié)果雖然現(xiàn)實(shí)成功，但實(shí)際替換成了之前的舊圖
- globalData定義方法發(fā)生改變，無(wú)法與onLaunch同級(jí)進(jìn)行定義。
六、結(jié)語(yǔ)
關(guān)于云開發(fā)，官方文檔給出的說(shuō)明比較詳細(xì)，仔細(xì)閱讀文檔可以較快速得實(shí)現(xiàn)上手應(yīng)用。但由于目前其功能的局限性，較為復(fù)雜的公司業(yè)務(wù)不適合采用該模式進(jìn)行開發(fā)，適合個(gè)人小型業(yè)務(wù)采用。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單音樂播放器，可拖動(dòng)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了JS獲取Table中td值的方法,實(shí)例分析了javascript操作table中td的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解
這篇文章主要介紹了Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
使用bat打開多個(gè)cmd窗口執(zhí)行g(shù)ulp、node
本文主要介紹了使用bat打開多個(gè)cmd窗口執(zhí)行g(shù)ulp、node的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
Code：loadScript( )加載js的功能函數(shù)
Code：loadScript( )加載js的功能函數(shù)...2007-02-02
uniapp的webview實(shí)現(xiàn)左滑返回上一個(gè)頁(yè)面操作方法
uniapp默認(rèn)左滑是關(guān)閉整個(gè)webview,而不是關(guān)閉當(dāng)前頁(yè),本文給大家介紹uniapp的webview實(shí)現(xiàn)左滑返回上一個(gè)頁(yè)面操作方法,感興趣的朋友一起看看吧2023-12-12
最近做項(xiàng)目需要這樣的需求，當(dāng)用戶點(diǎn)擊標(biāo)簽欄按鈕，向下彈出菜單，再次點(diǎn)擊，收回菜單。接下來(lái)通過(guò)本文給大家介紹微信小程序?qū)崿F(xiàn)彈出菜單功能，感興趣的朋友一起看看吧2018-06-06
JS中用try catch對(duì)代碼運(yùn)行的性能影響分析
要捕獲JavaScript代碼中的異常一般會(huì)采用 try catch，不過(guò)try catch的使用是否是對(duì)代碼性能產(chǎn)生影響呢？答案是肯定有的，但是有多少不得而知。下面這篇文章就給大家詳細(xì)介紹了在JS中用try catch對(duì)代碼運(yùn)行的性能影響，有需要的朋友們可以參考借鑒。2016-12-12
微信小程序?qū)崿F(xiàn)客服功能(客服消息)的全過(guò)程
在最近做的微信小程序中需要實(shí)現(xiàn)一個(gè)自帶的客服功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)客服功能(客服消息)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
簡(jiǎn)單實(shí)現(xiàn)jQuery輪播效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)jQuery輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08