酷应用

如何从零开始撸一个高颜值 GitHub 小程序？| 技术头条

百家 作者：程序人生 2019-05-03 08:16:46


作者 |?huangjianke

责编 | 伍杏玲


前言


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

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

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

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

  • 其实也没那么多原因，既然想做，那就去做，开心最重要。


Gitter


  • GitHub：https://github.com/huangjianke/Gitter，可能是目前颜值最高的 GitHub 小程序客户端，欢迎 Star

  • 数据来源：GitHub API v3（https://developer.github.com/v3/）

目前实现的功能有：

  • 实时查看 Trending

  • 显示用户列表

  • 仓库和用户的搜索

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

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

  • Issue：查看 issue 列表、新增 issue、新增 issue 评论

  • 分享仓库、开发者

  • ...

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

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


探索篇


技术选型

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

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

  • 原生开发：基本上一开始就放弃了，开发体验很不友好；

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

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

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

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

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

页面设计

其实，作为一名 Coder，曾经一直想找个 UI 设计师妹子做老婆（肯定有和我一样想法的 Coder），多搭配啊。

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

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


开发篇


Talk is cheap. Show me the code.

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

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

Trending

进入开发阶段没多久，就遇到了第一个坑。GitHub 居然没有提供 Trending 列表的 API ！

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

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

  • 爬取 Trending Repositories

async?function?fetchRepositories({

??language?=?'',

??since?=?'daily',

}?=?{})?{

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

??const?data?=?await?fetch(url);

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

??return?(

????$('.repo-list?li')

??????.get()

??????//?eslint-disable-next-line?complexity

??????.map(repo?=>?{

????????const?$repo?=?$(repo);

????????const?title?=?$repo

??????????.find('h3')

??????????.text()

??????????.trim();

????????const?relativeUrl?=?$repo

??????????.find('h3')

??????????.find('a')

??????????.attr('href');

????????const?currentPeriodStarsString?=

??????????$repo

????????????.find('.float-sm-right')

????????????.text()

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

????????const?builtBy?=?$repo

??????????.find('span:contains("Built?by")')

??????????.parent()

??????????.find('[data-hovercard-type="user"]')

??????????.map((i,?user)?=>?{

????????????const?altString?=?$(user)

??????????????.children('img')

??????????????.attr('alt');

????????????const?avatarUrl?=?$(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();

????????const?colorNode?=?$repo.find('.repo-language-color');

????????const?langColor?=?colorNode.length

????????????colorNode.css('background-color')

??????????:?null;

????????const?langNode?=?$repo.find('[itemprop=programmingLanguage]');

????????const?lang?=?langNode.length

????????????langNode.text().trim()

??????????:?/*?istanbul?ignore?next?*/?null;

????????return?omitNil({

??????????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

async?function?fetchDevelopers({?language?=?'',?since?=?'daily'?}?=?{})?{

??const?data?=?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);

??????const?relativeUrl?=?$dev.find('.f3?a').attr('href');

??????const?name?=?getMatchString(

????????$dev

??????????.find('.f3?a?span')

??????????.text()

??????????.trim(),

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

??????);

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

??????const?username?=?$dev

????????.find('.f3?a')

????????.text()

????????.trim();

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

??????return?omitNil({

????????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?=?new?Date()
??if?(type?===?'repositories')?{
????const?cacheKey?=?`repositories::${language?||?'nolang'}::${since?||
????'daily'}`;
????const?cacheData?=?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)
????????}
??????})
????}
??}?else?if?(type?===?'developers')?{
????const?cacheKey?=?`developers::${language?||?'nolang'}::${since?||?'daily'}`;
????const?cacheData?=?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 解析云函数

const?Towxml?=?require('towxml');
const?towxml?=?new?Towxml();

//?云函数入口函数
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 组件

import?Taro,?{?Component?}?from?'@tarojs/taro'
import?PropTypes?from?'prop-types'
import?{?View,?Text?}?from?'@tarojs/components'
import?{?AtActivityIndicator?}?from?'taro-ui'

import?'./markdown.less'

import?Towxml?from?'../towxml/main'

const?render?=?new?Towxml()

export?default?class?Markdown?extends?Component?{
??static?propTypes?=?{
????md:?PropTypes.string,
????base:?PropTypes.string
??}

??static?defaultProps?=?{
????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?(
????????'fail'?onClick={this.parseReadme.bind(this)}>
??????????'text'>load?failed,?try?it?again?
????????
??????)
????}
????return?(
??????
??????{
????????data???(
??????????
????????????< import?src='../towxml/entry.wxml'?/>
????????????
????????)?:?(
??????????'loading'>
????????????20}?color='#2d8cf0'?content='loading...'?/>
??????????
????????)
??????}
??????
????)
??}
}

Redux

其实，笔者在该项目中，对 Redux 的使用并不多。一开始，笔者觉得所有的接口请求都应该通过 Redux 操作，后面才发现，并不是所有的操作都必须使用 Redux，最后，在本项目中，只有获取个人信息的时候使用了 Redux。

//?获取个人信息
export?const?getUserInfo?=?createApiAction(USERINFO,?(params)?=>?api.get('/user',?params))


export?function?createApiAction(actionType,?func?=?()?=>?{})?{
??return?(
????params?=?{},
????callback?=?{?success:?()?=>?{},?failed:?()?=>?{}?},
????customActionType?=?actionType,
??)?=>?async?(dispatch)?=>?{
????try?{
??????dispatch({?type:?`${customActionType??}_request`,?params?});
??????const?data?=?await?func(params);
??????dispatch({?type:?customActionType,?params,?payload:?data?});

??????callback.success?&&?callback.success({?payload:?data?})
??????return?data
????}?catch?(e)?{
??????dispatch({?type:?`${customActionType??}_failure`,?params,?payload:?e?})

??????callback.failed?&&?callback.failed({?payload:?e?})
????}
??}
}

??getUserInfo()?{
????if?(hasLogin())?{
??????userAction.getUserInfo().then(()=>{
????????Taro.hideLoading()
????????Taro.stopPullDownRefresh()
??????})
????}?else?{
??????Taro.hideLoading()
??????Taro.stopPullDownRefresh()
????}
??}

const?mapStateToProps?=?(state,?ownProps)?=>?{
??return?{
????userInfo:?state.user.userInfo
??}
}
export?default?connect(mapStateToProps)(Index)


export?default?function?user?(state?=?INITIAL_STATE,?action)?{
??switch?(action.type)?{
????case?USERINFO:
??????return?{
????????...state,
????????userInfo:?action.payload.data
??????}
????default:
??????return?state
??}
}

目前，笔者对 Redux 还是处于一知半解的状态，学习的路还很长。


结语篇

当 Gitter 第一个版本通过审核的时候，心情是很激动的，就像自己的孩子一样，看着他一点一点地长大，笔者也很享受这样一个项目从无到有的过程，在此，对那些帮助过笔者的人一并表示感谢。

当然，目前功能和体验上可能有些不大完善，也希望大家能提供一些宝贵的意见，Gitter 走向完美的路上希望有你！

最后，希望 Gitter 小程序能对你有所帮助！

另附项目源码：https://github.com/huangjianke/Gitter

作者简介：huangjianke，高级iOS开发/前端开发工程师，五年开发经验。

声明：本文经作者授权转载，版权归作者所有。

零基础学习小程序？

开发小程序遇到问题不知道问谁？

找不到小程序的组织？

欢迎加入我们的小程序开发者群！

作为码一代，想教码二代却无从下手：

听说少儿编程很火，可它有哪些好处呢？

孩子多大开始学习比较好呢？又该如何学习呢？

最新的编程教育政策又有哪些呢？

下面给大家介绍CSDN新成员：极客宝宝（ID：geek_baby）

戳他了解更多↓↓↓

?热 文?推 荐?

?为什么程序员都特想要机械键盘？

??他，是一个身高不到 90 厘米的程序员

??Python 爬取 50,000 条数据，告诉你五一哪里没有人人人人！（内附折扣景点列表）

??天才程序员：25 岁进贝尔实验室，32 岁创建信息论

??为什么是张一鸣？为什么是抖音？

??从BSV下架风波, 揭秘构造区块链分叉的测试方案 | 技术头条

??IoT与大数据 如何激发数字营销最大潜能？

??重磅！Facebook更新PyTorch 1.1，打算跨GPU分割神经网络

??她说：为啥程序员都特想要机械键盘？这答案我服！

System.out.println("点个在看吧！");
console.log("点个在看吧！");
print("点个在看吧！");
printf("点个在看吧！n");
cout?< "点个在看吧！"?< Console.WriteLine("点个在看吧！");
Response.Write("点个在看吧！");
alert("点个在看吧！")
echo "点个在看吧！"
你点的每个“在看”，我都认真当成了喜欢

                
关注公众号：拾黑（shiheibook）了解更多

                        
[广告]赞助链接：

                        

                            四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/

                            让资讯触达的更精准有趣：https://www.0xu.cn/
                        

                    

                    

                        
*文章为作者独立观点，不代表 爱尖刀 立场

                        
本文由 程序人生发表，转载此文章须经作者同意，并请附上出处(
                            爱尖刀 )及本页链接。
                        

                        
原文链接 https://www.ijiandao.com/2b/baijia/253356.html

                        

                                Github
                        

                    

                    
                

            

        

        

            

                

                
                

                
                
                
            

        

        

            

                
图库

                
            

        

    

    

        

            
                程序人生
                程序人生
            
        

        

            公众号
            关注网络尖刀微信公众号

            随时掌握互联网精彩
        

        

            
    

        

            赞助链接
        

    

    
        

            
        

    
    
    

        
    

    
    
    

        
    

    
    
    

        
    

    
    
    

        
    

    
    
    

        
    

    
    
    

        
    

    

        

        

                
    

    

        

        

            
百度热搜榜

            

                排名
                热点
                搜索指数
            

            
        

    




    
    

        

            

                iTrust
                
            

            

                
AiDeep Ued

                

                    关于我们
                    联系我们
                    升级日志
                    法律声明
                    广告服务
                    侵删通道
                

                

                    Copyright © 2021 K2CMS All rights reserved.
                

                

                    京ICP备14006288号