我用flutter做了一个维基How中文版

WikiHow中文版由来

我在App Store下载了一个Wiki HowTo的应用，觉得挺有意思的。比如，他们搜罗了很多有用的知识：

以下是它支持已经编辑的分类。

比如，我们想了解如何健身，只需要搜关键字，健身，它就给你罗列一大堆专业认识编辑的wiki给你看：

图文并茂，非常仔细，一般详细的列举出了，步骤，提示，警告，所以，我觉得这个实在是太有用啦。
以后，想做什么，不会做的，感觉都可以在上面搜一搜，一般都会找到别人提供的方法。

然后，App Store上有这个app，只不过是英文版本，没法切换中文，对国内的朋友不大友好，因此自己撸了一个中文版本的。

因为最近在玩flutter，所以，我就用flutter玩一玩咯，如是就有了这个App。

可以扫码这个二维码体验

添加二维码体验

目前支持的功能有：

1. 支持显示推荐列表
2. 支持搜索，但是只能搜索到英文的，因为api不支持搜索到中文的
3. 查看详情
4. 详情里面播放视频的功能
5. 显示html文本
6. 支持收藏
7. 支持从收藏移除
8. 对请求做了缓存，先请求缓存，在请求网络。

detail.gif

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=featured&num=40&format=json

• 请求条目详情

  https://zh.wikihow.com/api.php?action=app&subcmd=article&id=11630731&format=json

• 随机给出一个条目，很遗憾没有中文版的，只能是英文

  https://www.wikihow.com/api.php?action=app&subcmd=article&random=true&_=1582969083.511380&format=json

• 搜索推荐,关键字q=aaron 是可以不传的

  https://zh.wikihow.com/api.php?action=app&subcmd=fsearch&format=json&q=aaron&rows=25

• 关键字搜索 ，很遗憾的是，搜索中文也搜不到，只能搜英文

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. 随机返回一条也是不支持中文的，这里考虑是不是也问问官方可以支持下不，发了邮件，貌似没有吊我。。。