用Flutter寫了個博客園APP

最近在摸魚時看到了一些博客園API文章，就想著摸魚時寫個APP練練手，

現階段實作了以下功能模塊：

• 博客瀏覽、評論
• 新聞瀏覽
• 閃存瀏覽、發布、評論
• 博問瀏覽
• 用戶登錄

博問暫時只支持瀏覽，不支持回答提問等操作，

支持iOS、Android平臺，

截圖

淺色模式：

深色模式：

API

開發前需要先到https://api.cnblogs.com/申請API KEY，申請通過才能使用博客園的API，

輸入一下個人資訊跟應用資訊，提交后等待博客園的審核，通過審核后會收到一封包含ClientId和ClientSecret的郵件，

博客園API檔案上的API不全，有些API需要到Github中查詢，

開發

API申請完成就可以愉快的進行開發了，
Flutter版本這次選擇了最新的3.3，基于GetX框架+Dio來開發，不得不說GetX一把梭的感覺是真的爽，

目錄結構跟GetX框架差不多，按我自己的習慣進行了一些改動：

• app 一些通用的類及樣式
• services 提供資料存盤等服務
• requests 請求的封裝
• generated 生成的國際化檔案,使用 get generate locales生成
• modules 模塊，每個會有兩個檔案，view及controller
• widgets 自定義的小組件
• routes 路由定義
• models 物體類

個人練手專案就加上了一些以前沒用過包跟特性體驗一下(如lottie、getx國際化)，

這個專案比較簡單，技術上沒什么好說的，主要說下博文的展示：

博文展示

博文由于是HTML富文本且有一些復雜樣式，把文章內容轉為Flutter Widget顯示的體驗挺差，所以還是使用WebView來展示，

在這里我選擇了flutter_inappwebview包，這個包會比官方的webview_flutter功能更加豐富，更新也更頻繁，

HTML加載流程如下：

1. 在assets中添加HTML，預留內容、js、css槽位
2. 在assets中添加兩個css樣式，分別對應淺色模式及深色模式；css內容可以從任意文章的Web頁面抓取
3. 在assets中添加JS，撰寫WebView與APP的互動
4. 在assets中添加highlight.js，實作代碼的高亮
5. 將js、css填充至HTML,css需要根據APP主題選擇
6. 通過API讀取博文內容，并填充到HTML中
7. 通過webViewController.loadData(data: html)在APP中顯示博文

具體實作可以看源代碼，實作效果：

由于專案依賴WebView(文章、登錄)，所以只支持iOS、Android平臺，要支持其他平臺也不難，只需要把文章內容轉為Flutter Widget顯示再更改下登錄邏輯即可，

自動打包

使用Github Actions可以很簡單的自動完成打包發布的步驟，

關于Github Actions的介紹，可以看下官方檔案，

在專案創建根目錄創建一個.github/workflows，然后創建一個xxxx.yml，寫入以下代碼，

name: app-build-action
#推送Tag時觸發
on:
  push:
    tags:
      - "*"
jobs:
  build-ios-android:
    # 使用macOS鏡像,如果不需要打包iOS，可以替換成Ubuntu
    runs-on: macos-latest
    permissions:
      contents: write
    steps:
      #簽出代碼 
      - uses: actions/checkout@v2
        with:
          ref: master
       #寫出ENV檔案
      - name: Create .env
        run: |
          echo "CLIENT_ID=${{ secrets.CLIENT_ID }}" > .env
          echo "CLIENT_SECRET=${{ secrets.CLIENT_SECRET }}" >> .env
      #APK簽名設定
      - name: Download Android keystore
        id: android_keystore
        uses: timheuer/[email protected]
        with:
          fileName: keystore.jks
          encodedString: ${{ secrets.KEYSTORE_BASE64 }}
      - name: Create key.properties
        run: |
          echo "storeFile=${{ steps.android_keystore.outputs.filePath }}" > android/key.properties
          echo "storePassword=${{ secrets.STORE_PASSWORD }}" >> android/key.properties
          echo "keyPassword=${{ secrets.KEY_PASSWORD }}" >> android/key.properties
          echo "keyAlias=${{ secrets.KEY_ALIAS }}" >> android/key.properties
      #設定JAVA環境
      - uses: actions/setup-java@v3
        with:
          distribution: 'zulu'
          java-version: "12.x"
          cache: 'gradle'
      #設定Flutter
      - name: Flutter action
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.3.9'
          cache: true 
      - name: Restore packages
        run: flutter pub get
      #打包APK
      - name: Build APK
        run: flutter build apk --release
      #上傳APK至Artifacts
      - name: Upload APK to Artifacts
        uses: actions/upload-artifact@v3
        with:
          name: app-release.apk
          path: |
            build/app/outputs/flutter-apk/app-release.apk
      #打包iOS
      - name: Build IPA
        run: flutter build ios --release --no-codesign
      #創建未簽名ipa
      - name: Create IPA
        run: |
          mkdir build/ios/iphoneos/Payload
          cp -R build/ios/iphoneos/Runner.app build/ios/iphoneos/Payload/Runner.app
          zip -q -r build/ios/iphoneos/ios_no_sign.ipa build/ios/iphoneos/Payload
      #上傳IPA至Artifacts
      - name: Upload IPA to Artifacts
        uses: actions/upload-artifact@v3
        with:
          name: ios_no_sign.ipa
          path: |
            build/ios/iphoneos/ios_no_sign.ipa
      #從document/new_version.json讀取版本資訊
      - name: Read version
        id: version
        uses: juliangruber/read-file-action@v1
        with:
          path: document/new_version.json
      - name: Echo version
        run: echo "${{ fromJson(steps.version.outputs.content).version }}"
      - name: Echo version content
        run: echo "${{ fromJson(steps.version.outputs.content).version_desc }}"
      #發布至Github Release
      - name: Upload Release
        uses: ncipollo/release-action@v1
        with:
          allowUpdates: true
          artifactErrorsFailBuild: true
          artifacts: "build/app/outputs/flutter-apk/app-release.apk,build/ios/iphoneos/ios_no_sign.ipa"
          name: "${{ fromJson(steps.version.outputs.content).version }}"
          body: "${{ fromJson(steps.version.outputs.content).version_desc }}"
          token: ${{ secrets.TOKEN }}
      #完成
      - run: echo "?? This job's status is ${{ job.status }}."

運行腳本前，需要先到Github專案設定-Secrets-Actions中添加以下欄位

CLIENT_ID 博客園API ClientId
CLIENT_SECRET 博客園API ClientSecret
KEYSTORE_BASE64 APK簽名檔案，轉為BASE64
KEY_ALIAS APK簽名keyAlias
KEY_PASSWORD APK簽名keyPassword
STORE_PASSWORD APK簽名storePassword
TOKEN Github Token

Github Token點這里添加，注意需要權限的設定，

設定完成后，當想要打包一個新版本時，只需要提交代碼并打上Tag推送至Github，即可自動打包，

總結

這個專案沒啥難度且博客園API檔案還是比較全面，基本對著API做個UI就行了，

天冷變懶了，有些功能還沒有寫完，過段時間再慢慢完善了，

專案開源地址:https://github.com/xiaoyaocz/flutter_cnblogs,有興趣可以到Release中下載安裝包體驗一下，

標籤：其他

上一篇：汽車行業：充分借力資料價值，推動數字化營銷鏈路倍訓

下一篇：汽車行業：充分借力資料價值，推動數字化營銷鏈路倍訓