微信小程序版博客——小优化

之前的文章已经提到,小程序版博客大致已经差不多了,本篇主要记录一下一些优化点。

wsParse优化

wsParse最大的问题就是代码片段的换行问题,由于技术类博客代码片段很多,直接一整行很影响阅读体验,所以优先想优化这个。

看了wsParse源码,发现在处理前有将代码的换行符替换成空,于是将该操作注释掉。

这里得仔细看下代码,有两处替换换行符的操作,记得都得注释掉。一处在html2json.js下:

截图1

另一处在wxDiscode.js下:

截图2

运行代码之后发现换行是有啦,但是样式不对,分析元素之后,直接调整外层的.wxParse-pre样式。

.wxParse-pre {
  white-space: pre;
  background: #f5f5f5;
  border: 1px solid #dddddd;
}

截图3

修改完之后的样式如下:

截图4

还一个样式感觉也不太友好,code标签只设定了背景色,但字体颜色没有改变,其效果就是不太显眼:

截图5

于是想设置个字体颜色,但要注意的是代码片段pre标签下也嵌套了code标签,当设置的时候会一同改变,所以在定义样式的时候,如果在pre标签下的,颜色样式根据父级元素来:

.wxParse-pre .wxParse-wxxxcode-style {
  display: inline;
  background: #f5f5f5;
  color: inherit;
}

.wxParse-code, .wxParse-wxxxcode-style {
  display: inline;
  background: #f5f5f5;
  color: #FF6600;
}

修改后的样式如下,不会影响代码片段中的字体样式:

截图6

这样优化后,文章整体阅读效果好了很多,但依旧没有PC端体验好,主要没有代码高亮,这个改起来有点小复杂,就先放一放了。

我的收藏提示优化

之前我的收藏由于数据缓存的限制给了个Tips的提示,但发现不是很友好,每次进来都会展示,作为用户会觉得烦,所以做成不再提示的效果。

截图7

在数据缓存中记录个key用于标识是否展示弹框,用户选择不再提示之后就不会再显示了。

if (isShowContent!=1) {
  this.showZanDialog({
    title: '友情提示',
    content: content,
    buttons: [{
      text: '确定',
      color: '#3CC51F',
      type: 'submit'
    }, {
      text: '不再提示',
      type: 'cancel'
    }]
  }).then(({ type }) => {
    if (type == 'cancel') {
      wx.setStorageSync('isShowContent_' + gotoType, 1);
    }
  });

截图8

这样感觉比每次Tips提示要好一点,但也有问题,一旦选择不再提示之后就再也提示不了了,除非清除缓存。

外部链接跳转问题

看文档发现有个web-view的官方组件可以支持,一开始还挺高兴的,居然官方支持,省了很多事情,结果后面有一句补充:个人类型与海外类型的小程序暂不支持使用

好吧,这个问题先放放吧,等哪天开放了我再接入。

总结

有好的优化建议欢迎大家反馈。

作者:玄冰
欢迎关注我的微信公众号和博客小程序
欢迎关注我的公众号 欢迎关注我的公众号