简介

Trello是一款团队管理工具。本文介绍的是使用微信小程序做一个积分排名的项目，从微信小程序端去调用Trello的接口、获取掘金上面的文章,按照特定的规则去积分。项目开始之前需要做一些准备工作：

1. 注册 Trello 账号-->注册为开发者 -->获取 trello 开发者的key -->生成 token。然后进入Trello API 文档获取需要的接口。
2. 成为微信小程序开发者，具体步骤请参考developers.weixin.qq.com/miniprogram…
3. 获取genetalks_大数据里面的所有文章。

提示：使用微信开发者工具发请求前先把：微信开发者工具（右上角） --> 详情 --> 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书 (✔ 上)

积分规则如下

积分项	积分点	分值
掘金博客	发表一篇（阅读量100+，字数1000+，文字500+）	10
————	点赞数第一	10
————	阅读数第一	10
练习题	题目难度：hard	3
————	题目难度：medium	2
————	题目难度：easy	1

练习题在 Trello 里面,获取对应的 board（Trello 中的看板 ）里面有 list(board 里面的任务列表) 里面有 card（对应任务、题目）。按照一定的约定在对应的 board 里面去创建 list --> card，完成了对应的任务才能去归档，然后获得对应的 board 里面归档的 card 对应参与排名者应该获得的积分。

只有博客在掘金里面，因此需要获取掘金里面的文章，但是掘金平台方面没有提供 api 接口，那么就只有自己去获取对应的 html 页面，然后做字符串截取了。

实现

因为页面比较简单，页面也少。下面说说Promise处理异步的问题。

二、微信小程序端不引入第三方 js 脚本的情况下处理异步问题。

本人所知的处理 js 异步问题的方法：

1. 使用回调。缺点：代码逻辑变的复杂，回调层次根据你访问接口的次数越来越深。
2. 使用 async await,但是不引入第三方 js 脚本，就不能使用。
3. Promise，下面会讲解怎样使用 Promise，不再需要回调，代码可读性提高。

微信小程序发送请求。例：

统计积分需要获取 Trello 的接口、掘金的文章，拿到数据后进行其他操作，使用回调

let sort = () => {}; // sort函数做逻辑处理，排序操作
const get_data = () => {
  const _this = this;
  const get_board = (callback) => {
    wx.request({
      url: 'https://*****',
      success: resp => {
        // 拿到resp
        // 使用回调
        // 如果需要把resp传入过去，然后做逻辑处理
        // 回调里面使用了回调，把sort 当成参数传入、也可以不传入,直接在callback,里面调用。如果都正常返回的话此处调用了一次sort函数
        resp.data.forEach((item, index) => {
          callback(item, index === resp.data.length - 1 && sort);
        })
      }
    });
  };
  const get_cards = (data, callback) => {
    wx.request({
      url: data.url,
      success: () => {
        // 业务逻辑处理
        // ................
        callback && callback();
      }
    })
  }
  const get_blogs = (callback) => {
    wx.request({
      url: 'https//****',
      success: resp => {
        // 同上。。。。。
      }
    })
  }
  get_board(get_cards); // 获取board里面的cards 
  get_blogs(get_blog_detail) // 获取博客的内容
  // 然后调用get_board 、get_blogs，这样的话虽然也能做最后的逻辑处理，但是sort函数被执行了2次，并且还容易因为数据请求出错，而发生统计错误。
};

使用Promise

做出修改，抽取request_fun,传入参数从单值传入，改为obj按需传入

// 获取board下归档的card
const request_fun = (obj) => {
  return new Promise(resolve, reject) => {
    wx.request({
      url: obj.url,
      success: (resp) => resolve(resp),
      fail: (err) => reject(err)
    }),
  }
}
const get_cards = (obj) => {
  // 返回一个Promise，拥有card接口返回值。
  return request_fun(obj);
}
// 获取所有的board
const get_board = () => {
  // obj,所有需要传入的参数，key: 需要传入的字段名
  let obj = {
    // 例如url,data,success,fail都可以作为参数传入
    url: 'https://****',
    data: {},
  }
  let promise_arr;
  // 此时的get_value拥有board接口返回的值
  return request_fun(obj).then(resp => {
    // 遍历需要参与积分的board
    resp.data.forEach(item => {
      // 把每个card接口返回的Promise 存储到promise_arr数组里
      promise_arr.push(get_cards(item));
    })
    // Promise.all函数接收一个Promise数组
    // 使用Promise.all 等所有获取card的接口都执行完了会返回一个数组，数组的每一项对应board下面card的返回值
    return Promise.all(promise_arr)
  })
  // 博客的获取方式与上面获取card的方式一样  
}
  // 在写一个Promise.all()等待获取掘金博客的数据与获取Trello的数据都获取到了就可以执行最后的数据汇总及排序。调用sor()
  const get_data = () => {
    return Promise.all([get_board(), get_card()]).then(resp => return sort(resp));
  }

微信小程序上线问题

1. 微信小程序只能获取https的API
2. 因为开发时选用的是不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书，所以当你上传了代码，使用体验版本时，会发现所有的接口都获取不到数据，这时你需要去微信小程序后台管理页面 开发 --> 开发设置 --> 服务器域名：

把域名填配置在这里。如果提示你域名未备案，可以做域名转发，自己不会的话可以请教后台的大哥帮忙。

欧克，总结完毕！！！

原文链接：tech.gtxlab.com/WXTrello.ht…

---

作者信息：宁文飞，人和未来大数据前端工程师