gitter Gitter - 高颜值GitHub小程序客户端诞生记

作者简可11

https://juejin.im/post/5c4c738ce51d4525211c129b

0.前言

好吧，也许大部分人进来都会想，为什么人会反复做轮子，GitHub的第三方客户端早就把街给毁了。确实一开始我也是这么觉得的，问自己这样的项目再做一次真的有意义吗？反复思考，以下原因也决定了我愿意做一个让自己满意的第三方GitHub客户端。

对于一直关注GitHub Trending列表的作者来说，迫切需要一种更容易的方式，随时随地跟踪GitHub的最新技术动向；

现有的一些GitHub小程序客户端值和功能不能满足作者的要求；

听说没人要iOS开发，那为什么不掌握一门新的开发技能呢？

其实没有那么多原因。如果你想做，就去做。幸福是最重要的。

1.Gitter

GitHub:

https://github.com/huangjianke/Gitter

可能是目前价值最高的GitHub小程序客户端，欢迎之星

数据源:

GitHub API v3

https://developer.github.com/v3/

目前的功能是:

查看实时趋势

显示用户列表

搜索仓库和用户

仓库:详细信息显示、README.md显示、星形/非星形、分叉、贡献者显示，以及查看仓库文件的内容

开发者:关注/不关注，展示用户关注/关注

问题:查看问题列表，添加问题，并添加问题注释

共享仓库，开发者

...

Gitter的初衷并不是把网页上的所有功能都复制到小程序上，因为那样的体验不会很友好。比如作者本人不想看手机上的代码，那会是一件很痛苦的事情。

让用户在保证用户体验的前提下，以更简单的方式得到自己想要的东西，这很有意思。

2.探索文章

技术选择

第一次觉得自己在广阔的前端世界里是那么渺小。

当我决定做这个项目的时候，我开始了不间断的技术选择，但是我面前的选择太多了，我不得不觉得前端世界真的很棒。

原生开发:刚开始基本放弃，开发体验很不友好；

WePY:

https://tencent.github.io/wepy/

以前已经用这个框架开发了一个小程序，

诗人和诗人，

https://github.com/huangjianke/weapp-poem

不得不说坑这么多，用过的人都知道；

mpvue:

http://mpvue.com/

用Vue开发小程序，个人感觉文档不是很全，最近维护比较少，可能比较稳定？

芋头:

https://taro.aotu.io/

利用React开发小程序，芋头团队的小伙伴们真的是勤于维护，耐心解答大家的疑问。文档比较齐全，开发经验也很棒。您也可以一键生成多端运行代码。

逛了一圈，经过一段时间的尝试和踩坑，结合我目前的能力，最终确定了吉特的技术选型:

Taro+Taro UI+Redux+云开发节点. js

https://taro-ui.aotu.io/#/docs/introduction

页面设计

其实作为一个编码器，我一直想找一个姐姐UI设计师做老婆。多般配啊。现在想想，代码不是生活的全部，我现在也一样开心。

让我们回到正题。没有设计师的老婆怎么办？毕竟我要的是一个价值很高的GitHub小程序。

嗯，不急不忙，默默的拿出我沉默了很久的Photoshop和Sketch。我不敢说我的设计能力如何。Gitter的设计至少能让我感到开心。如果有设计爱好者想改进Gitter的设计，欢迎，欢迎！

3.开篇文章

说话便宜。给我看看代码。

作为一篇技术文章，怎么能少拿代码？

这里主要写几个踏点。作为一个前端小白，相信所有的读者都是作者的前辈，希望大家多多指教！

趋势

进入开发阶段没多久，就遇到了第一个坑。GitHub不提供趋势列表的API！！！

我没有过多考虑GitHub为什么不提供这个API，只是考虑如何尽快填补这个漏洞。首先尝试使用scratch

写一个爬虫定期抓取并存储网页上的趋势列表信息供小程序使用，但最后还是放弃了这个做法，因为作者没有服务器和注册域名，小程序的云开发只支持Node.js的部署

开源依旧强大，终于找到了github-trending-api。

https://github.com/huchenme/github-trending-api

稍加修改，成功部署到小程序云开发后台。在此，我要感谢原作者的努力。

攀登趋势知识库

async functionfetchrepositories {

const URL = ` $ { GITHUB _ URL }/trending/$ { language }？自= $ {自} `；

const data = await fetch；

const $ = cheerio . load)；

返回

。get

//ESL int-disable-下一行复杂性

。map；

consttitle = $回购

。查找

。文本

。trim；

constrelativeUrl = $ repo

。查找

。查找

。attr；

constcurrentPeriodStarsString =

$回购

。find

。文本

。trim || /*伊斯坦布尔忽略下一个*/' '；

constbuiltBy = $回购

。查找')

。父项

。查找

。map= > 1 . 0 . 0。{

constaltString = $

.children 。儿童

。attr；

constavatarUrl = $

.children 。儿童

。attr；

返回{

用户名:altString

？altString.slice

:/*伊斯坦布尔忽略下一个*/null，

href:` $ { GITHUB _ URL } $ { user . attribs . href } `，

头像:removeDefaultAvatarSize，

};

})

。get；

constcolorNode = $ repo.find；

常量颜色=颜色节点。长度

？colorNode.css

:null

constlAnNode = $ repo . find；

constlang = langNode.length

？langNode.text。修剪

:/*伊斯坦布尔忽略下一个*/null；

returnomitNil，

名称:title.split，

URL:` $ { GITHUB _ URL } $ { Relatitudeurl } `，

deion:

$回购

。find

。文本

。trim || /*伊斯坦布尔忽略下一个*/' '，

语言:朗，

语言颜色:语言颜色，

star:ParSeint

。文本

。替换|| /*伊斯坦布尔忽略下一个*/0，

10

),

forks: parseInt

。文本

。替换|| /*伊斯坦布尔忽略下一个*/0，

10

),

currentPeriodStars: parseInt。替换||

/*伊斯坦布尔忽略下一个*/0，

10

),

建筑，

});

})

);

}

抓取趋势开发者

asynccfunctionfetchdeveloper {

constdata = awaitfetch;

const $ = cheerio . load)；

返回$

。get

。地图；

constrarelativeURl = $ dev . find。attr；

constname = getMatchString

。文本

。trim，

/^)$/i

);

$dev.find。移除；

constusername = $dev

。find

。文本

。trim；

const$repo = $dev.find；

returnomitNil.attr), avatar:removeDefaultAvatarSize。attr，

回购:{

名称:$回购

。find

。文本

。trim，

deion:

$回购

。find

。文本

。trim || /*伊斯坦布尔忽略下一个*/' '，

URL:` $ { GITHUB _ URL } $ { $ repo . attr} `，

},

});

});

}

趋势列表云功能

//云函数入口函数

exports.main = async =>。{

const{ type，language，after } =事件

letres = null

letdate = newDate

if{

constcacheKey = ` repositories::$ { language || ' nolang ' }::$ {自| |

daily ' } `；

constcacheData = await db . collection。其中.orderBy。get

if-cache data . data)。cacheDate)& lt；1800* 1000)) {

RES = JSON . parse

} else{

RES = awaitfetchRepositories；

await db . collection。添加，

缓存键:缓存键，

内容:JSON.stringify

}

})

}

} else if{

constcacheKey = ` developer::$ { language | | ' nolang ' }::$ {自| | ' daily ' } `；

constcacheData = await db . collection。其中.orderBy。get

if-cache data . data)。cacheDate)& lt；1800* 1000)) {

RES = JSON . parse

} else{

RES = awaitfetchdeveloper；

await db . collection。添加，

缓存键:缓存键，

内容:JSON.stringify

}

})

}

}

返回{

数据:res

}

}

降价分析

嗯，这是个大坑。

在做技术研究的时候发现，对于小程序端的Markdown解析，主要有以下几种解决方案:

wxParse:

https://github.com/icindy/wxParse

作者最后一次提交是在两年前。经过自己的尝试，他确实发现不适合解析README.md之类的

wemark:

https://github.com/TooBug/wemark

一个非常不错的微信小程序Markdown渲染库，但是作者尝试后发现README.md的解析并不完善

towxml:

https://github.com/sbfkcel/towxml

目前发现是微信小程序最完善的Markdown渲染库，几乎可以完美分析显示README.md

在Markdown解析中，最终采用towxml，但是发现目前解析性能不是很好，解析一些比较大的数据超出了小程序能够承受的范围。还好有思想的作者提供了服务器的支持，感谢作者的努力！

降价分析云函数

constTowxml = require；

consttowxml = NewTowXMl；

//云函数入口函数

exports.main = async =>。{

const{ func，type，content } =事件

letres

if {

if {

RES = awaittowxml . Tojson；

} else{

RES = awaittowxml . Tojson；

}

}

返回{

数据:res

}

}

Markdown.js组件

导入Taro，{ Component }来自' @tarojs/taro '

从“道具类型”导入道具类型

从“@tarojs/components”导入{视图，文本}

从“taro-ui”导入{ AtActivityIndicator }

“进口”。/markdown.less '

'从导入到xml '../towxml/main

const render = new Towxml

导出DefaultClassMarkDownExtendsComponent {

static propTypes = {

MD:ProTypeS . string，

base:ProTypeS . string

}

静态defaultProps = {

md: null，

base: null

}

构造函数{

超级

this.state = {

数据:null，

失败:false

}

}

componentDidMount {

this.parseReadme

}

parseReadme {

const { md，base } = this.props

让那个=这个

wx.cloud.callFunction.然后 {

data= render.initData

}

that.setState

}).catch

that.setState

})

}

render {

const { data，fail } = this.state

if {

返回} & gt；

& ltText className= 'text'>。加载失败，再试一次？& lt/Text >

& lt/View >

)

}

返回 :

}

& lt/View >

)

}

}

Redux

事实上，作者在这个项目中并没有太多使用Redux。一开始，作者认为所有的接口请求都应该由Redux操作，但后来发现并不是所有的操作都必须使用Redux。最后，在这个项目中，只有在获得个人信息的情况下，才使用Redux。

//获取个人信息

export ConstGetUserInfo = CreateApiAction= & gt；api。get)

exportfunctioncreateApiAction= & gt；{}) {

返回=>。{}，失败:=>。{} },

customActionType = actionType，

)= >;async= gt。{

尝试{

dispatch；

const data = await func；

dispatch；

回调。成功和。& ampcallback . success

returndata

} catch {

调度

回调. & amp& ampcallback.failed

}

}

}

getUserInfo {

if) {

userAction.getUserInfo。然后= >;{

Taro.hideLoading

Taro.stopPullDownRefresh

})

} else{

Taro.hideLoading

Taro.stopPullDownRefresh

}

}

const mapstatetorops == & gt；{

返回{

userInfo: state.user.userInfo

}

}

exportdefaultconnect

exportdefaultfunctionuser {

switch {

caseUSERINFO:

返回{

...州，

userInfo: action.payload.data

}

默认:

返回状态

}

}

目前作者还处于对Redux知之甚少的状态。嗯，还有很长的路要走。

4.结论

当第一版Gitter通过审核的时候，我很激动。就像我自己的孩子一样，看着他一点一点长大。我也很享受这样一个项目从无到有的过程。在这里，我要向帮助过我的人表示感谢。

当然，目前在功能和体验上可能存在一些不完善的地方，希望大家能提供一些有价值的意见。希望你在为吉特走向完美的路上！

最后，希望Gitter小程序能帮到你！

长的

根据

接近

填充