漫画小程序开发小结

最近基于公司业务需要，做了个漫画小程序，做博一篇，让后人少走弯路，同时也是对自己工作的一点提炼。
免得以后人老色衰记忆减退回首往事徒留伤悲。

页面：

• index：漫画列表，可续读直接跳阅读页
• detail：漫画详情，包含介绍和选集两个tab
• read：漫画阅读，无限滚动，懒加载，动态设话的标题

从需求和bug 谈技术实现

主页：无难点
详情：话的排序：前端排序，Array.reverse()即可
阅读页：

1. 漫画图片url获取：前后端约定url规则，前端拼接即可。开始考虑图片hash值命名增强安全，基于开发时间要求先放弃，后期增加收费漫画后，考虑增加cdn校验。

2. 防网络卡而加载缓慢：利用小程序image组件lazy-load实现图片懒加载，小程序自行判断懒加载时机，加载成功触发bindload事件（），失败触发binderror事件

3. 防页小程序面图片过多内存过大被系统清理：用scroll-view包裹image，滚动时获取图片位置要素，将不需要展示的图片url置为一张白色占位小图（对图片对象设一个flag，不置空的原因是置空了会触发binderror），占位保留，减少内存占用：
   wx.createSelectorQuery().selectAll('.img').boundingClientRect(ret => {// 代码})

这么做的原因是自己测试了一下使用lazy-load api时的效果，不做其他处理，每次加载一话时内存会增加几MB至十几MB，感觉优化不太好，官方文档对此说明也几乎为0，所以自己再做了这个一个实现，具体效果对比没测（懒_啦）。
另外：有的漫画小程序是这么处理：一个页面同时存在的话最多为一个定值，达到且需要翻页时显示翻页按钮，简化开发流程且保持用户体验，不失为一个好的方案，只是自己想动手做一下所以略过了这步。

4. 阅读页看上一话：直接wx.redirectTo 减少大量不必要的麻烦，体验尚可

5. 无缝滚动下一话：利用scroll-view的bindscrolltolower配合lower-threshold，将当前页最后一页的高度设为触发翻页条件的底线，想法很丰满现实很残酷，lower-threshold最大支持1000，coded完才发现这个问题，影响不大我开心就好~

6. 滚动实时修改头部标题：在获取图片数组的方法里对data的图片数组的项加上话名，滚动时利用上面第3点提到的api计算当前屏幕的图片是哪张（可获取图片在data数组的索引），匹配一下设置即可。

开始是这么想的：
1.用image提供的接口bindload来设置，但这样会提前设置标题，与当前显示图片不符，否决；
2.后来想用IntersectionObserver来监听与视图（viewport相交最大的图），来设置，理论上这是最理想的方法了，小程序刚好也提供了这个接口，然而，试了一下痛点如下：
设置阈值为0（有相交与不相交的临界事件时即触发），1图到2图，2图标题设置ok√；2图滚回1图，只触发了2图的相交事件（即从相交有到无），无法设回1图的标题。（ps：当时用的是IntersectionObserver.relativeToViewport，还可尝试参照选100vh的scroll-view，不知是否与这相关，时间紧急中途辄反，选用稳妥的现方案）

7. 进入阅读页后，下滑显示阅读上一页按钮（图片上方占位）：
   在改为点击直接跳转前，我们的方案是不跳转，即当前页面同时显示上一话和这一话内容，点击在数组前插入上一话，按钮消失。
   这就要求：进入页面时，按钮是相对定位（relative）,配合scroll-view的scroll-top达到按钮隐藏且下滑即显的效果；点击后，插入图，按钮无法保持相对定位，遂改为绝对定位，此时只能先上滑再下滑来触发scroll-view的bindscrolltoupper来显示按钮。这是我不太满意的地方，同样是时间成本原因没有继续深究，希望有方案的同学可以在评论里交流一下~

当然，上面这个问题在改为点击跳转以后就不存在了~同样消除的问题还有当前话的data绑定等容易出问题的地方，让人不得不存储多个话的字段（进入话、当前话、上一话等）

8. 由1引发的问题：
   分享后获取不到漫画图片，原因：开始是在index或detail页跳转进read页前即将话的数据（chapList）存入了app.globalData，直接打开分享的小程序卡片，只会保留进入页面时携带的options，如漫画id、话id等，所以要在read页调取chapList前加判断，没有的话重新从服务端获取，此外，此方法是存在app里的，方便复用

9. 返回上一页时，漫画记录要刷新：
   index和detail页配一个init方法，供其他页面调用，在触发更新阅读记录时，利用getCurrentPages来获取页面栈，从而调方法

这里有个坑：
因为可能是从分享页进入的，且有可能页面栈与预期不符（跳转时、其他页面调用本方法时），需要判断一下页面路由名再决定是否调用上一页的init方法

10. 加载下一张图是出现闪屏、闪现（忽然滚到其他位置）
    因为对image设置了transition，原因猜想：新图加载时，小程序会计算出新图占位高度和当前滚动条位置等参数，自动延长滚动条，由于transition的存在，取参出现了偏差，导致闪屏

以下都是一些情感废话，我玻璃心不喜勿喷，可以跳过~

差不多有记录意义就先这么多吧，几天的攻克与踩坑化为这十来点也是有点感慨。开发完后定了有2个闹钟提醒自己写总结，总是提不起劲（沉迷ns），真正开始写了又停不下来，做事的想法和流程、解决方案等都有记录的意义，不只是为了别人看，自己也不想浑浑噩噩工作了那么久却没有留下什么有价值的东西。

此篇博客开始，想尝试除技术外，能带一些感悟和生活方面的体会吧，说起来有次去面试，说喜欢写博客，hr问是生活博客吗，当时心情挺复杂的。
年轻时爱发说说，发了几千篇，记录生活的各种，后来长大了变了，变沉稳了变得不想说话时就不说话、想说时考虑了再说，这一点经常被领导“诟病”~
转行做程序员这个职业，一方面是兴趣，一方面就是不喜欢客套的人情世故。
技术追求复杂，交往我希望简单，志同道合就好，三观齐最重要。
有个很喜欢的前同事（屁股扭得特别可爱 男生）对我有个评价个人比较认可，我属于那种你主动，我们就有故事的人。
还被多人称为心灵导师卫= =

所以有单身的妹子觉得可以聊聊人生、聊聊技术的，欢迎来撩！（真诚的目光）