開源的 Gitee+ 微信小程序,提供倉庫瀏覽、檢索等功能

總在用我們國產的碼雲 Gitee 代碼託管平臺,但該平臺還沒有一個我用著順手的小程序,於是 Gitee+ 就誕生了。界面截圖:

開源的 Gitee+ 微信小程序,提供倉庫瀏覽、檢索等功能

Gitee+ 界面截圖

倉庫地址請在 Gitee 上搜索“Gitee+”。

開源的 Gitee+ 微信小程序,提供倉庫瀏覽、檢索等功能

Gitee 上搜索 Gitee+

準備工作

在開發 Gitee+ 之前,有兩個問題需要確定:

  • 碼雲 api
  • markdown 語法解析

第一個問題,碼雲OpenAPI 其實很完善,但是我想在展示推薦項目和熱門項目還有熱門搜索詞條,並沒有這個API,怎麼辦?自己動手豐衣足食。最開始是託朋友用php爬蟲實現,後來想著小程序有云開發啊幹嘛要準備多餘的服務端呢?兩個雲函數搭配 cheerio 即可輕鬆實現我的需求! 第二個問題,markdown 語法解析基本是這個小程序最重要的地方了。2019年有這個想法的時候就關注了幾個相關開源倉庫終於派上用場。

  • html2wxml
  • wxParse
  • towxml
  • wemark
    每個我都做了試用,towxml 基本是目前開源裡最完美的渲染markdown庫了。在這再次感謝作者開源!
    問題都得以解決,可以著手開發了!

技術選型

微信小程序是我看官方文檔學習的,所以我對原生語法非常之熟悉,最終還是決定用原生寫,有機會再嘗試下別的框架... 數據來源就是 碼雲OpenAPI 和小程序的雲開發; UI 上面使用了有贊 Vant Weapp 的若干組件。

開發之前

我並不懂設計,也不會用PS,logo是在 logoko 在線製作的,界面設計是我翻爛了站酷、花瓣然後硬生生自己想出來的,費了我不少功夫。 倉庫主頁的設計參考了一下Gitter。

Gitee+ 的主要功能就是 按語言篩選推薦項目用戶/項目搜索用戶個人主頁,再往細了說就是 倉庫列表、倉庫內容、用戶登錄、用戶主頁、用戶列表。 確定了功能後就能選出自己需要的 api 和小程序的頁面,然後就是寫頁面接數據了。

開發中的問題

主要就是文件和圖片解析

其中的難點就是markdown語法解析和項目文件的解析。前者已經在準備工作中得到解決,md文件不用說了直接用 towxml 渲染就可以了。但是像 .js,.json,css等文件不能直接用 towxml 渲染,剛開始我直接把內容輸出到頁面上,但沒有格式很難看,靈機一動想到一個好主意!!獲取到文件後綴基本就算獲取到文件語言了,直接在文件內容前後拼接上代碼塊在放到 towxml 渲染!對於 wxml 和 wxss 直接將它們認為 html 和 css,就算後綴不是正確的文件語言,經測試也能很好的帶格式渲染出來,開心!!

<code> content = '```' + this.data.type + '\\n' + content + '\\n```'
/<code>

例如:

開源的 Gitee+ 微信小程序,提供倉庫瀏覽、檢索等功能

sql


然後代碼渲染的問題解決了,還有圖片的問題來了。剛開始我直接把圖片視為普通文件把base64解密後直接輸出,顯示的就是一堆亂碼。後來想了想應該直接放在 image 標籤裡,可以直接顯示base64圖像的啊!為什麼之前沒想到

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

待解決問題

普通圖片的問題已經解決了,svg 還沒有解決,另外可能還有什麼字體文件之類,但這些沒 svg 緊急,svg 有方案的大佬快來告訴我,我試了幾種方案沒有成功,最近略忙也擱置了,解決後會來更新!

最後

歡迎各位大佬前來指點一番!!! 手裡有star的鐵子們給個star啊!!

開源的 Gitee+ 微信小程序,提供倉庫瀏覽、檢索等功能

Gitee 上搜索 Gitee+


分享到:


相關文章: