Gitee+ 界面截图

仓库地址请在 Gitee 上搜索“Gitee+”。

Gitee 上搜索 Gitee+

小程序浏览数据php开源的 Gitee 微信小法式供给仓库阅读检索等功效 GraphQL

准备事情

在开拓 Gitee+ 之前,有两个问题须要确定:

码云 apimarkdown 语法解析

第一个问题,码云OpenAPI 实在很完善,但是我想在展示推举项目和热门项目还有热门搜索词条,并没有这个API,怎么办?自己动手丰衣足食。
最开始是托朋友用php爬虫实现,后来想着小程序有云开拓啊干嘛要准备多余的做事端呢?两个云函数搭配 cheerio 即可轻松实现我的需求!
第二个问题,markdown 语法解析基本是这个小程序最主要的地方了。
2019年有这个想法的时候就关注了几个干系开源仓库终于派上用场。

html2wxmlwxParsetowxmlwemark每个我都做了试用,towxml 基本是目前开源里最完美的渲染markdown库了。
在这再次感谢作者开源!
问题都得以办理,可以动手开拓了!
技能选型

微信小程序是我看官方文档学习的,以是我对原生语法非常之熟习,终极还是决定用原生写,有机会再考试测验下别的框架... 数据来源便是 码云OpenAPI 和小程序的云开拓; UI 上面利用了有赞 Vant Weapp 的多少组件。

开拓之前

我并不懂设计,也不会用PS,logo是在 logoko 在线制作的,界面设计是我翻烂了站酷、花瓣然后硬生生自己想出来的,费了我不少功夫。
仓库主页的设计参考了一下Gitter。

Gitee+ 的紧张功能便是 按措辞筛选推举项目、用户/项目搜索、用户个人主页,再往细了说便是 仓库列表、仓库内容、用户登录、用户主页、用户列表。
确定了功能后就能选出自己须要的 api 和小程序的页面,然后便是写页面接数据了。

开拓中的问题

紧张便是文件和图片解析

个中的难点便是markdown语法解析和项目文件的解析。
前者已经在准备事情中得到办理,md文件不用说了直接用 towxml 渲染就可以了。
但是像 .js,.json,css等文件不能直接用 towxml 渲染,刚开始我直接把内容输出到页面上,但没有格式很丢脸,灵机一动想到一个好主张!

获取到文件后缀基本就算获取到文件措辞了,直接在文件内容前后拼接上代码块在放到 towxml 渲染!
对付 wxml 和 wxss 直接将它们认为 html 和 css,就算后缀不是精确的文件措辞,经测试也能很好的带格式渲染出来,愉快!

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

例如:

sql

然后代码渲染的问题办理了,还有图片的问题来了。
刚开始我直接把图片视为普通文件把base64解密后直接输出,显示的便是一堆乱码。
后来想了想该当直接放在 image 标签里,可以直接显示base64图像的啊!
为什么之前没想到

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

<image src="{{ content }}" mode="widthFix"></image>待办理问题

普通图片的问题已经办理了,svg 还没有办理,其余可能还有什么字体文件之类,但这些没 svg 紧急,svg 有方案的大佬快来见告我,我试了几种方案没有成功,最近略忙也搁置了,办理后会来更新!

末了

欢迎各位大佬前来指示一番!


手里有star的铁子们给个star啊!

Gitee 上搜索 Gitee+