Gitee+ 界面截图
仓库地址请在 Gitee 上搜索“Gitee+”。
Gitee 上搜索 Gitee+
准备事情
在开拓 Gitee+ 之前,有两个问题须要确定:
码云 apimarkdown 语法解析第一个问题,码云OpenAPI 实在很完善,但是我想在展示推举项目和热门项目还有热门搜索词条,并没有这个API,怎么办?自己动手丰衣足食。最开始是托朋友用php爬虫实现,后来想着小程序有云开拓啊干嘛要准备多余的做事端呢?两个云函数搭配 cheerio 即可轻松实现我的需求!
第二个问题,markdown 语法解析基本是这个小程序最主要的地方了。2019年有这个想法的时候就关注了几个干系开源仓库终于派上用场。
问题都得以办理,可以动手开拓了!
技能选型
微信小程序是我看官方文档学习的,以是我对原生语法非常之熟习,终极还是决定用原生写,有机会再考试测验下别的框架... 数据来源便是 码云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+