我用flutter做了一個維基How中文版

WikiHow中文版由來

我在App Store下載了一個Wiki HowTo的應用，覺得挺有意思的。比如，他們搜羅了很多有用的知識：

以下是它支援已經編輯的分類。

比如，我們想了解如何健身，只需要搜關鍵字，健身，它就給你羅列一大堆專業認識編輯的wiki給你看：

圖文並茂，非常仔細，一般詳細的列舉出了，步驟，提示，警告，所以，我覺得這個實在是太有用啦。  以後，想做什麼，不會做的，感覺都可以在上面搜一搜，一般都會找到別人提供的方法。

然後，App Store上有這個app，只不過是英文版本，沒法切換中文，對中國的朋友不大友好，因此自己擼了一個中文版本的。

因為最近在玩flutter，所以，我就用flutter玩一玩咯，如是就有了這個App。

可以掃碼這個二維碼體驗

目前支援的功能有：

  1. 支援顯示推薦列表
  2. 支援搜索，但是只能搜索到英文的，因為api不支援搜索到中文的
  3. 查看詳情
  4. 詳情裡面播放影片的功能
  5. 顯示html文本
  6. 支援收藏
  7. 支援從收藏移除
  8. 對請求做了快取，先請求快取，在請求網路。

d

實現的過程

這個App大概只畫了一天半的時間就搞定啦，可憐的我浪費了自己的周末，接下來的片段主要說下，我做這app經歷的過程。

api哪裡獲取

api就是通過chares抓包,抓包的對象自然而然是我從App Store上下載的wikiHow這個App了：

不過發現抓到的是亂碼，看到是http協議，很顯然，這個是https加密咯，所以，要配置支援https，具體怎麼配置，我參考的這篇文章Charles 4.2.1 HTTPS抓包

一番功夫之後，我們就能夠抓到這個包了：

然後對著一些自己需要的功能進行了一頓操作，各種api就拿到了：)這裡我列舉一下。

https://zh.wikihow.com/api.php?action=app&subcmd=psearch&wt=json&q=draw&rows=25

所以，基本上就有了我們需要的api了，就下來就開幹了。

有了API了，接下來，就創建項目，碼程式碼就是了，看看項目結構

  • main.dart是工程的入口；
  • bloc目錄說明我這個項目是使用了bloc設計模式的，目錄里放著各個業務邏輯的bloc，所以，我的介面很清晰，沒有任何請求邏輯，只根據數據展示ui，如果不了解，可以參考這個大佬的文章，介紹了bloc模式是什麼，怎麼用就用專業的庫了，庫後面會給出
  • cache目錄是快取工具類，因為我發現api訪問巨慢，可能是伺服器在國外的緣故，所以不得不對http請求做快取，這裡是用了lrucache，庫稍後也會貼出來。
  • model文件主要是json對應的dart model的定義
  • network是網路請求工具類
  • page就是我項目的各個頁面了
  • sql，這裡我收藏使用sqlite快取，只快取了條目的id，title，image。
  • style是我對整個項目樣式的常量定義，期望是把字體樣式，顏色，等統一起來。
  • widget這裡是我封裝的一些自定義組件，裡面包括，在列表裡面播放影片的控制項等

所以，需要那些庫呢，這裡我貼一下

  pull_to_refresh: ^1.5.8    flutter_bloc: ^3.2.0    cached_network_image: ^2.0.0    dio: ^3.0.9    flappy_search_bar: ^1.7.2    debounce_throttle: ^1.1.0    flutter_html: ^0.11.1    sticky_headers: "^0.1.8"    disk_lru_cache: ^0.0.2    url_launcher: ^5.4.2    toast: ^0.1.5    video_player: ^0.10.8+1    chewie: ^0.9.8+1    neeko: ^0.0.6

其中 :

  • debounce_throttle 是因為搜索的時候要輸入關鍵字，控制調用介面的頻率;
  • flutter_bloc 就是一個對bloc設計模式封裝得比較好用的庫，我推薦使用這個;
  • dio 是網路請求框架,支援restful，請求結果也直接給解析成json了。
  • flutter_html 因為詳情也有些地方的內容是html，因此需要使用一個展示html的控制項。
  • disk_lru_cache 快取網路請求用的，key我設置的是url的hash，value是json to string。
  • neeko&chewie&video_player 是影片所需的控制項，不過我最後沒使用neeko，還是用的chewie。

還需要做哪些

程式碼我已經放到github上了，我覺得還有很多可以優化的地方，感興趣的小夥伴可以一起搞起~。

比如，想優化的點：

  1. 不支援中文搜索，是不是可以想其他方案替代呢，比如能否和官方溝通，讓他們支援，或者對英文內容直接做Google翻譯，然後在呈現。
  2. feature指令返回的內容貌似一直沒有變化，這樣首屏看到的內容總不發生變化，視乎有點枯燥無謂。
  3. 已收藏不知道已收藏，這裡我是偷懶了，因為，我將詳情也設計成了stlessWidget，所以，我沒機會通過sql查收藏，沒地方setState，不過，我想可以在外部查了帶進來也是OK的。
  4. 隨機返回一條也是不支援中文的，這裡考慮是不是也問問官方可以支援下不，發了郵件，貌似沒有吊我。。。

Tags:

VirMach 便宜 VPS