选自GitHub

作者: Huangjianke

0. 前言

嗯,可能一进来大部分人都会觉得,为什么还会有人重复造轮子,GitHub 第三方客户端都已经烂大街啦。确实,一开始我自己也是这么觉得的,也问过自己是否真的有意义再去做这样一个项目。思考再三,以下原因也决定了我愿意去做一个让自己满意的 GitHub 第三方客户端。

对于时常关注 GitHub Trending 列表的笔者来说,迫切需要一个更简单的方式随时随地去跟随 GitHub 新的技术潮流;

已有的一些 GitHub 小程序客户端颜值与功能并不能满足笔者的要求;

听说 iOS 开发没人要了,掌握一门新的开发技能,又何尝不可?

其实也没那么多原因,既然想做,那去做,开心重要。

1. Gitter

Gitter:高颜值GitHub小程序客户端诞生记插图

GitHub:https://github.com/huangjianke/Gitter,可能是目前颜值高的 GitHub 小程序客户端,欢迎 star

数据来源:GitHub API v3

目前实现的功能有:

实时查看 Trending

显示用户列表

仓库和用户的搜索

仓库:详情展示、README.md 展示、Star/Unstar、Fork、Contributors 展示、查看仓库文件内容

开发者:Follow/Unfollow、显示用户的 followers/following

Issue:查看 issue 列表、新增 issue、新增 issue 评论

分享仓库、开发者

Gitter 的初衷并不是想把网页端所有功能照搬到小程序上,因为那样的体验并不会很友好,比如说,笔者自己也不想在手机上阅读代码,那将会是一件很痛苦的事。

在保证用户体验的前提下,让用户用更简单的方式得到自己想要的,这是一件有趣的事。

2. 探索篇

技术选型

次觉得,在茫茫前端的世界里,自己是那么渺小。

当决定去做这个项目的时候,开始了马不停蹄的技术选型,但摆在自己面前的选择是那么的多,也不得不感慨,前端的世界,真的很精彩。

原生开发:基本上一开始放弃了,开发体验很不友好;

WePY:之前用这个框架已经开发过一个小程序,诗词墨客,不得不说,坑是真多,用过的都知道;

mpvue:用 Vue 的方式去开发小程序,个人觉得文档并不是很齐全,加上近期维护比较少,可能是趋于稳定了?

Taro:用 React 的方式去开发小程序,Taro 团队的小伙伴维护真的很勤快,也很耐心的解答大家疑问,文档也比较齐全,开发体验也很棒,还可以一键生成多端运行的代码 (暂没尝试)

货比三家,经过一段时间的尝试及踩坑,综合自己目前的能力,终确定了 Gitter 的技术选型:

Taro + Taro UI + Redux + 云开发 Node.js

页面设计

其实,作为一名 Coder,曾经一直想找个 UI 设计师妹子做老婆的 (肯定有和我一样想法的 Coder),多搭配啊。现在想想,code 不是生活的全部,现在的我一样很幸福。

话回正题,没有设计师老婆页面设计怎么办?毕竟笔者想要的是一款高颜值的 GitHub 小程序。

嗯,不慌,默默的拿出了笔者沉寂已久的 Photoshop 和 Sketch。不敢说自己的设计能力如何,Gitter 的设计至少是能让笔者自己心情愉悦的,倘若哪位设计爱好者想对 Gitter 的设计进行改良,欢迎欢迎,十二分的欢迎!

3. 开发篇

Talk is cheap. Show me the code.

作为一篇技术性文章,怎可能少得了代码。

在这里主要写写几个踩坑点,作为一个前端小白,相信各位读者均是笔者的前辈,还望多多指教!

Trending

进入开发阶段没多久,遇到了个坑。GitHub 居然没有提供 Trending 列表的 API!!!

也没有过多的去想 GitHub 为什么不提供这个 API,只想着怎么去尽快填好这个坑。一开始尝试使用 Scrapy 写一个爬虫对网页端的 Trending 列表信息进行定时爬取及存储供小程序端使用,但终还是放弃了这个做法,因为笔者并没有服务器与已经备案好的域名,小程序的云开发也只支持 Node.js 的部署。

开源的力量还是强大,终找到了 github-trending-api,稍作修改,成功部署到小程序云开发后台,在此,感谢原作者的努力。

爬取Trending Repositories

asyncfunctionfetchRepositories({

language=,

since=daily,

}={}){

consturl=`${GITHUB_URL}/trending/${language}?since=${since}`;

constdata=await fetch(url);

const$=cheerio.load(await data.text());

return(

$(.repo-list li)

.get()

// eslint-disable-next-line complexity

.map(repo=>{

const$repo=$(repo);

consttitle=$repo

.find(h3)

.text()

.trim();

constrelativeUrl=$repo

.find(h3)

.find(a)

.attr(href);

constcurrentPeriodStarsString=

$repo

.find(.float-sm-right)

.text()

.trim()||/* istanbul ignore next */;

constbuiltBy=$repo

.find(span:contains(“Built by”))

.parent()

.find([data-hovercard-type=”user”])

.map((i,user)=>{

constaltString=$(user)

.children(img)

.attr(alt);

constavatarUrl=$(user)

.children(img)

.attr(src);

return{

username:altString

?altString.slice(1)

:/* istanbul ignore next */null,

href:`${GITHUB_URL}${user.attribs.href}`,

avatar:removeDefaultAvatarSize(avatarUrl),

};

})

.get();

constcolorNode=$repo.find(.repo-language-color);

constlangColor=colorNode.length

?colorNode.css(background-color)

:null;

constlangNode=$repo.find([itemprop=programmingLanguage]);

constlang=langNode.length

?langNode.text().trim()

:/* istanbul ignore next */null;

returnomitNil({

author:title.split(/)[0],

name:title.split(/)[1],

url:`${GITHUB_URL}${relativeUrl}`,

description:

$repo

.find(.py-1 p)

.text()

.trim()||/* istanbul ignore next */,

language:lang,

languageColor:langColor,

stars:parseInt(

$repo

.find(`[href=“${relativeUrl}/stargazers”]`)

.text()

.replace(,,)||/* istanbul ignore next */0,

10

),

forks:parseInt(

$repo

.find(`[href=“${relativeUrl}/network”]`)

.text()

.replace(,,)||/* istanbul ignore next */0,

10

),

currentPeriodStars:parseInt(

currentPeriodStarsString.split()[0].replace(,,)||

/* istanbul ignore next */0,

10

),

builtBy,

});

})

);

}

爬取Trending Developers

asyncfunctionfetchDevelopers({language=,since=daily}={}){

constdata=await fetch(

`${GITHUB_URL}/trending/developers/${language}?since=${since}`

);

const$=cheerio.load(await data.text());

return$(.explore-content li)

.get()

.map(dev=>{

const$dev=$(dev);

constrelativeUrl=$dev.find(.f3 a).attr(href);

constname=getMatchString(

$dev

.find(.f3 a span)

.text()

.trim(),

/^\((.+)\)$/i

);

$dev.find(.f3 a span).remove();

constusername=$dev

.find(.f3 a)

.text()

.trim();

const$repo=$dev.find(.repo-snipit);

returnomitNil({

username,

name,

url:`${GITHUB_URL}${relativeUrl}`,

avatar:removeDefaultAvatarSize($dev.find(img).attr(src)),

repo:{

name:$repo

.find(.repo-snipit-name span.repo)

.text()

.trim(),

description:

$repo

.find(.repo-snipit-description)

.text()

.trim()||/* istanbul ignore next */,

url:`${GITHUB_URL}${$repo.attr(href)}`,

},

});

});

}

Trending列表云函数

// 云函数入口函数

exports.main=async(event,context)=>{

const{type,language,since}=event

let res=null;

let date=newDate()

if(type===repositories){

constcacheKey=`repositories::${language||nolang}::${since||

daily}`;

constcacheData=await db.collection(repositories).where({

cacheKey:cacheKey

}).orderBy(cacheDate,desc).get()

if(cacheData.data.length!==0&&

((date.getTime()cacheData.data[0].cacheDate)<1800*1000)){

res=JSON.parse(cacheData.data[0].content)

}else{

res=await fetchRepositories({language,since});

await db.collection(repositories).add({

data:{

cacheDate:date.getTime(),

cacheKey:cacheKey,

content:JSON.stringify(res)

}

})

}

}elseif(type===developers){

constcacheKey=`developers::${language||nolang}::${since||daily}`;

constcacheData=await db.collection(developers).where({

cacheKey:cacheKey

}).orderBy(cacheDate,desc).get()

if(cacheData.data.length!==0&&

((date.getTime()cacheData.data[0].cacheDate)<1800*1000)){

res=JSON.parse(cacheData.data[0].content)

}else{

res=await fetchDevelopers({language,since});

await db.collection(developers).add({

data:{

cacheDate:date.getTime(),

cacheKey:cacheKey,

content:JSON.stringify(res)

}

})

}

}

return{

data:res

}

}

Markdown 解析

嗯,这是一个大坑。

在做技术调研的时候,发现小程序端 Markdown 解析主要有以下方案:

wxParse:作者后一次提交已是两年前了,经过自己的尝试,也确实发现已经不适合如 README.md 的解析

wemark:一款很优秀的微信小程序 Markdown 渲染库,但经过笔者尝试之后,发现对 README.md 的解析并不完美

towxml:目前发现是微信小程序完美的 Markdown 渲染库,已经能近乎完美的对 README.md 进行解析并展示

在 Markdown 解析这一块,终采用的也是 towxml,但发现在解析性能这一块,目前并不是很优秀,对一些比较大的数据解析也超出了小程序所能承受的范围,还好贴心的作者 (sbfkcel) 提供了服务端的支持,在此感谢作者的努力!

Markdown解析云函数

constTowxml=require(towxml);

consttowxml=newTowxml();

// 云函数入口函数

exports.main=async(event,context)=>{

const{func,type,content}=event

let res

if(func===parse){

if(type===markdown){

res=await towxml.toJson(content||,markdown);

}else{

res=await towxml.toJson(content||,html);

}

}

return{

data:res

}

}

markdown.js组件

importTaro,{Component}from@tarojs/taro

importPropTypesfromprop-types

import{View,Text}from@tarojs/components

import{AtActivityIndicator}fromtaro-ui

import./markdown.less

importTowxmlfrom../towxml/main

constrender=newTowxml()

exportdefaultclassMarkdownextendsComponent{

staticpropTypes={

md:PropTypes.string,

base:PropTypes.string

}

staticdefaultProps={

md:null,

base:null

}

constructor(props){

super(props)

this.state={

data:null,

fail:false

}

}

componentDidMount(){

this.parseReadme()

}

parseReadme(){

const{md,base}=this.props

let that=this

wx.cloud.callFunction({

// 要调用的云函数名称

name:parse,

// 传递给云函数的event参数

data:{

func:parse,

type:markdown,

content:md,

}

}).then(res=>{

let data=res.result.data

if(base&&base.length>0){

data=render.initData(data,{base:base,app:this.$scope})

}

that.setState({

fail:false,

data:data

})

}).catch(err=>{

console.log(cloud,err)

that.setState({

fail:true

})

})

}

render(){

const{data,fail}=this.state

if(fail){

return(

<ViewclassName=failonClick={this.parseReadme.bind(this)}>

<TextclassName=text>load failed,tryit again?

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: