手把手带你利用云函数 SCF 轻松实现一个热点资讯小程序

第一步，环境配置

打开微信小程序开发 IDE，建立一个小程序项目，AppID 须要本身去小程序官网注册一个，而后后端服务注意选择小程序-云开发。

注意，之前的老版本 IDE，在蓝色框那里会有一个腾讯云的选项。实际上都是使用的腾讯云服务，统一选择小程序-云开发就好。

点击新建，会出现这样一个界面：

能够看到，微信开发者工具的脚手架已经为咱们建立好了一些模板代码，今天，猪脚就是咱们的 cloudfunctions 部分，即如何利用腾讯云为咱们即将写的新闻小程序提供数据服务。

在开发以前，咱们发现控制台报了一个错误，提示咱们没有开通云服务。咱们发现微信开发者工具的顶部工具栏中，云开发那个按钮是灰色的，点击进去，提示咱们开通，表示咱们没有开通云开发服务，点击它，新建一个。

配置完毕以后，你可能会关系费用问题，不用担忧，默认的配置是彻底免费的，若是你用户量不太大，基本上够你的平常需求了，对我的开发者来讲，至关的友好。

第二步：云函数开发及部署

云服务开通完毕，接下来能够部署下脚手架为咱们提供的云函数，能够看到 cloudfunctions 文件夹提示未选择环境，咱们右键点击，选择咱们刚才开通的那个云开发环境。而后展开目录，对准 login 这个目录，右键，选择

而后，关闭 IDE，重启 IDE，在点击第一个按钮，获取 openid，此时能够看到获取 openid 是成功的了。

这里表示咱们的云开发环境从开通到部署的链路已经打通了，接下来的事情，固然是写本身的云函数了。咱们是要作一个新闻咨询的小程序，因此，通常来讲，找一个本身常常看的以为内容质量不错的新闻内网站看看人家提供了什么接口没，分两步走：

1. 若是有提供了接口，咱们在云函数中直接调用接口，拿到数据，喂给小程序前端便可，这种最方便了。

2. 一般状况下是没有接口的，此时怎么办？一个思路是使用云函数去爬取新闻网站的内容，存放到云开发 db 上面，而后小程序端来读云开发 db 中的内容，亦或者直接经过经过爬虫程序生成一个 json 返回给小程序端，不经过存储 db 这个过程。其缺点是没有缓存数据，每次都要通过爬虫去爬，用户可能等好久才能看到新闻，体验并很差。目前，云开发套件里面有提供 db 服务，因此，既然提供了，固然就直接拿来使用了，提高用户体验的事，固然就得干了。

本文为了简便期间，目的就是为了介绍如何在小程序中使用腾讯云的云函数功能，所以，就不介绍 db 的存储了。那么，开始吧。

新建云函数

直接对这 cloudfunctions 那个文件夹点击新建云函数，成功以后就会看到目录里面有脚手架生成的一些框架代码了。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    data:data
  }
}

大多看到是这种，其中 wxContext 是小程序的上下文，这里能够拿到小程序的 AppID 等等一些常量信息。

而后，event 这个参数是干吗，event 其实就是小程序端传递给这边的参数：

getNews:function(){
    wx.cloud.callFunction({
      name: 'news',
      data: {
        hot_type:'views',//hot_type 可接受参数 views（浏览数） | likes（点赞数） | comments（评论数）
        category:'Article',//category 可接受参数 Article | GanHuo | Girl
        count:20
      },
      success: res => {
        console.log('[云函数] [news] 调用')
        console.log(res)
        this.setData({
          news:res.result.data
        })
      },
      fail: err => {
        console.error('[云函数] [news] 调用失败', err)
      }
    })
  },

好比，我在小程序端调用 news 这个云函数，传递 data 为

{
  hot_type:'views',//hot_type 可接受参数 views（浏览数） | likes（点赞数） | comments（评论数）
  category:'Article',//category 可接受参数 Article | GanHuo | Girl
  count:20
}

那么这个 event 其实就是这个 object。

好了，了解了脚手架为咱们建立的一些模板及其参数以后，咱们就能够编写业务逻辑了。

获取新闻逻辑

获取新闻须要发送网络请求，这里咱们直接使用 axios，可是微信小程序这里没有提供，因此咱们须要在云函数的目录中去执行

npm i axios

注意，必定是在你生成的按个云函数的目录中去执行 npm i

而后，就能够愉快的写网路请求了。

// 云函数入口文件
const cloud = require('wx-server-sdk')
const axios = require('axios')
cloud.init()

async function getNews(category,hot_type,count) {
  console.log('start getNews')
  let data = {}
  try {
    const url = `https://gank.io/api/v2/hot/${hot_type}/category/${category}/count/${count}`
    console.log(url)
    var res = await axios.get(url)
    data = res.data.data
  } catch (err) {
    console.log(err)
  }
  return data
}
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const data =  await getNews(event.category,event.hot_type,event.count)
  console.log(data)
  return {
    event,
    data:data
  }
}

如上，我在云函数中加了一个 getNews 的方法，接受的三个参数是小程序端传递过来的。而后拿到请求结果以后，在返回给小程序端。须要注意的是，返回的 body 是这样的。

而咱们真正从云函数拿到的结果包裹在内层的 result 中。

至此，手把手带你使用云函数进行小程序开发已经结束了，相信这个简单的 demo 能够带你打开对如何利用云函数开发更多有趣的小程序的大门。

好比，你能够作一个小游戏，利用云函数做为中转请求你的后台，让云函数实现权限校验，来保护你本身的服务器。

好比，你能够作一个亲子相册，利用云函数，存储图片到腾讯云存储。

亦或者，你能够作聊天室...

One More Thing

3 秒你能作什么？喝一口水，看一封邮件，仍是 —— 部署一个完整的 Serverless 应用？

复制连接至 PC 浏览器访问：https://serverless.cloud.tencent.com/deploy/express

3 秒极速部署，当即体验史上最快的 Serverless HTTP 实战开发！

传送门：

• GitHub: github.com/serverless
• 官网：serverless.com

欢迎访问：Serverless 中文网，您能够在 最佳实践 里体验更多关于 Serverless 应用的开发！

---

推荐阅读：《Serverless 架构：从原理、设计到项目实战》