使用uniCloud实现疫情跟踪

先给一段简介

      uniCloud 是 DCloud 联合阿里云、腾讯云，为 uni-app 的开发者提供的基于 serverless 模式和 js 编程的云开发平台。

• 开发者在HBuilderX里为项目新建 uniCloud 云环境（可选择阿里云或腾讯云），在云函数目录下编写js代码，上传部署云函数到阿里云或腾讯云的 serverless 环境中。

• 前端代码通过uniCloud.callFunction()方法调用云函数。

• 云函数中可执行js运算、读写云化数据库（NoSQL）、读写存储和CDN、操作网络，给前端返回数据

 

好了不废话了，搞起来。

创建uniCloud项目，开发工具为HbuilderX,正式版并不支持uniCloud，需要升级到alpha版

 

因为我们实现的是疫情跟踪，类似于新闻，所以我们选用新闻模板。

 

创建成功后右击左侧的cloudfunctions目录，选择创建云服务空间（需要实名认证）

创建成功后就可以添加下方的云函数

 

先来一段简介：

一个云函数的写法与一个在本地定义的 JavaScript 方法无异，代码运行在云端 Node.js 中。当云函数被客户端调用时，定义的代码会被放在 Node.js 运行环境中执行。

开发者可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作，而且还可以通过云函数服务端 SDK 搭配使用多种服务，比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作

 

我们新建一个获取疫情实时新闻的云函数，期间调用了天行数据提供的免费API，在此表示感谢，api详情请查看以下链接

https://www.tianapi.com/apiview/169#apicode

我们右击cloudfunctions目录新建一个名为ncov的云函数，代码如下

代码奉上：

'use strict';exports.main = async (event, context) => {  //请求天行数据api获取实时疫情数据  //uniCloud.httpclient为uniCloud封装的请求参数  const res = await uniCloud.httpclient.request('http://api.tianapi.com/txapi/ncov/index', {      method: 'POST',      data: {        //天行数据的appkey        key: 'XXXXXXXXXXX'      },      dataType: 'json',    header: {'content-type':'application/x-www-form-urlencoded'}    })  //解析接口返回数据给客户端  return res.data.newslist;};

好，实时疫情新闻数据拿到了，我们现在只需要在前端获取并且渲染到页面就可以了。

 

突然想到天行数据提供了几个api，我们再弄一个谣言鉴别的分类，顺便把分类放到uniCloud的数据库，学习一下数据库的使用。

新建一个名为tab的表，界面如下：

然后加两个分类

 

加完后就新增一个获取分类的云函数tabList，代码量很少，三行足够了

代码如下：​​​​​​​

'use strict';exports.main = async (event, context) => {  //获取数据库实例  const db = uniCloud.database();  //获取分类集合的引用  const collection = db.collection('tab');  //把分类全部返回到客户端  return collection.get().then(res=>{return res.data}).catch(console.log.bind(console));};

好，一切准备就绪，前端获取数据渲染就万事大吉了，前端代码如下

​​​​​​​

    uniCloud.callFunction({          //云函数名称          name: 'tabList',          //请求云函数的请求参数，即云函数的event对象          data: {}    }).then(res => {          //云函数返回的数据          let tabList = res.result;    })

效果如下：

 

今天的学习先到这里了，感谢大家的收看，希望对大家有点帮助。

中国加油！武汉加油！