
3 月伊始,ifanr 旗下品牌——知曉雲 3.0 版本正式上線。此次更新得到業內許多開發者的密切關注和積極支援,在此,我代表知曉雲團隊表示萬分感謝哈。( ̄▽ ̄)~*
知曉雲是業界第一個支援多平臺小程式開發的後端雲服務,它免去了小程式開發中伺服器搭建、域名備案、資料介面開發、線上運維等繁瑣流程,讓開發者更快、更低成本地做出優質的小程式。
言歸正傳。和許多童鞋一樣,小 K 使用知曉雲時,也是第一次開發小程式,開發過程也是百轉曲折。 因此,小 K 希望通過這篇文章,和各位童鞋進行交流。畢竟,大家的學習歷程是相似的,遇到的困惑也應該差不多。
本文結構大致如下:
- 談談如何成為支付寶小程式開發者。
- 聊聊如何建立我的第一個支付寶小程式。
- 以一個 Demo 為例,詳細講講如何在支付寶小程式中接入和使用知曉雲 SDK。
如何成為一名支付寶小程式開發者?
申請成為支付寶小程式開發者,是一件再簡單不過的事兒,僅需 2 步,比把大象放進冰箱還簡單。
第一步,登入螞蟻金服開放平臺,註冊成為小程式開發使用者。此過程需要你依次完成賬號資訊、郵箱啟用和資訊登記等流程。

第二步,完成上述操作後,就能進入小程式管理後臺,點選建立應用並填寫資訊,建立成功後即可獲取開發小程式的 AppID。 嗯,現在小 K 已經是一枚準小程式開發者啦。(後續請進入小程式配置-設定-開發設定,根據平臺的設定方式教程,配置介面加簽方式,獲得支付寶公鑰和金鑰檔案)


如何建立我的第一個小程式?
獲得了「准入資格」後,小 K 開始參照小程式官方文件,下載官方的開發者工具並建立了一個初始化的小程式。

Well done!小 K 的第一個初始化小程式誕生了~

接下來,可以看看支付寶小程式官方的體驗小程式 Demo 教程文件,熟悉一下小程式程式碼組織方式和開發特性。

現在,有了開發工具和基礎知識積累,可以試試 freestyle 咯。
唯一的問題是:小 K 應該選擇什麼型別的小程式作為 Demo 呢?
對於 Demo 選擇,唯一的原則就是精簡
- 「簡」是像小 K 這樣的小白開發者一看就懂。
- 「精」是儘可能在有限的程式碼中,體現知曉雲功能的強大性。
於是,我選擇了個經典的 TodoMVC 的小程式——「我的書架」作為示例。

由於「我的書架」 Demo 將知曉雲的核心模組之一——資料管理的 CRUD 操作很好地展示了出來,所以,我們希望通過這個 Demo 讓各位童鞋學會利用知曉雲,完成常見的資料增刪改查功能。

如何在小程式中呼叫知曉雲 SDK?
- 準備工作
在正式使用知曉雲的 SDK 前,首先確保走完以下 2 個流程:
第一,完成小程式的授權。目前,知曉雲在註冊模組和設定模組都有提供小程式授權操作,二者的授權流程大體一致。在這裡,我們演示設定模組的小程式操作。
點選應用標籤,進入應用的管理皮膚;

進入管理皮膚後,切換到設定模組並進入應用設定 tab 頁,點選平臺設定-支付寶小程式-立即開通,點選編輯並填寫相關配置資訊後即可完成授權。

第二,在「小程式後臺」配置安全域名。

- 裝載 SDK
接下來,看看知曉雲的 SDK 的使用說明文件。老夫掐指一算,將 SDK 的接入小程式的方法和資料表操作看了一遍,約莫花費 10 分鐘。
畢竟 Demo 只涉及資料操作嘛,所以要做到有的放矢,要啥看啥。
下載知曉雲提供的 SDK 後,將其引入小程式的 app.js
中,並通過在前面的設定模組的小程式設定 tab 頁中獲取當前應用的 ClientID
。

- 設計資料結構和建立資料表
完成上述操作後,小 K 就可以使用 SDK 提供的各種介面,接下來思考一下「我的書架」將用到什麼資料及其結構。
由於是第一個 Demo ,本著精簡的原則,小 K 在此就只設計了一個 bookName
的欄位

Tips:知曉雲的資料管理模組會為每張資料表自動建立 id
,create_by
,create_at
,update_at
和 acl
等欄位。
根據文件提示,在使用知曉雲的資料管理模組時,需要首先提供存放資料的 tableName
。因此,首先要在知曉雲開發者平臺建立資料表從而獲取 tableName
。
獲取 tableName
後,小 K 將其放在了 app.js
檔案的 globalData
物件上,以供後面各種資料操作介面的引數呼叫。



開始使用知曉雲的 SDK
小 K 在這裡不會細談「我的書架」是如何編寫的,因為不同的童鞋的對這個功能的實現方式可能不一樣。 小 K 只會談在哪些控制元件中使用知曉雲提供的介面,來實現小 K 的需求——新增一本書。
- 建立書目記錄
翻查了文件,發現建立一條記錄很簡單,只需要呼叫 create
建立一條空記錄,然後呼叫 set 為上面建立的空記錄賦值,最後呼叫 save
將建立的記錄儲存到伺服器即可。


- 更新一條記錄
有時,小 K 手抖,在輸入書目的時候填寫了錯別字,那麼理應提供一個更新記錄的功能吧;
知曉雲提供了 update
介面,讓更新資料 so easy。


- 刪除一條記錄
最後,當小K的書架不再存在某本書時,必然需要一個刪除操作。通過呼叫 delete
介面就可以實現一條記錄的刪除操作。


最後的話
以上就是小 K 用知曉雲烹調出的第一個支付寶小程式——「我的書架」,最主要就是用到了知曉雲的資料管理功能模組。
當然,知曉雲還提供作為 BaaS 產品的基礎檔案上傳和資料統計功能等,同時具備貼切小程式的特性功能,譬如支付寶支付和富文字編輯功能。
除了「我的書架」 Demo 外,知曉雲官方還提供了知曉雲 SDK 官方示例小程式,用於演示 SDK 更豐富的介面使用方法。程式碼已開源在 ifanrX 的 GitHub 上,連結:https://github.com/ifanrx/hydrogen-demo 有興趣的童鞋可以 star 或是 fork 一下。
本文首發於「知曉雲」公眾號:https://mp.weixin.qq.com/s/VkIIWltlaCZcbTN5dp2aCg
知曉雲是國內首家專注於小程式開發的後端雲服務。使用知曉雲,小程式開發快人一步。