新开源项目：The Good Parts of Your WordPress Zwei

Now I confirmed: iPhone SUCKS!

简介

项目地址：https://github.com/catscarlet/goodparts-of-your-wordpress-zwei
Demo：https://articles.catscarlet.com/

这个项目是用来展示你博客中精选出来的文章用的。项目名取自 O’Reilly 的梗，The Good Parts，以及德语 Zwei。

文章内容是从 你自己的 WordPress 中读取的，所以要使用这个项目，你需要有权限读取自己的 WordPress 数据库。

这个项目的目的是制作另一个展示页，用来展示你博客中一部分内容的用的。像我这种吃喝游玩还是技术教程什么都写博客的，在一定场合下，博客内容展示就会非常尴尬。这时候如果有一个独立的展示页面，只展示特定的文章，就可以避免这种尴尬了。

PC 端截图：

这是实现这个场景功能的第二个项目了，这个项目较前一个项目，增加了一些特性，比如移动端的展示，以及 Lazyload 。

上一个项目：goodparts-of-your-wordpress

文档和更新都会发到 GitHub 上。本文只写一些开发过程中遇到的问题和感受

开发过程

哪里有坑，就在哪里埋了。

选型

vue 的部分基础是从Web-Log-Analyzer-IceFairy这拿过来的，免去维护以前 vue 需要带的一大堆第三方库，只用 @vue/cli 搞定。

组件库，Element 只支持桌面端，所以不考虑。所以到网上搜了一下支持移动端的组件库，查到的讨论得比较多的有：滴滴的 cube-ui，众安的 Zarm ，后台不详的 Muse-UI。

首先尝试的滴滴的 cube-ui，只因为滴滴牌子大。但是无论我是自己手写代码，还是直接使用 cube-ui 的 vue-cli-plugin-cube-ui 得到的结果清一色都是这个德行：

明显的是缺失了文件。连 vue-cli-plugin-cube-ui 都出问题，让我怎么继续使用？看源码？

更别说其官方文档本来就有错误。

果断放弃。（既戴尔之后，再次例证：不能迷信大牌）

没选 Zarm 是因为没有 Drawer ，移动端的一个基本功能缺失，怎么用？

最后选了 Muse-ui。

编码

大问题

这个过程没啥好说的，几乎没有遇到太多大问题，不过有些还是可以讲讲的。

首先，这个项目的一个开发目标是只使用一套代码来同时覆盖 PC 端和移动端场景。这是个挑战，因为之前没做过。虽然你可能会认为我的个人主页也是同一个页面实现不同的场景，但其实不是的，你看到的只是一种障眼法，实际上前端后端都做了处理（实际上我挺担惊受怕的，怕 Google 识别出错），我只是以我自己的方式用最小的工作量实现了两套相似但不完全相同的逻辑。

完美的目标是只使用 css 或 muse-ui 的组件功能来实现在不同场景下的不同展示，不要用后台 PHP 或前端其他手段来检测用户浏览器状况。

那么这里就面临了一个问题，muse-ui 的 Drawer 在 PC 端是不自动向右推正文 DIV 的，官网是怎么实现的，一时半会猜不出来。我到 muse-ui 的 github 上找源码，发现 muse-ui 3.0 文档的仓库里面放的是编译后的代码，毫无参考意义。不过找到了 2.0 版本的代码，研究了半天，发现其实现方式是靠 window.innerWidth 来判断，之后在正文 DIV 上加属性 padding-left。唉，完美不了。

小问题

另外遇到的小问题遇到几个也可以说说。

一是 Muse-ui 的 Drawer 没有滑动手势，只有点击按钮才能打开 Drawer。

这里就有一个难受的地方。这些前端框架，不论是 vue 还是 react 还是 angular，天天吼着复用复用复用，要我说，复用在非框架开发场景下是不存在的。我想今后复用这段手势代码，几乎找不到在这些框架下实现的方法。这些复用概念只能实现于组件，而非框架开发场景下，几乎每个功能都是单一独立的，几乎没有复用余地。这段手势代码并不是组件，而是函数，而且还是耦合性非常高的函数，想要把这段代码复用化并不是不可能，但其复杂程度与引用难度都会陡升，几乎没有实现价值（如果有的话，网上早就有一大堆例子，直接往 common/index.js 里一放就行，我也就不用自己写了）。反过来，我在写 Web-Log-Analyzer-IceFairy 时首先考虑的并不是复用，而是核心和组件化，制作一个核心或组件如果能在多个场景下使用，如遇到更复杂的场景则进行上层开发，类似派生，这个思路即是面向对象的编程，类，对象，派生，这些概念。而 vue 组件至少在现在还很难做到易用。

另外微信从最左侧向右滑动是关闭网页，这不是浏览器动作而是 APP 动作，解决不了。

二是组件结构没有想好。目前就两个组件， App.vue 作为根组件，剩下干活的都是 Blog.vue ，虽然上一个版本也是这么做的，不过这样的话，定制欢迎界面就比较麻烦，现在都塞到 main.js 里了，灵活性很差。如果有时间的话，考虑做一个欢迎组件，放出更大的权限。为此我还专门拿到了画师葱的授权。

三是字体问题，muse-ui 和其他国际化插件一样引用网上的字体，在大陆是会很难受的，不过 Material Icons 可以本地化，只不过默认字体仍然使用的系统字体，还没时间处理。Muse-ui 不像 materializecss 一样 支持 Flow Text ，所以有些地方可能字体显示不咋地。

API 部分则完全拿的上一个项目的代码一点没变。能改进的地方多了去了，懒。

不得不说 Firefox 的开发者工具跟 Chrome 比起来仍然差很大一截，最后不得不把开发环境移回 Chrome。

测试

手头的环境，Win7、Win10、Android 4.4、Android 9，浏览器有 Chrome 和 Firefox ，最新版，基本功能测试都没有问题。IE 11 不考虑，反正 Windows 上可以装第三方浏览器，等有空搞个 alert 提示给 IE 11 就好了。

但是 iOS 有问题，有些是不能滑动，有些是只显示标题，有些是连标题都显示不出来。

因为手里根本没有 iOS 设备，所以只能找人帮忙测，当然根本没什么人有兴趣，只能发到以前的同事群或者同学群，人家愿意回复的话就得感恩戴德了。至于报错信息则根本看不到。

想测试根本没门，到网上搜了一下，想要调试 iOS 上的 Safari 显示效果，至少得有一台 iOS 设备才行。如果没有 Mac 机，使用 Chrome 还需要一大堆第三方插件才可能完成。而报出问题的 iPhone ，有版本 iOS 7 和 iOS 11，而 iOS 10 和 iOS 12 则没有问题，这比想象中的复杂得多。iOS7 虽然可以不考虑，但为何 iOS 11 有问题，比 iOS 11 低一个版本的 iOS 10 却没问题。

仔细想想，浏览器内核绑定操作系统版本，这 TMD 不是 IE + Win 么，这都 2019 年了，苹果突然成了新时代 IE 。

说真的，续航又差、问题又多、速度又慢、性能又低、样子又丑、价格还比同配置进口安卓机贵2000块钱，而且还 锁区 ，有钱烧的啊。

结论：iPhone 垃圾 （PS：只针对乔布斯去世后苹果公司出的 iPhone 和 iOS）

解决方案：就我这脾气？大不了直接在首页给个文本提示：不支持 iOS，有钱您再买个手机呗，反正你有钱。

上线

鹏博士垃圾不说，问题是我见到了成功的 HTTPS 劫持（加密方式是 AES_CBC），有点吓人。不过目前已知的只有部分政府网站是用这种加密方式传输，非 AES_CBC 的劫持，浏览器还是会报错的。

之前买了电信的日租卡，但没想到北京电信垃圾啊，国际出口丢包率高到惊人，也几乎没法用。

早知道就应该买广州电信的日租卡。