冰雪林博客 小程序已经发布

晴和君 · 2020年02月13日 · 110次阅读 · 预计需要5分钟

很早以前,看到一个 Typecho 还是 WordPress 的一个主题,功能非常复杂,还有小程序的配套,看着非常高级。最近又在Jdeal的网站上逛的时候,发现了他的小程序,又把我的记忆唤醒了。

注册,下载开发工具,一气呵成。但是开发文档实在是有点多,所以基本上是边做边学的状态下完成的,大概花了 4 天左右。一开始对各个部分不太熟悉,熟悉就花掉了 1 天时间,试着做了一些最基础的页面。后来发现小程序也有现成的框架,所以大概挑了一个看起来比较好用的,Vant UI。这个 UI 除了有 Vue 的版本意外,还有支付宝小程序的版本。我个人感觉自己对美学没有什么研究,就看着顺眼就行了。

登陆的部分最费脑子,小程序貌似没有类似 vuex 之类的状态管理,也没有路由守卫之类的东西,所以只能通过 onLoad 事件来判断,再跳转,体验就很一般了。试了几次也没有别的好办法,就这样凑合用了。里面的坑也有很多,主要是跳转到登陆页面,和登陆后跳转的逻辑很难写。

然后就是主体内容了,由于我现在这个 Lareina 主题用的就是 Nuxt JS 写的,后端才是 WordPress。所以很多 Api 都可以共用(其实很多的 JS 代码也可以通用,比如这次我的评论代码基本都是 Copy 的,还删掉了一些功能(懒))。因此应该说小程序的体验和网页版本应该是比较接近的,样式我也尽量弄得相近。这次后端就没写什么新代码。就增加了一些浏览量排序,评论数排序,获取最新评论之类的东西。然后修改了一些生成图片描述和 Latex 数学公式的相关代码。

这个 LaTex 真的是巨坑(我自己挖的),就一篇 LaTex 文章,折腾了我好几个小时。首先,微信小程序是不支持 MathJax
之类的库的。所以我想到了两个办法。一个是 web-view,一个是把 Latex 的内容转换成图片。web-view 不对个人小程序开发者开放。所以只剩下了后一种方案。

首先尝试的就是一个现成的 WordPress 插件,叫做 WP QuickLaTeX,原理就是把文章的 LaTex 相关内容传到他的服务器上,然后返回一个图片保存到自己的服务器上。我试了一下,首次加载是在是太慢(虽然影响不大),最主要的是生成的图片是在是太丑了。和我现在用的 Mathjax 完全不能比。因此我想能不能到小程序上再换成图片。可惜没有现成的轮子可以用。只能自己在 WX Parse 上改了,匹配出 LaTex 内容,然后替换成图片。现在小程序上的数学公式虽然很丑,但是总是可以看的了,而且保留了之前好看的网页版。

中间也有几次大的体验改进,最主要的就是缓存。小程序提供 10M 的本地储存,我大概看了一下,我现在 50 篇不到的文章,全部缓存也只有 200kb 不到,所以就放心用啦。因此,只要加载完首页,或者分类页面,相应的文章就可以秒开。不能秒开的文章在打开过一次后,也能秒开。

之后有空应该会写一些关于小程序开发过程中用到的一些东西和想法。


欢迎体验!小程序二维码就在文章下方,扫描即可直达小程序中的当前页面。虽然需要微信授权登陆,但是微信登陆的数据都是没有上传的!(其实我的小程序也没有一定要要求登陆,就是为了装那个什么),登陆后的页面就是评论信息了,填写完成后发表评论无需再次填写。

有什么建议都可以在小程序中反馈给我,或者在文章里留言都可以!

4分