高仿瑞幸小程序 08 创建第一个云函数

通过云函数，我们将拥有编写服务端代码的能力。我们可以在服务端执行一些逻辑，可以上传图片，可以调用其他网络服务的 api，可以对数据库进行操作。重要的是，云函数的编写相当简洁，便利。

在这一节，我们将通过云函数获取“为你推荐”的产品数据，实现数据动态化。实现这一功能，我们需要学习以下三块内容：

1 创建第一个云函数

2 调用云函数

3 学会绑定点击事件

一 创建第一个云函数

如何创建云函数呢？我们这里通过“微信开发者工具”来完成云函数的创建和代码编写。

首先，我们右键单击“cloudfunctions”，选择“新建 Node.js 云函数” 

写上我们的函数名“client_home_get_best”，这时候，工具会为我们创建一个同名文件夹，文件夹下面有一些文件，如下图： 

接下来我们要做的是安装 wx-server-sdk 依赖，怎么做呢？右键点击新建的云函数文件夹，选择“在终端打开”。

在打开的终端中输入“npm install --save wx-server-sdk@latest” 敲下回车并等待依赖下载完成。如下图：

当安装完依赖后，我们的云函数文件夹也起了变化。多了 node_modules 文件夹和 package-lock.json 文件。

对于目前的我们来讲，只有 index.js 文件是最重要的，之后我们会在这个 js 文件中编写我们的代码。先来看看工具默认都生成了什么代码：

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

从上往下解读代码，先是引入了 wx-server-sdk，接着进行了初始化了。

诚如注释所述，我们的主要工作就是在“云函数入口函数”内编写代码。我们要写什么代码呢？我们要在这里返回“为你推荐”模块的数据，在这一节，我们只返回 4 个产品。在下一节，我们会结合数据库，从产品数据库中随机抽取 4 个返回。

Ok，在具体编码之前，我想先对返回的数据做一个约定。

我需要 status 字段来告诉客户端，获取数据是成功了（success）还是失败了（fail）。

我需要一个 msg 字段来返回一些信息，虽然，这次用不着，但是我还是想先做好约定。

我还需要一个 data 字段来返回推荐产品的数据。所以返回数据的格式应该像下面这个样子。

return {
    status: status,
    msg: msg,
    data: data,
}

我们还需要做的是，把推荐的产品数据赋值给 data。

那么，云函数入口函数的完整代码就该是这样：

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const status = "success"
  const msg = ""
  const data = [{
      name: "拿铁",
      oPrice: 24,
      nPrice: 12,
      thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/88F34543128D-1.jpeg"
    },
    {
      name: "提拉米苏爱摩卡",
      oPrice: 19,
      nPrice: 28,
      thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/7B69340506EC-1.jpeg"
    },
    {
      name: "陨石拿铁",
      oPrice: 28,
      nPrice: 16.8,
      thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/82B1B9FDDB21-1.jpeg"
    },
    {
      name: "榛果拿铁",
      oPrice: 28,
      nPrice: 16.8,
      thum: "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/menu/thum/FBD8B7AADBD9-1.jpeg"
    }
  ]
  return {
    status: status,
    msg: msg,
    data: data,
  }
}

当我们写完云函数之后，我们需要把云函数上传到云开发的服务器上。怎么做呢？其实也很简单，我们只需要右键单击云函数的文件夹，选择“上传并部署：云端安装依赖（不上传 node_modules）”

至此我们就完成了云函数的编写，接下来我们需要对云函数进行调用。

二 调用云函数

在小程序中，调用云函数是一件非常简单的事。我们只需要用过 wx.cloud.callFunction 即可。同时，小程序对云函数的调用是支持 Promise 风格的。什么是 Promise？这对于 js 来说是个神器啊。我们有没有必要讲一下 Promise，是有必要呢？还是有必要呢？

我们还是简单说一下 Promise 吧。简单的说，就是用来处理异步回调的神器。像获取网络数据就是一个典型的异步操作。对于我们来讲，只需要熟练使用.then()和.catch()就好。

现在，让我们回到云函数的回调上来。我们回想一下，什么时候会去调用云函数？1 是界面初始化的时候，还有就是“换一批”和“刷新”图标被点击的时候。所以我们需要把调用云函数的代码写成一个函数：

onGetBest

这个函数我们写在 methods 块内。

/**
* 组件的方法列表
*/
methods: {
onGetBest:function(){
  wx.cloud.callFunction({
    name:"client_home_get_best"
  }).then(res=>{
    if (res.result.status == "success" &&res.result.data){
      this.setData({
        products:res.result.data
      })
    }
  }).catch(err=>{
    console.log(err)
  })
}
},

我们需要注意，在什么地方传入 name 的属性，也就是我们云函数的函数名“client_home_get_best”。

我们在 then 中接收云函数返回的数据。我们在云函数中返回的数据，都保存在 res.result 中。想想我们都返回了什么？status，msg 和 data。在这里，我们将以 status 是否为“success”和 data 是否存在为依据，来判断是否要更新“为你推荐”的数据。

调用云函数的函数就写完了，如果我有什么没讲清楚的，可以留言给我。

因为我们在界面初始化的时候，会调用一次云函数。所以我们要把 onGetBest 函数在 attached 中调用一次。接下来，我们要绑定点击事件。

三 绑定点击事件

在小程序的组件中，我们可以通过 bindtap 来绑定点击事件

bindtap=“onGetBest"

在这个界面中，我们要在两个组件上绑定点击事件，1 是“换一批”文字，2 是刷新图标，代码如下：

<view class="change" bindtap="onGetBest">换一批</view>
<van-icon color="gray" size="28rpx" name="replay" bindtap=“onGetBest"/>

是不是很简单？

我们再来做一个简单的处理是用户体验更好一些。是什么处理呢？就是当我们接受到数据后，我们再来显示“为你推荐”模块。怎么做到呢？我们可以通过 wx:if 来实现。怎么实现呢？通过判断绑定的数据 products 数组来判断，只有当 products 数组元素大于 0 时，才显示“为你推荐”模块。代码如下：

<view class="mid_menu" wx:if=“{{products.length>0}}">

完整代码我放在了 github 上，地址是：

https://github.com/gogoswift/luckin

这个系列的文章列表

我所想的跨平台开发：小程序 +App+Web

高仿瑞幸小程序 00 准备工作

高仿瑞幸小程序 01 初建项目，引入 Vant Weapp

高仿瑞幸小程序 02 创建 Tabbar

高仿瑞幸小程序 03 创建轮播图

高仿瑞幸小程序 04 小程序的全局数据

高仿瑞幸小程序 05 更正轮播组件的高度计算

高仿瑞幸小程序 06 layout 布局

高仿瑞幸小程序 07 为你推荐模块

高仿瑞幸小程序 08 创建第一个云函数