Gitter:高长相GitHub微信小程序顾客端问世记

原题目:Gitter:高长相GitHub微信小程序顾客端问世记 出自GitHub 创作者: Huangjianke 0. 序言 嗯,将会一进去大部分分人都是感觉,为何还会继续有些人反复造车轮子,GitHub 第三方顾客端

原题目:Gitter:高长相GitHub微信小程序顾客端问世记

出自GitHub

创作者: Huangjianke

0. 序言

嗯,将会一进去大部分分人都是感觉,为何还会继续有些人反复造车轮子,GitHub 第三方顾客端早已经烂街道啦。的确,一刚开始自己也是那么感觉的,也问过自身是不是确实更有意义再去做那样一个新项目。
思索再三,下列缘故也决策了我愿意意去做一个让自身令人满意的 GitHub 第三方顾客端。
网站建设做好这几点

针对经常关心 GitHub Trending 目录的小编来讲,急切必须一个更简易的方法随时随地随地去追随 GitHub 全新的技术性时尚潮流; 现有的一些 GitHub 微信小程序顾客端长相与作用其实不能考虑小编的规定; 听闻 iOS 开发设计没有人要了,把握一门新的开发设计专业技能,又未尝不能? 实际上也没那麼多缘故,即然想干,那么就去做,高兴最大要。

1. Gitter

GitHub:https://github/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 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}`, deion: $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(), deion: $repo .find('.repo-snipit-deion') .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:创作者最终一次递交已经是2年前了,历经自身的试着,也的确发觉早已不适感合如 README.md 的分析 wemark:一款很出色的手机微信微信小程序 Markdown 3D渲染库,但历经小编试着以后,发觉对 README.md 的分析其实不极致 towxml:现阶段发觉是手机微信微信小程序最极致的 Markdown 3D渲染库,早已能几近极致的对 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 ( View className='fail' this.parseReadme.bind(this)} Text className='text' load failed, try it again? /Text /View ) } return ( View { data ? ( View import src='../towxml/entry.wxml' / template is='entry' data='{{...data}}' / /View ) : ( View className='loading' AtActivityIndicator size={20} color='#2d8cf0' content='loading...' / /View ) } /View ) } }

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 還是处在一知半解的情况,嗯,学习培训的路还较长。

4. 结束语篇

当 Gitter 第一个版本号根据审批的情况下,情绪是很兴奋的,如同自身的小孩一样,看见他一点一点的长大了,小编也很享有那样一个新项目不断发展的全过程,在此,对这些协助过小编的人一并表明谢谢。

自然,现阶段作用和感受上将会一些并不大健全,也期待大伙儿能出示一些珍贵的建议,Gitter 迈向极致的道上期待有了你!

最终,期待 Gitter 微信小程序能对给你所协助!

文中为设备的心经受权转截,转截请联络著作人得到受权。回到凡科,查询大量

义务编写:

  • 手机微信微信小程序发布

    服务供应商的手机微信微信小程序审核“加速体系”早就公布了2个月了,许多服务供应商早就尝到审核加速的“幸福快乐开心”。但一般开发设计设计方案者要临时性性公布、遇到突发

  • 小程序来了,原生 App 还有

    (最少先在国) 手机微信的渗入率将会比单一实际操作系统软件高(iOS 手机微信+Android 手机微信 > iOS,iOS 手机微信+Android 手机微信 > Android,猜想,沒有历经资格证书),并且店铺的互

  • 如何才可以搞好微信小程

    客户在手机端的检索有三个需求:迅速、更准、更优。无论是服务直通、作用直通、還是知名品牌经典店,设计方案的目地都以这三个因素为关键。 服务直通,让客户“迅速”得到服务

  • 中澳社腾迅发布“云聚中

    2020年中秋节节来临之时,在我国新闻报道报导社与腾讯公司在九月份28日携手并肩并肩公布“云聚中秋节节”手机上手机微信手机微信微信小程序,向在我国我国和包括海外出国留学出

  • 微信小程序开发设计是多

    模拟题目:手机微信微信小程序开发设计设计方案多少钱钱合适 手机微信微信小程序多少钱钱,这一难点,就如一辆小汽车多少钱钱一样。 那类即将毁损的破吐司吐司面包车,最划得来