简版掘金-上班摸鱼小程序上线了

起源

从 17 年入住掘金，到去年才开始写博客，一直感受掘金是技术社区里面作的很是棒的，除了写文章以外也想为它贡献一些其余方面。

目前掘金主流的入口端分别是 App、pc、插件、h5。

• App 的功能大而全，可是须要下载、安装
• PC 的不方便手机使用，没办法随地浏览、摸鱼
• H5 版本很全可是退出以后很难在找到记录进入，不太方便

综上，这也是咱们这一帮掘友想到作一个简版小程序的原因。

产品设计

首先，你们都是程序员，并无很好的产品思惟，也没有专业产品介入，只能凭我的的日常的经验来设计这款小程序。

一直在讨论新的小程序须要提供什么样的功能、要作一些什么样的事情，除了掘金的博客以外，还可以给你们提供一些什么有意义的内容

通过两轮头脑风暴以后，以及参考了各大小程序（与博客、内容相关）以后，咱们选择了互联网资讯做为主入口，使得你们零碎摸鱼的时间中，除了看博客，还可以有看到互联网内比较有热点的资讯来消磨一些时间。

因而有了下面的初版雏形

首页的创意与样式，借鉴了差评 Daily，在此也向差评产研表达感谢。

其次，咱们在思考，掘金 App 做为一个大而全的 App 须要提供的是完整版的功能，可是实际在使用中的时候，好比前端开发，可能只会关注与前端相关的模块，而不太会去关注如 java、python 等后端模块。那么在选择完感兴趣的模块以后，能够将页面作的足够简洁点，即首页能够只看到咱们须要的模块而不是全部的。

第一期，根据用户群体，咱们先选择了如下模块，后续会逐渐完善更多的功能。

把偷工减料说的如此堂而皇之可还行（手动狗头）。

第一期完成的主功能列表以下：

1. 每日主动抓取各个互联网主要的新闻资讯
2. 首页随机获取 5 个当天主要资讯展现，点击切换能够随机其余内容
3. 资讯列表与详情完成（待完成分页加载）
4. 掘金热点与详情完成（待完成分页加载）
5. 掘金热点博客分享图生成

小程序开发

以前用过 Taro 1.0 与 Remax，感受对比起来，渲染时的语法挺好用，因此这一次的小程序开发选择了 Taro 3 做为小程序开发，其中也有一些小程序开发的经验与点能够与前端同窗共享一些。

目前多端框架大致分为渲染时与预编译两种模式，你们能够本身取舍，通常渲染时的框架包体积大小会比预编译的体积大。

markdown 渲染

因为掘金的内容是 markdown 语法，咱们抓取的也是 markdown 的内容，怎么解析 markdown 的语法显示在页面上面也是一个问题。

本身解析 markdown 的成本有点高，咱们采用了 Taro 3.0 react 与原生小程序插件 towxml 共存的方法来解决这个问题，具体的例子这里也不过多介绍，能够去官网查看，若是有问题能够留言与我联系，基本按照教程走就能实现。

大数据渲染

上周就已经发布了一个先行版本上线，可是效果并不如意

首先是渲染内容过多，流畅度会直线降低。不一样于 H5，小程序在 setData 过大（官方显示最大不要超过 1m）的时候，会引发整个页面的卡顿直线上升，严重影响交互体验。

但有的博文是实打实的硬货，markdown 的内容超过了 4M，远远超过单次 setData 的 1m 限制，那么这个时候，除了渲染速度过慢，同时会感受页面很是的卡顿。

如上图，因为虚拟列表须要固定高度，而小程序提供对 dom 操做的比较麻烦，所借鉴了虚拟列表的思路，采用的是伪虚拟列表的形式去加载博客内容，将 markdown 的内容转义以后，按照 10 个一组分割成多组。渲染视图取当前查看加先后一块儿共 3 页，滑到底部或者顶部的时候，会从新加载上一页或下一页的内容。

目前查看仍是有些许问题，好比从掘金拿到的 markdown 的内容有部分不能彻底被解析出来，另外滑动加载过快的时候，仍会出现卡顿的状况。咱们会尽快解决这些问题给各位同窗提供一个良好的体验效果。

生成分享图

生成个性分享图在小程序有 3 种办法

1. canvas 直接画
2. 借助 webview 的 h5 功能，采用中间页的办法，用 html2canvas 将渲染好的页面直接转成 canvas
3. 后台生成，前端接收

嗯，种种缘由，咱们选择了对前端最麻烦的第一种，直接手写 canvas。而后因为各类缘由，设计了两种不一样的分享图以下。

有预览图：

无预览图：

最近略忙，没有时间写博客，因此直接借用上面两位老哥的内容生成分享图

当咱们从掘金的接口里面获取到的图片、头像数据有问题的时候，好比拦截、未放入小程序下载地址的时候，会直接采起生成无预览图分享卡片模式。

同理若是头像的连接正常获取不到的话，会自动使用狗头模式，下个版本会选个更专业点的头像 = =！

后期能够开启多种分享图模板供各位同窗选择，就看我能不能 PUA 住咱们的设计同窗了。

目前分享图的二维码是直接进入小程序的，下个版本会更新详情二维码，扫描能够直接进入详情页面。

特别鸣谢

小程序团队目前参与成员以下：

@Kerwin_ 、@和耳朵 同窗为后台数据准备作的工做

@少与年同窗做为 UI 提供的设计与素材

@Captain船长、@优弧 做为小程序的特别体验者，提供建议与 pua

写在最后

时常有人在吐槽掘金的各类小问题与体验，可是在实际参与开发以后才能了解，一款产品的设计与研发中会出现到的各类问题与不容易。

因为项目也没有测试同窗介入，若是各位同窗在使用小程序的过程当中，有问题、建议，欢迎留言或随时与我沟通联系 CookieBoty。

2021，砥砺前行。