支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

知曉雲發表於2019-03-05

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。
Hello,我是犯迷糊的小 K。目前是 ifanr 的一隻前端攻城獅,同時也是知曉雲團隊的一員。

3 月伊始,ifanr 旗下品牌——知曉雲 3.0 版本正式上線。此次更新得到業內許多開發者的密切關注和積極支援,在此,我代表知曉雲團隊表示萬分感謝哈。( ̄▽ ̄)~*

知曉雲是業界第一個支援多平臺小程式開發的後端雲服務,它免去了小程式開發中伺服器搭建、域名備案、資料介面開發、線上運維等繁瑣流程,讓開發者更快、更低成本地做出優質的小程式。

言歸正傳。和許多童鞋一樣,小 K 使用知曉雲時,也是第一次開發小程式,開發過程也是百轉曲折。 因此,小 K 希望通過這篇文章,和各位童鞋進行交流。畢竟,大家的學習歷程是相似的,遇到的困惑也應該差不多。

本文結構大致如下:

  • 談談如何成為支付寶小程式開發者。
  • 聊聊如何建立我的第一個支付寶小程式。
  • 以一個 Demo 為例,詳細講講如何在支付寶小程式中接入和使用知曉雲 SDK。

如何成為一名支付寶小程式開發者?

申請成為支付寶小程式開發者,是一件再簡單不過的事兒,僅需 2 步,比把大象放進冰箱還簡單。

第一步,登入螞蟻金服開放平臺,註冊成為小程式開發使用者。此過程需要你依次完成賬號資訊、郵箱啟用和資訊登記等流程。

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

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

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。
支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

如何建立我的第一個小程式?

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

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

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

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

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

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

現在,有了開發工具和基礎知識積累,可以試試 freestyle 咯。

唯一的問題是:小 K 應該選擇什麼型別的小程式作為 Demo 呢?

對於 Demo 選擇,唯一的原則就是精簡

  • 「簡」是像小 K 這樣的小白開發者一看就懂。
  • 「精」是儘可能在有限的程式碼中,體現知曉雲功能的強大性。

於是,我選擇了個經典的 TodoMVC 的小程式——「我的書架」作為示例。

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

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

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

如何在小程式中呼叫知曉雲 SDK?

  1. 準備工作

在正式使用知曉雲的 SDK 前,首先確保走完以下 2 個流程:

第一,完成小程式的授權。目前,知曉雲在註冊模組和設定模組都有提供小程式授權操作,二者的授權流程大體一致。在這裡,我們演示設定模組的小程式操作。

點選應用標籤,進入應用的管理皮膚;

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

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

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

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

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

  1. 裝載 SDK

接下來,看看知曉雲的 SDK 的使用說明文件。老夫掐指一算,將 SDK 的接入小程式的方法和資料表操作看了一遍,約莫花費 10 分鐘。

畢竟 Demo 只涉及資料操作嘛,所以要做到有的放矢,要啥看啥。

下載知曉雲提供的 SDK 後,將其引入小程式的 app.js 中,並通過在前面的設定模組的小程式設定 tab 頁中獲取當前應用的 ClientID

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

  1. 設計資料結構和建立資料表

完成上述操作後,小 K 就可以使用 SDK 提供的各種介面,接下來思考一下「我的書架」將用到什麼資料及其結構。

由於是第一個 Demo ,本著精簡的原則,小 K 在此就只設計了一個 bookName 的欄位

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

Tips:知曉雲的資料管理模組會為每張資料表自動建立 idcreate_bycreate_atupdate_atacl 等欄位。

根據文件提示,在使用知曉雲的資料管理模組時,需要首先提供存放資料的 tableName。因此,首先要在知曉雲開發者平臺建立資料表從而獲取 tableName

獲取 tableName 後,小 K 將其放在了 app.js 檔案的 globalData 物件上,以供後面各種資料操作介面的引數呼叫。

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。
支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

開始使用知曉雲的 SDK

小 K 在這裡不會細談「我的書架」是如何編寫的,因為不同的童鞋的對這個功能的實現方式可能不一樣。 小 K 只會談在哪些控制元件中使用知曉雲提供的介面,來實現小 K 的需求——新增一本書。

  1. 建立書目記錄

翻查了文件,發現建立一條記錄很簡單,只需要呼叫 create 建立一條空記錄,然後呼叫 set 為上面建立的空記錄賦值,最後呼叫 save 將建立的記錄儲存到伺服器即可。

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。
支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

  1. 更新一條記錄

有時,小 K 手抖,在輸入書目的時候填寫了錯別字,那麼理應提供一個更新記錄的功能吧;

知曉雲提供了 update 介面,讓更新資料 so easy。

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。
支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

  1. 刪除一條記錄

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

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

支付寶小程式面向個人開放了!我將以一個 Demo 為例講解整個流程。

最後的話

以上就是小 K 用知曉雲烹調出的第一個支付寶小程式——「我的書架」,最主要就是用到了知曉雲的資料管理功能模組。

當然,知曉雲還提供作為 BaaS 產品的基礎檔案上傳和資料統計功能等,同時具備貼切小程式的特性功能,譬如支付寶支付和富文字編輯功能。

除了「我的書架」 Demo 外,知曉雲官方還提供了知曉雲 SDK 官方示例小程式,用於演示 SDK 更豐富的介面使用方法。程式碼已開源在 ifanrX 的 GitHub 上,連結:https://github.com/ifanrx/hydrogen-demo 有興趣的童鞋可以 star 或是 fork 一下。


本文首發於「知曉雲」公眾號:https://mp.weixin.qq.com/s/VkIIWltlaCZcbTN5dp2aCg

知曉雲是國內首家專注於小程式開發的後端雲服務。使用知曉雲,小程式開發快人一步。

相關文章