HarmonyOS實戰
目前，CSDN官方App并沒有适配鴻蒙系統，但是我們是程式員，完全可以自己開發，何須等待CSDN呢？
自己動手豐衣足食，今天，我們來實作一個有趣的鴻蒙卡片。也就是将自己的最新的博文前10篇搬上鴻蒙卡片，并展示給大家。
除了将10篇最新的博文搬上鴻蒙卡片之外，我們還需要給鴻蒙的卡片提供可編輯的功能，讓使用者替換部落客，自動替換對應部落客的前10篇博文。
下面，我們來一一實作這些功能。
我們首先需要觀察一下CSDN博文的标題長度，可以發現有些CSDN标題還是很長的，如果用小卡片肯定連标題都顯示不下。是以，我們需要提供4*4的長卡片。
建立步驟如下，這裡我們首先通過DevEco Studio建立一個純JS項目，如下圖所示：
項目建立完成之後，我們會進入項目開發頁面。這裡選擇entry-src右鍵建立JS的4*4的卡片内容，具體建立步驟如下所示：
這樣，我們就完成了卡片的建立。但是這裡一般來說，因為我們剛建立項目的時候，沒有預設的2*2卡片，是以這裡會建立2*2和4*4兩個卡片。
不過，2*2太小，并不能完整顯示博文清單。下面，我們來實作博文浏覽的4*4功能卡片。
首先，我們可以回博文的最上面看看最終的實作效果。可以發現，我們的4*4卡片有頭像、姓名、簡介以及一個最新的博文清單。
是以，我們需要建立這樣一個布局，來完美搭建這些資訊，并完成博文點選的互動。首先，是我們需要實作的界面布局代碼（index.hml）：
這裡，我們的image元件頭像用的是固定的image圖檔。因為擷取到的CSDN頭像圖檔，image元件不更新，隻有Java卡片目前能完美實作該功能。（js卡片好像隻有展示第一次能顯示圖檔，後面更新圖檔都不顯示）
這也是我期望回報給鴻蒙官方的問題。是以，這裡我們用固定的頭像替代，除了頭像圖檔無法替換之外，其他資訊可以完美替換。
接着，我們需要實作樣式（index.css）代碼：
最後，就是完成互動資訊的回報。卡片的互動變量以及互動跳轉界面都是通過index.json檔案進行定義的，代碼如下：
其中，blogList是博文清單資訊，head是頭像，但因為image不更新，這裡忽略。name是博文的歸屬者昵稱，content是部落客的簡介。
actions這裡隻定義了一個跳轉界面的互動，也就是使用者點選博文資訊，然後就跳轉到博文的詳細頁面。參數為博文的連結，在博文詳細頁面通過WebView進行加載。
既然要擷取到博文首頁的博文資訊以及使用者的資料，這就涉及到爬蟲解析。而Java比較好用的爬蟲解析包是jsoup。
而後面我們選擇替換部落客博文資訊，也是同一個方法。是以，需要将解析的代碼獨立出來，減少代碼的備援程度。具體的幫助類為LYJUtils.java：
而卡片的資料初始化方法在WidgetImpl.java類之中，它的初始化代碼如下所示：
這樣運作之後，我們的初始化卡片博文樣式就完美實作了。
到這裡，我們僅僅實作了卡片的資料展示。但我們看一個部落客的博文并不是隻看标題的，而是要看自己感興趣的内容。是以，點選博文标題應該實作跳轉到博文詳情界面。
首先，我們實作點選博文标題跳轉到博文。讀者可以往博文前面看一下，是不是有index.json檔案中有一個actions定義，這裡的類就是跳轉的界面。
WebViewPageSlice.java代碼如下所示：
這個界面的内容很簡單，就是擷取跳轉傳遞過來的網址參數資訊。然後WebView元件，根據網址的内容即可，當然需要支援JavaScript，不然加載出來的界面非常難看。
博文的XML布局檔案代碼如下所示（ability_web_view_page.xml）：
不過，這些内容都是部落客自己的。肯定有讀者也對本部落客的内容不感興趣，想要看其他部落客的内容怎麼辦？
我們這裡，可以提供一個滑動可選元件，讓使用者選擇自己感興趣的部落客。這樣卡片就能完成更新，達到真實意義上的互動。
首先，我們需要定義卡片的編輯跳轉界面，需要在config.json檔案中定義，代碼如下：
這裡，主要的定義代碼是formConfigAbility，它負責提供卡片的編輯互動功能的跳轉界面，與之前跳轉界面一樣，就是一個普通的Java界面類。
下面，我們實作這裡編輯界面，并提供完成互動的能力。
這裡，部落客隻定義了5位部落客的資訊添加到Picker元件，如果你剛學習鴻蒙開發，對Picker元件陌生，可以參考部落客的鴻蒙開發專欄，有專門一篇博文講解該元件。
運作之後，長按卡片點選編輯，就會彈出如下界面。
當然，彈出來的界面有點不好看，主要是因為部落客沒有系統學過設計與色彩搭配，這裡就随便找了一個背景。
讀者如果點選上面的“替換部落客資訊”的按鈕，就會自動替換卡片上的内容，與博文最開頭實作的效果一緻。
編輯界面的XML布局檔案代碼如下：
到這裡，我們的CSDN博文卡片就移值到鴻蒙系統的卡片上了。當然，你可以添加更多的火爆部落客供大家選擇。
不過，這裡還有幾個地方需要注意：
第一，上面的HTML解析需要用到jsoup.jar檔案，你在項目中使用的使用，需要将jsoup包複制到entry-libs檔案夾中，并右鍵點選add Libraries。
第二，上面的網頁請求涉及到網絡權限，需要在項目的配置檔案config.json中配置網絡權限，代碼如下：
第三，預設建立的2*2與4*4的卡片，但我們隻需要4*4的卡片，你隻需要在配置檔案中，删除supportDimensions屬性裡面的2*2即可。
本文源代碼位址：https://gitee.com/liyuanjinglyj/CSDNCard
本文正在參與“有獎征文 | HarmonyOS征文大賽”活動：