微信小程序中获取GitHub中仓库列表数据

本人曾想着利用微信小程序制作一个展示自己个人简历的应用,其中包括本人上传至GitHub中的一些项目信息。然而微信小程序不支持直接打开网页链接。因此,GitHub中项目的展示则需要通过其他方式来解决动态展示问题。

在GitHub中提供了API以动态获取某一用户的所有代码仓库信息,本人账户的仓库信息API即为https://api.github.com/users/hirojisawatari/repos。要获取API提供的仓库信息,需要在小程序相关页面的js文件内onLoad事件下添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
wx.request({
url: 'https://api.github.com/users/hirojisawatari/repos',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
that.setData({
list: res.data,
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})

在此之前需在data事件下声明list数组,通过以上代码则将所有信息存至list数组中。API中提供了关于某一仓库的大量信息,而我们只需要其中的一部分,例如仓库名、详细说明、使用语言等。因此我们可以在wxml文件中进行筛选并设计展示界面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template name="item">
<view class="item">
<view class="meta">
<text class="title">{{ item.name }}</text>
<text class="sub-title">{{ item.description }}</text>
</view>
<view class="lang">
<text>{{ item.language }}</text>
</view>
</view>
</template>
<template name="git-list">
<scroll-view scroll-y="true" class="page-body" bindscrolltolower="loadMore">
<template is="item" data="{{ item }}" wx:for="{{ list }}"></template>
</scroll-view>
</template>

若为了管理方便,可以将以上xml代码单独存储,在相应界面的wxml中用以下代码调用即可:

1
2
3
<import src="../common/git-list.wxml"></import>
<template is="git-list" data="{{ list }}"></template>

最终界面如下图所示:

Screenshot