【乾貨】如何在 3 分鐘內使用 SwiftUI 開發一個新聞資訊 app（下）

原創： 彭權華
首發：「知曉雲」公衆號 - 小程序開發快人一步

SwiftUI 是蘋果最新推出的 UI 開發工具，其具備如下特色：採用聲明式語法，易於閱讀、代碼更少；跨全部蘋果平臺，共用一套 API；自動支持動態類型、暗黑模式、本地化等。採用 SwiftUI 將大大提升 UI 界面開發效率。

在上篇文章 SwiftUI 入門實戰（上）中咱們已經學到了如何使用 SwiftUI 快速構建一個新聞資訊 app 頁面。但其只是一個靜態頁面，不能知足咱們隨時須要更新資訊的需求。因此本篇小彭將爲你們介紹如何使用知曉雲動態發佈新聞資訊，並在 app 獲取到新聞資訊信息後，使用 SwiftUI 的 ObservableObject、@ObservedObject、@Published 等特性自動更新界面。

【關注「知曉雲」公衆號，回覆關鍵字「SwiftUI」獲取完整代碼】

知曉雲

實現實時發佈信息的傳統方式，須要搭建服務器、數據庫，域名備案，數據接口實現等繁瑣流程。使用知曉雲可以免去這些步驟，使咱們專一於業務邏輯的實現。咱們只須要在知曉雲建立一個應用和數據表，將數據存儲到數據表中，在 app 可以方便快捷地操做這些數據。咱們將使用知曉雲來存儲新聞資訊信息。

建立應用

前往知曉雲註冊知曉雲帳號。成功註冊後，進入知曉雲控制檯 dashboard 頁。建立應用，應用名稱爲 Daliy，套餐選擇免費版。

建立數據表

選擇左邊側欄數據模塊，彈出建立數據表頁面，數據表名稱爲 Daliy，設置數據表錄入權限爲 登陸用戶；設置行的默認讀寫權限爲 全部人可讀、登陸用戶可寫。

爲 Daliy 添加列，選擇 添加列 ，在彈出頁面輸入 title 便可。

依次添加 author、date、content、thumbnail 列，類型爲 string。

錄入新聞資訊信息，選擇 添加行，在彈出的界面錄入信息：

MinCloud 安裝與配置

App 獲取知曉雲上的信息，須要安裝知曉雲 SDK —— MinCloud。經過 Cocoapods 方便快捷安裝 MinCloud，在 Daliy 項目根目錄下，新建 Podfile 文件，並輸入如下內容：

在終端進入項目根目錄，並執行如下命令，完成安裝：

初始化 MinCloud

在應用啓動時，須要註冊知曉雲分配的 clientId，即在 AppDelegate.swift 文件中，導入 MinCloud，並找到 application:didFinishLaunchingWithOptions 方法，插入下面代碼：

將 clientID 替換成你的應用 ID，clientID 可在 dashboard 設置-應用頁中獲取）。

從知曉雲獲取新聞資訊信息

建立一個 swift 文件，命名爲 DaliyStore。在 MinCloud 中，Table 對應於知曉雲的數據表，操做該對象至關於操做知曉雲對應的數據表。在 DaliyStore.swift 文件，導入 MinCloud，並建立 DaliyStore 類。在 DaliyStore 類增長一個屬性 daliyTable 。daliyTable 是一個 Table 實例，關聯數據表 Daliy。

新增一個屬性 newList，爲 News 數組，用於保存新聞資訊信息。

接下來咱們能夠經過 daliyTable 來操做數據表。實現 DaliyStore 類的方法 fetchDaliy()，該方法從知曉雲數據表 Daliy 請求新聞資訊信息，並保存到 newsList 中。具體實現以下：

返回 NewsListView.swift 文件，以前新聞資訊是從 daliy.plist 文件獲取，如今改成從知曉雲獲取。在 NewListView 類中刪除屬性 newList，新增 store 屬性，類型爲 DaliyStore。List 的數據源改成 store.newsList。在 List 出現時（onAppear）調用 store 的 fetchDaliy() 方法獲取新聞資訊信息。

運行代碼，咱們能夠看到首頁顯示了從知曉雲獲取的新聞信息。你可能以爲奇怪的是，當從知曉雲獲取到新聞信息後，並無手動調用代碼去更新頁面，爲何能顯示這些信息呢？這就是 ObseverableObject、@ObservedObject、@Published 起的做用。當 @ObservedObject 對象的 @Published 屬性發生改變時，@ObservedObject 所在的視圖也會自動更新 body。另外，@ObservedObject 對象必須實現 ObserverableObject 協議。

小結

經過本教程學習了 SwiftUI 的基礎知識包括：View 協議、修飾器（modifier）、預覽、數據流（@State、ObservableObject、@ObservedObject、@Published）、基本視圖等，而且使用 SwiftUI 建立了新聞資訊列表頁和詳情頁，實現數據和視圖的交互。另外咱們也學習瞭如何使用知曉雲（MinCloud）存儲數據，爲 app 提供數據。想了解更多 SwiftUI 信息，可參考這裏；想了解更多知曉雲，可參考這裏。

【關注「知曉雲」公衆號，點擊菜單欄「知曉雲」-「知曉課堂」，獲取更多開發教程。】