版權(quán)聲明：本文原創(chuàng)谷誓，轉(zhuǎn)載請注明出處 http://www.reibang.com/p/cc3c9df6db96

2019年初就有這個想法了绒障，一直拖到現(xiàn)在才完成真的欠揍...本想寫 GitHub 但是這個小程序有很多了，想著我們國產(chǎn)的碼云我也總用捍歪，這個還沒有一個我用著順手的小程序户辱，于是 Gitee+ 就誕生了。倉庫地址附在文末糙臼。

準(zhǔn)備工作

在開發(fā) Gitee+ 之前庐镐，有兩個問題需要確定：

• 碼云 api
• markdown 語法解析

第一個問題，碼云OpenAPI 其實很完善变逃，但是我想在展示推薦項目和熱門項目還有熱門搜索詞條焚鹊，并沒有這個API，怎么辦？自己動手豐衣足食末患。最開始是托朋友用php爬蟲實現(xiàn)研叫，后來想著小程序有云開發(fā)啊干嘛要準(zhǔn)備多余的服務(wù)端呢？兩個云函數(shù)搭配 cheerio 即可輕松實現(xiàn)我的需求璧针！
第二個問題嚷炉，markdown 語法解析基本是這個小程序最重要的地方了。2019年有這個想法的時候就關(guān)注了幾個相關(guān)開源倉庫終于派上用場探橱。

• html2wxml
• wxParse
• towxml
• wemark
  每個我都做了試用申屹，towxml 基本是目前開源里最完美的渲染markdown庫了。在這再次感謝作者開源隧膏！
  問題都得以解決哗讥，可以著手開發(fā)了！??

技術(shù)選型

微信小程序是我看官方文檔學(xué)習(xí)的胞枕，所以我對原生語法非常之熟悉杆煞，最終還是決定用原生寫，有機會再嘗試下別的框架...
數(shù)據(jù)來源就是 碼云OpenAPI 和小程序的云開發(fā)腐泻；
UI 上面使用了有贊 Vant Weapp 的若干組件决乎。

開發(fā)之前

我并不懂設(shè)計，也不會用PS??派桩，logo是在 logoko 在線制作的构诚，界面設(shè)計是我翻爛了站酷、花瓣然后硬生生自己想出來的铆惑，費了我不少功夫范嘱。?? 倉庫主頁的設(shè)計參考了一下Gitter。

Gitee+ 的主要功能就是 按語言篩選推薦項目员魏、用戶/項目搜索丑蛤、用戶個人主頁，再往細(xì)了說就是 倉庫列表逆趋、倉庫內(nèi)容、用戶登錄晒奕、用戶主頁闻书、用戶列表。
確定了功能后就能選出自己需要的 api 和小程序的頁面脑慧，然后就是寫頁面接數(shù)據(jù)了魄眉。

開發(fā)中的問題

主要就是文件和圖片解析

其中的難點就是markdown語法解析和項目文件的解析。前者已經(jīng)在準(zhǔn)備工作中得到解決闷袒，md文件不用說了直接用 towxml 渲染就可以了坑律。但是像 .js，.json囊骤，css等文件不能直接用 towxml 渲染晃择，剛開始我直接把內(nèi)容輸出到頁面上冀值，但沒有格式很難看，靈機一動想到一個好主意９馈列疗！獲取到文件后綴基本就算獲取到文件語言了，直接在文件內(nèi)容前后拼接上代碼塊在放到 towxml 渲染浪蹂！對于 wxml 和 wxss 直接將它們認(rèn)為 html 和 css抵栈，就算后綴不是正確的文件語言，經(jīng)測試也能很好的帶格式渲染出來坤次，開心９啪ⅰ！

 content = '```' + this.data.type + '\n' + content + '\n```'

例如：

sql

content = 'data:image/png;base64,' + res.content

<image src="{{ content }}" mode="widthFix"></image>

待解決問題

普通圖片的問題已經(jīng)解決了缚窿，svg 還沒有解決，另外可能還有什么字體文件之類焰扳，但這些沒 svg 緊急倦零，svg 有方案的大佬快來告訴我，我試了幾種方案沒有成功吨悍，最近略忙也擱置了扫茅，解決后會來更新！
小程序已更新育瓜！

最后

歡迎各位大佬前來指點一番：丁！躏仇！
Gitee+ 倉庫地址 手里有star的鐵子們給個star傲到拧！焰手！??