之前的文章已经提到,小程序版博客大致已经差不多了,本篇主要记录一下一些优化点。
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
的官方组件可以支持,一开始还挺高兴的,居然官方支持,省了很多事情,结果后面有一句补充:个人类型与海外类型的小程序暂不支持使用。
好吧,这个问题先放放吧,等哪天开放了我再接入。
总结
有好的优化建议欢迎大家反馈。