小程式的全棧開發新時代

李CHENGXI發表於2019-03-04
全棧

李成熙，騰訊雲高階工程師。2014年度畢業加入騰訊AlloyTeam，先後負責過QQ群、花樣直播、騰訊文件等專案。2018年加入騰訊云云開發團隊。專注於效能優化、工程化和小程式服務。微博 | 知乎 | Github

原文連結

什麼是小程式·雲開發

小程式·雲開發是微信團隊和騰訊雲團隊共同研發的一套小程式基礎能力，簡言之就是：雲能力將會成為小程式的基礎能力。整套功能是基於騰訊雲全新推出的雲開發(Tencent Cloud Base)所研發出來的一套完備的小程式後臺開發方案。

小程式·雲開發為開發者提供完整的雲端流程，簡化後端開發和運維概念，無需搭建伺服器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代。

該解決方案目前提供三大基礎能力支援：

  • 儲存：在小程式前端直接上傳/下載雲端檔案，在小程式雲控制檯視覺化管理

  • 資料庫：一個既可在小程式前端操作，也能在雲函式中讀寫的文件型資料庫

  • 雲函式：在雲端執行的程式碼，微信私有協議天然鑑權，開發者只需編寫業務邏輯程式碼

未來，我們還會整合更多的服務能力，為小程式提供更強有力的雲端支援。

如何使用小程式·雲開發

小程式的全棧開發新時代

上面就是小程式·雲開發簡單的使用圖譜：在小程式端，直接用官方提供的介面，在雲函式端，直接用官方提供的 Node SDK，就可以操作你雲的資源。以前開發小程式所擔憂的資料庫搭建、檔案系統部署，通通沒有。

你只需要有在小程式開發 IDE 裡面的 雲開發，開通一下，填寫環境 ID，便可以擁有小程式的雲能力！

小程式的全棧開發新時代
image

當然，其實用雲開發，並不排斥原有的後臺架構，通過下面的架構，你也可以無縫與原有的後臺服務相容，也簡化了一些小程式鑑權的邏輯：

小程式的全棧開發新時代

接下來，我會分別從小程式端、服務端講述如何使用這些雲資源。

使用雲能力

小程式端

客戶端，這裡是指在小程式端中。如果要使用雲開發能力，請做以下配置：

  • 在 app.json / game.json 中， 中增加欄位 "cloud": true
  • project.config.json 中增加了欄位 cloudfunctionRoot 用於指定存放雲函式的目錄
  • 初始化雲開發能力：
//app.js
App({
  onLaunch: function () {
    wx.cloud.init({
        traceUser: true // 使用者資訊會顯示在雲開發控制檯的使用者皮膚中
    });
  }
});
複製程式碼

小程式端初始化能力文件

在使用者管理中會顯示使用雲能力的小程式的訪問使用者列表，預設以訪問時間倒敘排列，訪問時間的觸發點是在小程式端呼叫 wx.cloud.init 方法，且其中的 traceUser 引數傳值為 true。

服務端

如果你想在雲函式中，操作檔案、資料庫和雲函式資源，你可以使用我們提供的服務端 SDK 進行操作。首先，進入到你的某個雲函式中，安裝以下依賴包：

npm i --save tcb-admin-node
複製程式碼

在雲函式中初始化

// 初始化示例
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-QgVLVzKu2312121`
}
複製程式碼

小程式端資料庫文件

服務端

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-QgVLVzKu4312121`
}
{
    photo: `cloud://tcb-xxx/0dc3e66fd6b53641e328e091ccb3b9c4e53874232e6bf-ZxSfee_fw658.jpg`,
    title: `美女`,
    _openid: `DFDFEX343xxdf-QgVLVzKu3312121`
}
{
    photo: `cloud://tcb-xxx/104b27e339bdc93c0da15a47aa546b6e9c0e3359c315-L8Px2Y_fw658.jpg`,
    title: `動物`,
    _openid: `DFDFEX343xxdf-QgVLVzKu3412121`
}
複製程式碼

服務端資料庫文件

控制檯

可以在控制檯裡，看到使用者操作的資料，你也可以自己在控制檯上新增、更新或刪除資料。

小程式的全棧開發新時代

如果資料量龐大，可以設定索引提供查詢的效率。

小程式的全棧開發新時代

資料庫也可以通過設定許可權，管控每個 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

開發者資源

由於小程式·雲開發是基於騰訊雲的雲開發開發的功能，因此在騰訊雲與小程式兩邊都有不少的開發者資源，這裡供大家參閱讀：

相關文章