終於有手機版Octotree了？
或者掃碼
一個方便在小程式裡瀏覽、分享github專案的小程式，效果看下面的動圖
- 複製github專案連結進入小程式，可直接開啟專案；也可以搜尋
- 支援常見檔案型別渲染
- 可以分享專案
- 快取github介面，讓你第二次使用時如絲般順滑
下面開始廢話
每次有大佬在群裡發了一個github專案，我想大概瀏覽下這個專案，都在想，要是手機上有類似Octotree這樣的東西就好了；在手機網頁裡看專案結構、瀏覽程式碼，好蛋疼啊，想看個star數還得登入...
因此很早就萌發了在手機上做一個類似東西的想法（ps：有多久了我也不知道，反正拖到現在終於做好了 ）
最開始想的是提供一個頁面，使用者把github專案地址複製進去，頁面就能像Octotree一樣展示樹結構，並方便使用者瀏覽。都開發到一半了，想到何不寫成微信小程式呢，順便練練手，另外，小程式的傳播能力確實不錯。然後就開始了踩坑之旅...
坑一：域名問題
小程式的介面域名必須備案而且必須是https，顯然，github api的域名是沒有備案的，所以必須走我自己的域名和伺服器轉發github 介面，再加上github對單IP請求次數的限制，所以我需要做各種快取...
坑二：markdown渲染
最開始我使用的是現成的wxParse來解析md，說實話他的實現效率較低，一般的md檔案解析會有明顯的白屏，也不支援md內的程式碼高亮，並且如果有圖片，會有明顯的重排問題。作為有“追求”的前端工程師，簡直不能忍，唉，重寫吧...（選擇死亡+1）
坑三：程式碼渲染
我找到的js的程式碼高亮庫都是直接生成了html，所以需要將html轉為小程式的檢視（為了做一些優化，沒有使用小程式的rich-text元件），並且如果程式碼過長，又會明顯地白屏、卡頓，所以得做分段渲染...
坑四：其它
小程式setData介面傳遞資料的上限是1Mb，而某些github專案的目錄結構大小是超過1Mb的，所以又得分段渲染...
我最開始是用ts寫的，但遇到一個問題，只要在頁面的配置json中加了useComponents欄位，頁面部分檢視就出不來，去掉這個欄位就可以，我表示很懵逼，遂放棄用ts折騰。
總體來說小程式的調式體驗還行，就是有時候js報錯，不丟擲，或者丟擲的錯誤讓人摸不著頭腦，然後就只有一點點刪程式碼來猜測出錯的位置...
最後，感謝室友大佬的設計@蔚泉
專案地址在這裡： ofollow,noindex"> https:// github.com/Youjingyu/gi thub-tree-mp ，輕拍...