簡版掘金-上班摸魚小程序上線了

起源

從 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，砥礪前行。