最近在摸魚時看到了一些博客園API文章，就想著摸魚時寫個APP練練手。 現階段實現了以下功能模塊： 博客瀏覽、評論 新聞瀏覽 快閃記憶體瀏覽、發佈、評論 博問瀏覽 用戶登錄 博問暫時只支持瀏覽，不支持回答提問等操作。 支持iOS、Android平臺。 截圖 淺色模式： 深色模式： API 開發前需要先到h ...
最近在摸魚時看到了一些博客園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及controllerwidgets自定義的小組件routes路由定義models實體類
個人練手項目就加上了一些以前沒用過包跟特性體驗一下(如lottie、getx國際化)。
這個項目比較簡單，技術上沒什麼好說的，主要說下博文的展示：
博文展示
博文由於是HTML富文本且有一些複雜樣式，把文章內容轉為Flutter Widget顯示的體驗挺差，所以還是使用WebView來展示。
在這裡我選擇了flutter_inappwebview包，這個包會比官方的webview_flutter功能更加豐富，更新也更頻繁。
HTML載入流程如下：
- 在assets中添加HTML，預留內容、js、css槽位
- 在assets中添加兩個css樣式，分別對應淺色模式及深色模式；css內容可以從任意文章的Web頁面抓取
- 在assets中添加JS，編寫WebView與APP的交互
- 在assets中添加highlight.js，實現代碼的高亮
- 將js、css填充至HTML,css需要根據APP主題選擇
- 通過API讀取博文內容，並填充到HTML中
- 通過
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 "
