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

用户头像
曾伟@喵先森
关注
发布于: 2020 年 05 月 14 日
高仿瑞幸小程序 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 创建第一个云函数



发布于: 2020 年 05 月 14 日 阅读数: 797
用户头像

曾伟@喵先森

关注

与码共舞 2018.03.26 加入

我在浪尖浪,哪管它是前浪还是后浪。

评论 (3 条评论)

发布
用户头像
感谢持续分享干货,InfoQ官网首页推荐。
2020 年 05 月 14 日 15:14
回复
用户头像
您的文章我们审核后没问题会通过的,不用重复发布的
2020 年 05 月 14 日 10:13
回复
用户头像
您好,看到您的反馈了,我们的文章内容如果涉及敏感词或者其他风险,会被风控拦一下,再人工审核发布,风控比较严格,不好意思给您带来不便了, 你可以加我微信沟通,微信号:infoqwrier
2020 年 05 月 14 日 10:09
回复
没有更多了
高仿瑞幸小程序 08 创建第一个云函数