持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

1.云函数简介

云开发的云函数是一项无服务器计算服务，以函数的形式运行后端代码来响应事件以及调用其他服务。云函数支持多种编程语言，但是最为推荐的就是JavaScript，运行环境是Node.js。接下来介绍下云函数开发环境的配置以及云函数如何部署到云端。

2.云函数的部署

• 首先右键单击文件夹中的cloudfunctions,点击新建Node.js云函数，命名随意就好，自己记得就行。因为演示的是轮播图，我就取名为 get_swiper_data 。

• 在cloud.init中配置你的环境ID `const cloud = require('wx-server-sdk')

cloud.init({ env:"cloud1-6g491h4875f9dfab" })`

环境ID可以在云开发的概览中查看

• 云函数入口函数下面的代码可以清空，我们需要的是从云数据库中调取数据，并且将数据暴露出去，我们需要在云函数环境ID下面写上如下代码

return await db.collection("") 括号中的取决于你云数据库中的命名是什么。至此，云函数也就部署完成，

3.接收云函数取到的云数据库的数据

• 首先我们打开index中的index.js文件，在data中建立一个空数组用来存放轮播图数据。

• 然后在onLoad函数下面写函数来接收轮播图数据

建议先console.log输出下收到的结果，编译一下可以看到调试器中得到了轮播图数据

然后将得到的数据给之前建立的空数组

• 至此，我们就拿到了云函数从云数据库调取到的轮播图数据，接下来就是将图片数据渲染到我们的页面上了。

3.将得到的数据渲染到页面上

• 小程序为我们写轮播图提供了非常强大的组件，我们打开小程序开发文档

找到组件中的swiper示例代码（网址：developers.weixin.qq.com/miniprogram… ） ，我们CV就可以了

下面还有很多轮播图的属性可以根据你的需求自行选择，非常方便。

• 接下来我们需要循环数组并渲染了，轮播图的代码CV到index.wxml上之后，需要略改一下。

图片样式可以根据自己的要求自行修改。

4.数据渲染完成

至此，我们就将云数据库的数据用云函数调用取出来了并且渲染到了页面上。轮播图效果如下图。