小程式的全棧開發新時代
| 編輯推薦: |
| 本文來自於伯樂線上,本文通過介紹什麼是小程式·雲開發以及如何使用雲函式，詮釋了小程式開發的新時代。 |
什麼是小程式·雲開發
小程式·雲開發是微信團隊和騰訊雲團隊共同研發的一套小程式基礎能力，簡言之就是：雲能力將會成為小程式的基礎能力。整套功能是基於騰訊雲全新推出的雲開發(Tencent Cloud Base)所研發出來的一套完備的小程式後臺開發方案。
小程式·雲開發為開發者提供完整的雲端流程，簡化後端開發和運維概念，無需搭建伺服器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代。
該解決方案目前提供三大基礎能力支援：
儲存：在小程式前端直接上傳/下載雲端檔案，在小程式雲控制檯視覺化管理
資料庫：一個既可在小程式前端操作，也能在雲函式中讀寫的文件型資料庫
雲函式：在雲端執行的程式碼，微信私有協議天然鑑權，開發者只需編寫業務邏輯程式碼
未來，我們還會整合更多的服務能力，為小程式提供更強有力的雲端支援。
如何使用小程式·雲開發
上面就是小程式·雲開發簡單的使用圖譜：在小程式端，直接用官方提供的介面，在雲函式端，直接用官方提供的 Node SDK，就可以操作你雲的資源。以前開發小程式所擔憂的資料庫搭建、檔案系統部署，通通沒有。
你只需要有在小程式開發 IDE 裡面的 雲開發，開通一下，填寫環境 ID，便可以擁有小程式的雲能力！
當然，其實用雲開發，並不排斥原有的後臺架構，通過下面的架構，你也可以無縫與原有的後臺服務相容，也簡化了一些小程式鑑權的邏輯：
接下來，我會分別從小程式端、服務端講述如何使用這些雲資源。
使用雲能力
小程式端
客戶端，這裡是指在小程式端中。如果要使用雲開發能力，請做以下配置：
1.在 app.json / game.json 中， 中增加欄位 "cloud": true
2.project.config.json 中增加了欄位 cloudfunctionRoot 用於指定存放雲函式的目錄
3.初始化雲開發能力：
//app.js
App({
onLaunch: function () {
wx.cloud.init({
traceUser: true // 使用者資訊會顯示在雲開發控制檯的使用者面板中
});
}
});
小程式端初始化能力文件
在使用者管理中會顯示使用雲能力的小程式的訪問使用者列表，預設以訪問時間倒敘排列，訪問時間的觸發點是在小程式端呼叫 wx.cloud.init 方法，且其中的 traceUser 引數傳值為 true。
服務端
如果你想在雲函式中，操作檔案、資料庫和雲函式資源，你可以使用我們提供的服務端 SDK 進行操作。首先，進入到你的某個雲函式中，安裝以下依賴包：
在雲函式中初始化
// 初始化示例
const app = require('tcb-admin-node');
// 初始化資源
// 雲函式下不需要secretId和secretKey。
// env如果不指定將使用預設環境
app.init({
secretId: 'xxxxx',
secretKey: 'xxxx',
env: 'xxx'
});
//雲函式下使用預設環境
app.init()
//雲函式下指定環境
app.init({
env: 'xxx'
});
服務端初始化文件
儲存
雲開發提供儲存空間、上傳檔案、下載檔案、CDN加速檔案訪問等能力,開發者可以在小程式端與服務端通過 API 使用這些能力。
小程式端
// 選擇圖片
wx.chooseImage({
success: dRes => {
// 上傳圖片
const uploadTask = wx.cloud.uploadFile({
cloudPath: `${Date.now()}-${Math.floor(Math.random(0, 1) * 10000000)}.png`, // 隨機圖片名
filePath: dRes.tempFilePaths[0], // 本地的圖片路徑
success: console.log,
fail: console.error
});
},
fail: console.error,
});
小程式端儲存文件
服務端
const app = require('tcb-admin-node');
app.init();
app.uploadFile({
cloudPath: "cover.png",
fileContent: fs.createReadStream(`${__dirname}/cover.png`)
}).then((res) => {
console.log(res);
}).catch((err) => {
console.error(err);
});
控制檯
上傳好的檔案，就會出現在控制檯中，如下圖。你可以在控制檯裡刪除、下載或者檢視圖片的詳情。
你還可以控檔案整體的許可權，這裡還有一些具體的介紹。
服務端儲存文件
資料庫
小程式雲提供文件型資料庫 ( document-oriented database )，資料庫包含多個集合（相當於關係型資料中的表），集合近似於一個 JSON 陣列，陣列中的每個物件就是一條記錄，記錄的格式是 JSON 文件。
每條記錄都有一個 _id 欄位用以唯一標誌這條記錄、一個 _openid 欄位用以標誌記錄的建立者，即小程式的使用者。開發者可以自定義 _id，但不可在小程式端自定義（在服務端可以） _openid 。_openid 是在文件建立時由系統根據小程式使用者預設建立的，開發者可使用其來標識和定位文件。
資料庫 API 分為小程式端和服務端兩部分，小程式端 API 擁有嚴格的呼叫許可權控制，開發者可在小程式內直接呼叫 API 進行非敏感資料的操作。對於有更高安全要求的資料，可在雲函式內通過服務端 API 進行操作。雲函式的環境是與客戶端完全隔離的，在雲函式上可以私密且安全的操作資料庫。
資料庫 API 包含增刪改查的能力，使用 API 操作資料庫只需三步：獲取資料庫引用、構造查詢/更新條件、發出請求。切記，在操作資料庫前，請先在控制檯中建立 collection。
小程式端
const db = wx.cloud.database();
// 插入資料
db.collection('photo').add({
data: {
photo: 'cloud://tcb-xxx/05ca1d38f86f90d66d4751a730379dfa6584dde05ab4-Ma9vMN_fw658.jpg',
title: '風景'
}
});
// 提取資料
db.collection('photo').get().then((res) => {
let data = res.data;
console.log(data);
});
// 輸出
// 在小程式端， _openid 會自動插入到資料庫中
{
photo: 'cloud://tcb-xxx/05ca1d38f86f90d66d4751a730379dfa6584dde05ab4-Ma9vMN_fw658.jpg',
title: '風景',
_openid: 'oLlMr5FICCQJV-QgVLVzKu1212341'
}
小程式端資料庫文件
服務端
const app = require('tcb-admin-node');
app.init();
const db = app.database();
db.collection('photo').limit(10).get().then((res) => {
console.log(res);
}).catch((err) => {
console.error(err);
});
// 輸出
// 因為是在服務端，其它使用者的也可以提取出來
{
photo: 'cloud://tcb-xxx/05ca1d38f86f90d66d4751a730379dfa6584dde05ab4-Ma9vMN_fw658.jpg',
title: '風景',
_openid: 'oLlMr5FICCQJV-QgVLVzKu1342121'
}
{
photo: 'cloud://tcb-xxx/0dc3e66fd6b53641e328e091ccb3b9c4e53874232e6bf-ZxSfee_fw658.jpg',
title: '美女',
_openid: 'DFDFEX343xxdf-QgVLVzKu12452121'
}
{
photo: 'cloud://tcb-xxx/104b27e339bdc93c0da15a47aa546b6e9c0e3359c315-L8Px2Y_fw658.jpg',
title: '動物',
_openid: 'DFDFEX343xxdf-QgVLVzKu1342121'
}
服務端資料庫文件
控制檯
可以在控制檯裡，看到使用者操作的資料，你也可以自己在控制檯上新增、更新或刪除資料。
如果資料量龐大，可以設定索引提供查詢的效率。
資料庫也可以通過設定許可權，管控每個 collection。
雲函式
雲函式是一段執行在雲端的程式碼，無需管理伺服器，在開發工具內一鍵上傳部署即可執行後端程式碼。
開發者可以在雲函式內獲取到每次呼叫的上下文（appid、openid 等），無需維護複雜的鑑權機制，即可獲取天然可信任的使用者登入態（openid）。
小程式端
wx.cloud.callFunction({
name: 'addblog', // 雲函式名稱
data: { // 傳到雲函式處理的引數
title: '雲開發 TCB',
content: '儲存、資料庫存、雲函式'
}
}).then(res => {
console.log(res)
}).catch((err) => {
console.error(err);
});
服務端
const app = require("tcb-admin-node");
app.init();
app.callFunction({
name: 'addblog', // 雲函式名稱
data: { // 傳到雲函式處理的引數
title: '雲開發 TCB',
content: '儲存、資料庫存、雲函式'
}
}).then((res) => {
console.log(res);
}).catch((err) => {
console.error(err);
});
服務端雲函式文件
控制檯
上傳好之後的雲函式，都會在這裡羅列出來。
每次呼叫雲函式，都可以在這裡看到日誌，還可以構造測試的引數，用於除錯。
語法糖
大部份的介面，目前都支援兩種寫法，分別是Promise 和 Async/Await，本節以 callFunction 作為例子，在雲函式中介紹這兩種寫法。 Async/Await 本質上是基於 Promise 的一種語法糖，它只是把 Promise 轉換成同步的寫法而已。
Promise
const app = require("tcb-admin-node");
app.init();
exports.main = (event, context, callback) => {
app.callFunction({
name: 'addblog', // 雲函式名稱
data: { // 傳到雲函式處理的引數
title: '雲開發 TCB',
content: '儲存、資料庫存、雲函式'
}
}).then((res) => {
console.log(res);
callback(null, res.data);
}).catch((err) => {
callback(err);
});
};
Async/Await
const app = require("tcb-admin-node");
app.init();
exports.main = async (event, context) => {
let result = null;
try {
result = await app.callFunction({
name: 'addblog', // 雲函式名稱
data: { // 傳到雲函式處理的引數
title: '雲開發 TCB',
content: '儲存、資料庫存、雲函式'
}
});
}
catch (e) {
return e;
}
return result;
};
在雲函式裡使用，由於是 Node 8.9 或以上的環境，因此天然支援 Async/Await 詰法，但在小程端要使用的話，需要額外引入 Polyfill，比如這個開源的專案：regenerator