微信小程序---快速上手云開發
一、初識云開發
- 小程序·云開發是微信團隊聯合騰訊云推出的專業的小程序開發服務。
- 開發者可以使用云開發快速開發小程序、小游戲、公眾號網頁等，并且原生打通微信開放能力。
- 開發者無需搭建服務器，可免鑒權直接使用平臺提供的API進行業務開發
- 目前云開發包含：云數據庫，云函數，云存儲，云調用
優勢
- 無需搭建服務器，只需使用平臺提供的各項能力，即可快速開發業務。
- 無需管理證書、簽名、秘鑰，直接調用微信 API 。復用微信私有協議及鏈路，保證業務安全性。
- 支持環境共享，一個后端環境可開發多個小程序、公眾號、網頁等，便捷復用業務代碼與數據。
- 開發者可以使用任意語言和框架進行代碼開發，構建為容器后，快速將其托管至云開發。
- 支持按量計費模式，后端資源根據業務流量自動擴容，先使用后付費，無需支付閑置成本。
能力
-
儲存數據與文件
- 云數據庫： 文檔型數據庫，穩定可靠；支持在小程序端和云函數中調用。
- 存儲： 云端文件存儲，自帶 CDN 加速，支持在前端直接上傳/下載，可在云開發控制臺可視化管理。
-
運行后端代碼
- 云函數： 在云端運行的代碼，微信私有協議天然鑒權，開發者只需編寫自身業務邏輯代碼。
- 云托管： 支持托管服務容器，不限框架和語言，常駐運行、天然鑒權，可快速進行業務遷移
-
擴展能力
- 靜態網站： 快速部署網站，支持自定義域名、網站防刷等配置。
- 內容管理（CMS）： 一鍵部署，可視化管理文本、Markdown、圖片等多種內容，使用云數據庫讀取數據并使用數據。
-
打通微信生態
-
云調用： 云函數內免鑒權調用小程序開放接口，包括服務端調用、獲取開放數據等能力。
-
微信支付： 免鑒權、免簽名計算、免 access_token，在云函數內原生調用微信支付接口。
-
環境共享： 跨賬號資源和能力復用，可授權云開發資源給其他小程序/公眾號使用。
-
比較
| 內容 | 云開發 | 傳統開發 |
|---|---|---|
| 開發語言 | node.js | java,php.... |
| 難易程度 | 簡單 | 復雜 |
| 開發周期 | 1-5周 | 1-5月 |
| 部署難度 | 基本不用部署(不需要：域名，備案，https) | 部署費時費力(需要：域名，備案，https) |
| 適合項目 | 中小型項目 | 大型項目 |
| 費用 | 免費版基本夠用 | 收費很高 |
二、搭建云開發環境
下載穩定版本微信開發工具：具體操作可以看之前寫的文章
微信開發基礎
注意：這里我們建項目不使用云開發
開通云開發
-
點擊下圖箭頭所示,如果你第一步創建項目時,沒有使用自己的appid,這里不會有下圖箭頭所示的云朵.
-
如果是第一次創建需要給云開發環境取名
-
獲取云開發環境id
初始化云開發環境
在app.js里寫入環境id,注意這里要用你自己的云開發環境id
-
初始化云開發環境前，先去云開發控制臺，拿到云開發環境id，如下圖
-
拿到環境id以后，就去app.js里做云開發環境初始化，如下
```
// 小程序啟動就會執行
onLaunch() {
// 連接云開發
wx.cloud.init({
env:'云開發環境id',//云開發環境id
})
},
```
注意：用時候云開發創建好以后,初始化可能需要一點時間,所以如果這里初始化有報錯,記得關閉開發者工具,等幾分鐘再重新打開即可.
三、云開發
一、云數據
1、在云數據庫里新建集合
新建一個goods表
點擊 云開發=》數據庫=》添加====》添寫集合名稱
2、數據庫權限分配
讓用戶查詢到我們創建的goods數據，需要把權限改為所有用戶可讀
- 僅創建者可讀寫：管理員創建了這條數據，普通用戶無法讀寫
- 所有用戶可讀：不管誰創建的數據，所有人都可以讀
3、數據庫增、刪、改、查操作
3-1查詢 get()
1. 基礎查詢get()
傳統寫法
wx.cloud.database().collection('goods')
.get({
// 請求成功
success(res){
console.log('請求成功',res)
},
// 請求失敗
fail(err){
console.log('請求失敗',err)
}
}) //查詢
ES6簡寫
wx.cloud.database().collection('goods')
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{})
傳統寫法需要在外部定義一個參數存放this然后才能在回調函數里setData，而es6直接可以在查詢結果里設置數據this.setData推薦使用ES6寫法
2. 條件查詢 where()
在where里面包裹需要查詢的條件對象，如：where({name:'蘋果'})
wx.cloud.database().collection('goods')
.where({name:'蘋果'})//條件查詢
.get()
.then(res=>{
// 請求成功
console.log('請求成功',res)
})
3. 查詢單條數據 doc()
主要用于根據id查詢相關數據
- doc是用來查詢單條數據的。比如商品詳情頁。
- doc里面用到的參數就是我們數據里的_id字段
wx.cloud.database().collection('goods')
.doc(54ad1eea61dd21cd0555df6772d2091c)//條件查詢
.get()
.then(res=>{
// 請求成功
console.log('請求成功',res)
})
4. 數據庫排序orderBy()
orderBy方法在做排序的時候，接受兩個參數
- 根據那個字段排序
- 排序規則（升序或者降序）。升序用asc，降序用desc
如我們根據商品價格從低到高升序排列
wx.cloud.database().collection('goods')
.orderBy('price',asc)
.get()
.then(res=>{
// 請求成功
console.log('請求成功',res)
})
5. 返回指定條數的數據limit()
limit用來指定查詢結果集數量上限。
wx.cloud.database().collection('goods')
.limit(3)
.get()
.then(res=>{
// 請求成功
console.log('請求成功',res)
})
6. 分頁方法skip()
skip指定查詢返回結果時從指定序列后的結果開始返回，常用于分頁。
比如我們有100條數據，想從第10條開始返回數據，可以通過skip(10)來實現。
查詢第三頁誒也四條
wx.cloud.database().collection('goods')
.limit(4)
.skip(12)
.get()
.then(res=>{
// 請求成功
console.log('請求成功',res)
})
比如我們有100條數據，每次返回20條數據。那么就可以分5頁返回。
- 第1頁 limit(20).skip(0)
- 第2頁 limit(20).skip(20)
- 第3頁 limit(20).skip(40)
- 第4頁 limit(20).skip(60)
- 第5頁 limit(20).skip(80)
7. Command數據庫操作符
| 查詢指令 | 說明 |
|---|---|
| eq | 等于 |
| neq | 不等于 |
| lt | 小于 |
| lte | 小于或等于 |
| gt | 大于 |
| gte | 大于或等于 |
| in | 字段值在給定數組中 |
| nin | 字段值不在給定數組中 |
舉例：查詢大于30的數
const db = wx.cloud.database().collection('goods')
const _ = db.command
db.collection('todos')
.where({
price: _.gt(30)
})
.get({
success: function(res) {
console.log(res.data)
}
})
| 邏輯指令 | 說明 |
|---|---|
| and | 且 |
| or | 或 |
price: _.eq(0).or(_.eq(100)) |
3-2添加 add()
通過add可以實現數據的添加
添加是一個對象，對象里包含需要添加的data數據
wx.cloud.database().collection('goods')
.add({
data:{
name:'名稱',
price:'價格'
}
})
.then(res=>{
// 請求成功
console.log('請求成功',res)
})
})
3-3修改update()
修改數據庫里已存在的數據，根據查詢結果修改相關數據
例如：結合doc進行修改單條數據
wx.cloud.database().collection('goods')
.doc(54ad1eea61dd21cd0555df6772d2091c)//條件查詢
.update({
data:{
price:10
}
})
.then(res=>{
// 請求成功
console.log('請求成功',res)
})
})
3-4刪除remove()
刪除數據，結合doc刪除單條數據
wx.cloud.database().collection('goods')
.doc(54ad1eea61dd21cd0555df6772d2091c)//條件查詢
.remove()
.then(res=>{
// 請求成功
console.log('請求成功',res)
})
})
4、數據的導入和導出-------------------
. 數據導出，做數據備份
. 數據導入，為了快速的大量的創建一些數據。
二、云函數
- 云函數也是運行在服務器上的，只不過和我們傳統開發語言相比。
- 微信官方為我們提供的傻瓜式的一鍵部署。
- 只需要把心思花在業務邏輯代碼的編寫上即可。
- 無需關心寫好如何部署，無需關心安全問題，無需關心鑒權問題。
1、云函數優點
云函數屬于管理端，在云函數中運行的代碼擁有不受限的數據庫讀寫權限和云文件讀寫權限。
需特別注意，云函數運行環境即是管理端，與云函數中的傳入的 openId 對應的微信用戶是否是小程序的管理員 / 開發者無關。
| 操作 | 云函數 | 云數據庫 |
|---|---|---|
| 返回數據上限 | 100條 | 20條 |
| 更新數據 | 都可以更新 | 只有自己創建的才可以更新 |
| 刪除數據 | 都可以刪除 | 只有自己創建的才可以刪除 |
| 運行環境 | 運行在云端Node.js環境 | 運行在小程序本地 |
| 實現功能豐富度 | 非常豐富 | 只能實現數據庫增刪改查 |
2、云函數創建過程
- 配置云函數
- 編寫云函數
- 一鍵部署云函數
- 調用云函數
1-配置云函數
-
創建一個文件夾cloud和pages平行
-
在project.config.json里面配置云函數所在目錄為cloud
"cloudfunctionRoot":"/cloud"然后點擊保存，我們的cloud文件夾前面就有一個云朵表示配置云函數文件成功
-
選中cloud文件===》新建Node.js云函數（右鍵）
-
創建成功后，工具會提示是否立即本地安裝依賴，確定后工具會自動安裝 wx-server-sdk。
2-編寫云函數
- event: 指的是觸發云函數的事件，當小程序端調用云函數時，event 就是小程序端調用云函數時傳入的參數，外加后端自動注入的小程序用戶的 openid 和小程序的 appid。
- context: 對象包含了此處調用的調用信息和運行狀態，可以用它來了解服務運行的情況
// 云函數入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函數入口函數 exports.main = async (event, context) => { return {} }
注意：可能存在問題
報錯1：Error: errCode: -404011 cloud function execution error Cannot find module 'wx-server-sdk'
npm install --save wx-server-sdk@latest
報錯2：errMsg:Evenironment not fount
出現原因：如果你有兩個云開發環境，偶爾會出現上所示的問題。
解決問題：有兩種
- 在云函數里指定你要使用那個云開發環境
// 云函數入口文件 const cloud = require('wx-server-sdk') cloud.init({ env:'云開發環境id' }) // 云函數入口函數 exports.main = async (event, context) => { return cloud.database().collection('goods').get() } - 使用DYNAMIC_CURRENT_ENV常量 （提倡使用這個）
cloud.init({ env:cloud.DYNAMIC_CURRENT_ENV })
1、云函數獲取數據
小程序調用數據庫只能返回20條數據
云函數可以返回100條數據
// 云函數入口函數
exports.main = async (event, context) => {
return cloud.database().collection('goods').get()
}
2、云函數修改數據
. 小程序直接調用數據庫修改會有問題
只能修改自己創建的數據，別人創建的數據，就沒有辦法修改了。
如何解決呢？
用云函數來修改就可以解決這個問題啦。
-
先創建云函數updateGoods
exports.main = async (event, context) => { return cloud.database().collection('goods') .doc(event.id) .update({ data:{ price:event.price } }) } -
調用云函數就行修改
wx.cloud.callFunction({ name:'updateGoods ', data:{ id:id, price:1 } }).then(res=>{})
3、云函數刪除數據
創建一個刪除商品的云函數
exports.main = async (event, context) => {
return cloud.database().collection('goods')
.doc(event.id)
.remove()
}
3-一鍵部署云函數
4-調用云函數
Cloud.callFunction(object: Object): Promise<Object>
調用云函數參數
| 屬性 | 類型 | 必填 | 說明 |
|---|---|---|---|
| name | string | 是 | 云函數名 |
| data | Object | 否 | 傳遞給云函數的參數，在云函數中可通過 event 參數獲取 |
| config | Object | 否 | 配置 |
一、云存儲
- 存儲就是可以用來存儲視頻，音頻，圖片，文件的一個云存儲空間。
- 如果你的小程序需要用到視頻播放，音頻播放，圖片展示，文件上傳與下載功能，就可以用到我們的云存儲了。
- 使用云存儲來存儲文件時，文件名的命名有一些規則，建議看一下。
- 不能為空
- 不能以/開頭
- 不能出現連續/
- 編碼長度最大為850個字節
- 推薦使用大小寫英文字母、數字，即[a-z，A-Z，0-9]和符號 -，!，_，.，* 及其組合
- 不支持 ASCII 控制字符中的字符上(↑)，字符下(↓)，字符右(→)，字符左(←)，分別對應 CAN(24)，EM(25)，SUB(26)，ESC(27)
- 如果用戶上傳的文件或文件夾的名字帶有中文，在訪問和請求這個文件或文件夾時，中文部分將按照 URL Encode 規則轉化為百分號編碼。
- 不建議使用的特殊字符: ` ^ " \ { } [ ] ~ % # \ > < 及 ASCII 128-255 十進制
- 可能需特殊處理后再使用的特殊字符: ， : ; = & $ @ + ?（空格）及ASCII 字符范圍：00-1F 十六進制（0-31 十進制）以及7F（127 十進制）
1、云開發控制臺管理文件
控制臺也可以很方便的管理文件
2、上傳圖片到云存儲
- 我們上傳圖片之前需要先選擇圖片，所以這里用到一個圖片選擇的功能
wx.chooseImage(Object object)
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作為img標簽的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths
}
})
- 然后調用文件上傳的api接口即可
wx.cloud.uploadFile
將本地資源上傳至云存儲空間，如果上傳至同一路徑則是覆蓋寫
wx.cloud.uploadFile({
cloudPath: 'example.png',
filePath: '', // 文件路徑
}).then(res => {
// get resource ID
console.log(res.fileID)
})
3、下載文件
下載
使用wx.cloud.downloadFile下載文件
下載并打開word，excel，pdf
使用wx.openDocument打開文件
浙公網安備 33010602011771號