今天我想正式而隆重的向大家介绍我的个人微信小程序前端码易：一个承载我个人技术文章的博客应用。

经过近一个月的折腾，终于有信心在官方微信上正式介绍给大家了。在研究打磨了各种方案后，终于适配到了PC端。适配过程不算顺利，但大家可以在PC端拥有最好的阅读体验。

本文与道友们分享我艰难的适应过程。

被迫放弃的商业模式

我做这个小程序的初衷是想把我的大量优质文章放到小程序里，让想要学习的朋友通过观看/点击广告给我带来收入，实现0成本的双赢。

这是一个非常酷的商业模式。因为我不用去想怎么向用户收费，我的主要收入来源就是广告。如果做得好，我基本上只要安心创作就行了。因此在小程序的第一个版本，我设计了阅读广告和观看优质文章的机制。上线之后，这个模式取得了巨大的成功。经过简单的推广，第一天就有近100R的广告收入。如果一切顺利的话，我以后会加大推广力度，希望通过这个收入实现收入持平。

但发布之后，我发现大量用户在工作中习惯通过PC端打开小程序。然后问题就来了，各种Bug层出不穷，乱糟糟的。这也是为什么我一开始没有考虑PC端的原因。其中，对于我设想的商业模式来说，最致命的问题是终端不支持播放广告。

所以，我设计的逻辑已经行不通了，因为它不支持播放广告，播放完再看文章的流程就不复存在了，这让我很不舒服。

然后我就因为这个事情焦虑了一整天，简单的想法就是干脆放弃用这个用户了。但是我看了后台数据，发现在PC端打开小程序的用户中，用户占比大概是40%，比Mac用户略少一点。

所以我又舍不得放弃用户的想法。然后又有了一个想法，就是修改代码逻辑，直接给用户开绿灯。只有 Mac 用户才能看到广告。但这也会让 Mac 用户觉得不公平。

于是我就纠结了，脑子里想了很多补救的办法，既想保留这个商业模式，又想保留PC端良好的阅读体验。最后纠结了好久，我决定放弃这个商业模式。这次放弃其实对我打击很大，虽然在群里跟群友说放弃看广告的设计的时候表现得很轻描淡写，但心里还是很郁闷了两天。

一方面，前期的规划都是围绕这个模式展开的，所以我做了很多前期的技术调研，咨询了很多朋友，也为这个商业模式做了很多未来规划。一旦放弃，这些准备全部打水漂，最重要的是还要重新规划未来规划。另一方面，看到了成功的迹象，直接放弃又有点痛苦，就这样错过了PC端，确实是我的不考虑。

PC端适配尺寸问题

从技术上来说，这个问题非常难以解决。一方面我已经适配了移动端，我使用rpx作为尺寸单位，rpx和rem类似，都是基于设备宽度进行缩放，可以兼顾不同尺寸设备上的良好UI表现。如果在PC端继续使用这个尺寸就糟糕了，因为PC端的宽度会急剧增加，这会导致所有的文字尺寸都变得非常大，完全无法阅读。

更粗暴的方案是直接放弃移动端的适配，只以px作为尺寸单位。这样一来，只是牺牲了移动端的阅读体验，保证了PC端的正常阅读。有一段时间，我也紧急使用过这个方案，以保证PC端的正常使用。

✓

我的项目基于Taro 3.x开发，并使用相关技术栈

修改也比较简单，Taro 默认的行为是将 px 编译成 rpx，因此我在开发的时候，项目代码是用 px 写的，但是会被 Taro 编译成 rpx 来完成移动端的适配，我们只需要在配置中修改如下参数，就可以关闭 Taro 的自动转换

mini: {
  postcss: {
    pxtransform: {
      enable: false,
    },
  }
}

但是这种方案毕竟不是完美的，因为牺牲了移动端的适配体验，部分机型的布局会稍有不同。那么有没有一种方案，可以同时适配移动端和PC端，并且不需要写两套代码，也不需要在代码中考虑很多问题，而且可以实现非常简单的解决方案呢？

当然！这个想法是我从我自己的文章“”中得到的。我可以更改 CSS 变量，这样我就可以在移动设备上使用 rpx 作为单位，在 PC 上使用 px 作为单位。

当然，在这个过程中，我在Taro编译和微信小程序中遇到了很多坑，从简单的想法到最终的解决方案，经历了一波又一波的波折，差点放弃的时候，终于灵光一闪，避开了所有的坑，最终顺利实现了目标。

您可以使用手机、电脑访问前端代码来体验适配后的最终效果。

✓

这个方案完成后，后续换肤就简单了，扩展起来也非常容易。本来是想支持暗黑模式的，但是现在最大的问题是没法设计比较好看的暗黑风格，所以一直没支持。

路由问题

这个是个很大的坑，微信小程序可以使用如下配置来开启列模式，在app.json中添加"": true 和 "": true 即可开启列模式。

{
  "resizable": true,
  "frameset": true
}

✓

Taro 的项目配置文件是 app..ts

当开启分栏模式后，首页作为导航页会一直显示在左侧，其他任何通过路由跳转打开的页面都会显示在右侧。这时候比较坑的一个就是如果我有不在首页的导航页也得在右侧打开。

如果导航页打开在右侧，新文章页也打开在右侧，那就不好了，阅读体验会很差。找了好久，终于在小程序官方文档里找到一个模糊的说法，好像可以控制页面打开在左侧还是右侧。

我遇到的第一个麻烦是Taro不直接支持这个。因此，我不知道如何在Taro中调用API。

查阅了好久各种文档，都没找到对应的接口，最后脑子里闪过一个想法，这个 this 指的是当前的 Page 对象吧？那我可以从路由栈里拿到当前所有的页面对象，然后通过索引访问当前页面，再调用这个方法，对吧？

const pages = Taro.getCurrentPages()
pages[pages.length - 1].pageRouter.navigateTo({
  url: './xxx'
})

真的行。

虽然方法调用成功了，但是很遗憾，它并不能满足我想要的效果，即指定在左侧还是右侧打开新页面。

最后可以确认的是，微信小程序不支持这个效果，真是恶心，难怪没人愿意适配PC端，这也太不完善了，无奈之下只好用出我的一个超级绝招：彻底重写微信小程序的路由方案

我们知道微信小程序是基于渲染的，底层还是 HTML，因此重写路由方案在技术上是可行的，重写的路由方案经过反复的技术可行性验证和性能验证，经过长时间的迭代，最终落地上线，我们可以从下面两张图观察效果