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

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

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

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文件中进行筛选并设计展示界面：

<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