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

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

wsParse优化

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

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

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

另一处在wxDiscode.js下：

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

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

修改完之后的样式如下：

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

于是想设置个字体颜色，但要注意的是代码片段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;
}

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

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

我的收藏提示优化

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

在数据缓存中记录个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);
    }
  });

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

外部链接跳转问题

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

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

总结

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