网站建设预算/免费p站推广网站入口

优化

目录 动画

• 为了美观一点，目录显示一闪一现有点突兀，考虑人的感官的舒适度，我觉得给目录加一个左移动的动画即可。
• 因为这个目录是用组件写的，小程序最近发展的比较快，18年的时候还不太支持组件开发，现在就已经有支持了，并且用过之后感觉还不错。
• 这里就不太赘叙组件的写法了，主要是如何给组件写动画的效果。
  组件的wxml

<view class="marsk" bindtap='backtoContent' animation="{{ani2}}" hidden="{{show}}"></view>
<view class='bg' style="left:-500rpx;" animation="{{ani1}}"><view class='top'><view class='iconfont icon-back iconposition' bindtap='backtoContent'></view><view class='mulu'>目录</view></view><scroll-view scroll-y class='directory-list'><view style='width:100%;height:auto;'><view wx:for="{{contentList}}" wx:key="{{item.title}}" wx:for-item='item' wx:for-index='index' data-index='{{index}}' class='directory-item {{readnow==index? "reading":""}}' bindtap="onclickList">{{index+1}}.{{item.title}}</view></view></scroll-view>
</view>

<view class="marsk" bindtap='backtoContent' animation="{{ani2}}" hidden="{{show}}"></view>
这个是处于背后的蒙版，为了防止目录显示的时候用户点击触发页面的其他按钮。这里也添加了一个点击蒙版就会收起目录的事件。我们就介绍下蒙版的动画效果，通明度从0到1。

      var animation2 = wx.createAnimation({duration: 5000,timingFunction: 'ease'});       // 目录蒙板动画animation2.opacity(0.5).step()this.setData({ // 目录蒙板动画ani2: animation2.export()});

同理我们绑定目录左移动的动画效果

        var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease'});let xChange = 500 / 750 * wx.getSystemInfoSync().windowWidth// 因为目录元素是left:-500rpx的，但是animation的值是px所以需要转换 公式为 设备宽度/750 * 500 等于每一个设备的500rpx的px的值if (this.data.show) { // 需要判断状态,收起和打开是相反的方向移动animation.translate(xChange, 0).step()} else {          animation.translate(-xChange, 0).step()}

请求优化

由于每个markdown文件都是比较大的,如果文章一下子加载可能会出现卡顿,或者是闪退,所以为了防止这些情况发生,我们将每一个章节进行分页.

分析分页规则

我们通过输出通过请求的markdown文件中的res.data,就会发现其实就是markdown文章的语法.。

而每一个markdown语法中就有章节分号了,我们就选区##这个语法进行分页。
由于markdown文件中出了##之外还有#、###等，所以通过简单的string.split("##")是不行的。
这里就需要使用到正则运算，split()也支持正则，所以就可以快速得到每一章的分页内容。

     var pattern = /\s##\s/ // 只匹配以非字符结尾开头##非字符结尾这2个字符，这样就可以避免了其他#的情况for (var _index in allArticle) {if (_index === 0 || _index === '0') { // 开头不需要处理} else {allArticle[_index] = `## ${allArticle[_index]}` // 由于split()会讲原本的##的去掉，所以需要补回}}var data = app.towxml.toJson(allArticle[0], 'markdown'); // 这样就可以通过分页加载每一章了

我们只需要添加2个ui按钮，就可以进行切换页面。

    data:{allArticle:[], // 每一章的全部页面内容allArticleLength:0,// 每一章的页数characterIndex:0// 当前页数},onclickIcon: function (e){  debounce.debounce(()=>{let dir = e.target.dataset.dirlet index = this.data.characterIndex, length = this.data.allArticleLengthif (dir === 'right') {if ((index + 1) < length) {index = 1 + index} else {index = length - 1}} else if (dir === 'left') {if ((index - 1) < 0) {index = 0} else {index -= 1}}// 更新文章内容this.updateArticle(index)this.setData({characterIndex: index,})    },1000)  },updateArticle(index){let data = this.data.allArticle[index]data = app.towxml.toJson(data, 'markdown');this.setData({article: data,})},

防抖

由于服务器比较菜，所以为了避免因为点击多次造成的多次请求，所以需要对请求进行防抖

	onclickList(e){debounce.debounce(()=>{let index = e.detail.indexwx.showLoading({title: '加载中……',})this.requireData(this.data.directoryList[index].markdownUrl, index)}, 1000)},function debounce(fn, gapTime) {let timeout = new Date().getTime()if (timeout - this.lastTIme > gapTime || !this.lastTIme) {fn()this.lastTIme = timeout} else {return}}