基于云开发的微信小程序实战教程

Posted 2022-01-27 止喜

上篇文章中，简单介绍了下微信开发者工具是怎么去用的，还介绍了项目的基础目录结构，以及每个文件的作用，还配带了一些例子说明。最后还剩下cloudfunctions目录，也就是云开发的文件夹介绍。

本章主要内容：小程序云开发的基础目录结构，cloudfunctions目录介绍；编写云函数；云开发的调试。

一、小程序云开发的目录结构介绍

上篇文章「基于云开发的微信小程序实战教程（二）」中已经介绍了大部分文件夹的作用，还剩下 cloudfunctions 目录，放在这里继续介绍。

cloudfunctions目录介绍：

cloudfunctions是存放我们所有的云函数的地方，也就是相当于我们进行数据存储、进行数据添加、删除、修改等操作的地方。

从下图可以看到，我们下载的 demo 中目前有 4 个文件夹，每个文件夹其实现在可以理解为，一个文件夹对应一个云函数，也就是已经有了 4 个云函数的例子。（和我下图的不太一样也没关系，这只是官网给提供的例子，只是参考看一眼他们怎么写的，最终也用不到这几个例子中的代码）

有了云开发的功能，我们直接在这里通过云函数，进而完成对数据的管理，实现页面和数据的交互，完成一个完整的小程序（也就是所谓的后台，服务器，就不需要我们再去申请了，非常方便）

二、什么是云函数

云函数也是一个 js 文件，用来操作你小程序中存储下来的数据，并把结果抛出来。

比如删除一条数据，我们需要从前端界面点击删除按钮发起请求，调用到云函数去处理数据，找到该条数据并把它从删除，抛出删除成功，这样我们前端的页面上就可以知道「这条数据已经被我们删除了，存储数据的数据库中已经没有这条数据了」

还有一个云函数的好处是，因为云开发是基于微信提供的服务，所以能够直接访问到一些微信对外提供的一些方法，比如微信登录、分享朋友圈、等等我们直接就能够调用到

看个例子，打开login文件夹，可以看到有config.json，index.js，packge.json三个文件，下面分别来介绍一下。

index.js，云函数最主要的文件，里面需要写的就是我们的接口函数，也就是说，我们在这里对数据库存储的数据做处理（比如修改一条记录），处理完后再把最新的处理过的结果抛出返回。这样子我们前端页面交互调用到这个方法时，就能得到更新后的最新数据了。

看上面截图，我们随便打开一个login/index.js，看下大概代码怎么写的。以下是关键代码，为方便理解，我去掉了它原本的注释，加了自己的一些理解和解释。

忘记了怎么开通云服务的，可以去看文章一「基于云开发的微信小程序实战教程（一）」

// 这句是必须写的，固定格式。没有为啥，规定就是这样用的
const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init(
  env: cloud.DYNAMIC_CURRENT_ENV
  // 配置env的值，默认也不用改。
  // cloud.DYNAMIC_CURRENT_ENV 默认是当前所处的云环境，如果之前创建了多个云服务环境，就需要改。
  // 一般初学咱们也不会创建好几个，因为一个账号只能开通一个免费版的基础云服务环境。
)

/**
 * event，能够拿到前端传过来的数据，比如删除某条数据，从前端把这条数据的id传过来，使用event对象去拿到参数
 * context，一般用不到
 * 这个方法也是固定格式，按这个样子在里面写自己的逻辑就可以了
 */
exports.main = async (event, context) => 
  // 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）等信息
  // OPENID比较常用于校验身份
  // OPENID是用户的唯一身份标识，不管你改微信号、昵称、头像等等，这个值是不会变的，一个用户就一个值
  const wxContext = cloud.getWXContext()

  // 这里写你要做的逻辑，比如查询列表，调用到这里就是拿到存下来的数据，并把它 return 出去

  // 使用 return 把你需要返回给前端的数据返回，这样页面就能拿到你的处理结果了
  return 
    openid: wxContext.OPENID,
    message: "我从云函数把数据带回来了"
  

看到这里莫着急，具体怎么看出来这段代码写的对不对呢，在下面的「云函数调试」模块再去检验

config.json，配置文件，刚才提到我们可以用云函数很容易地调用到微信对外开放的一些API接口，但是你得按照它要求的格式来调用。这里的话，就是我们需要在config.json中声明一下，我要调用微信的xx方法了，然后在index.js中才能去用这个xx方法

pckage.json，配置第三方依赖库的，和config.json用法很像，不过这个更复杂一点，因为是想用别人的第三方的库，所以你得先把它下载下来。

啥时候需要用到一些插件库之类的，就在package.json的dependencies对象中加上该插件库名称和版本 ，然后需要用npm install安装一下，接下来在我们的云函数index.js最开头的位置require引入一下，就可以用了

这里提及到的安装，涉及到了npm install 插件名去安装，需要在电脑上安装一下node才能够使用，如果没安装node，请参考官网这里进行下载安装。

附下载地址：http://nodejs.cn/download/

三、创建云函数

大概了解了云函数的基础样子之后，我们尝试自己创建一个云函数。

在cloudfunctions目录的位置，单击鼠标右键，会弹出上图中的框，选择「新建 Node.js 云函数」，起个名字比如 test，敲下回车也就是按下enter键后，会自动生成一个云开发的函数文件夹。

看下自动生成的代码，你会发现，和第二点内容「二、什么是云函数」中介绍的云函数结构是一样的。

四、云函数的调试

用我们刚刚创建的云函数，来了解下如何进行云函数的调试。

选择需要调试的云函数文件夹目录位置，右键单击，会弹出如上图所示的框，选择「开启云函数本地调试」，会打开一个新的窗口，即云函数调试界面。

这时候你会发现有个新的弹框，提示你没有安装node modules模块，这也就是和我们刚才提到了package.json中的用到了依赖库需要下载安装的原因。

直接点击「确定」按钮，就会下载安装相关依赖。

下载需要时间，大概等待一会儿，你会发现原本只有3个文件的文件夹里多了一些东西。不过这些都是它自动生成的，都不用管，也不要去动它。

除了这种安装依赖项的方法，还有另一个安装依赖方式，也要顺带提一下。

还是右键单击云函数文件夹，选择「内置终端中打开」，在终端窗口输入命令npm install，等待安装完毕

安装完成后，现在再打开我们云函数本地调试窗口。

大概样子见下图，其中「输出区域」我这里输出了一些警告，你们的可能没有。这些不用太关注，只是让大家了解下大概样子。

右侧的「请求方式」分为两种，分别是模拟器触发和手动触发，我们先来看手动触发

1、手动触发
手动触发，需要我们手动点击右下角的「调用」按钮，完成云函数的调用。

经常会用到的是「请求参数」，在这里模拟前端页面传过来的数据，这样点击调用的时候，执行云函数就能在event对象中拿到你设置的值。

在代码里加入一句console.log(event)，我们在调用到该云函数的时候，把event对象打印出来，看看它的值是什么，有没有拿到我们设置的值。

为方便查看结果，单独截个大图，可以看到我们调用成功了，并且拿到了传过来的参数。

2、模拟器触发

模拟器触发，也就是我们通过从小程序页面的交互来完成云函数的调用。

我们直接用现有的例子来看一看是怎么用的，顺带着回顾一下之前的几个小知识点。

首先，如果没开启左侧的模拟器界面，先单击左上角的「模拟器」按钮，让模拟器窗口出来。

接下来，打开app.json，看下pages数组中第一个路径是什么，进而找到我们的第一个页面。

我这里默认第一个页面是pages/index/index，那我们首先就打开这个文件的index.wxml，用页面中第一个列表项做例子吧，也就是找到「点击获取openid」这个元素。

找到之后，根据bindtap="onGetOpenid"，代表着当你点击这块区域时，它就会触发onGetOpenid这个方法。那我们就去index.js中找到这个方法。

bindtap=“xx”，代表点击时会调用xx方法，也是固定语法。注意其中xx的名字是你自己取的方法名字，是可变的

简单的介绍下如何调用云函数，其实也是固定格式，直接看下方代码的例子。

wx.cloud.callFunction( 
      name: 'login', // 代表调用了哪个云函数
      data: , // 参数放这里传递，云函数会通过event对象拿到
      success: res => 
      	// res是调用云函数成功后，从云函数那里return的数据
        console.log('[云函数] [login] 调用成功'）
		// 调用成功可执行一些操作
      ,
      fail: err => 
      	// err是失败的原因
        console.error('[云函数] [login] 调用失败')
        // 调用失败可执行一些操作
      
    )

回到刚刚那一点，根据onGetOpenid方法的内容，可以看到它调用的云函数是login这个云函数，我们打开看一下

这个文件刚刚在最开始被我稍微修改了下，不过不影响，关键代码都是一样的。为了方便观察界面和云函数的交互效果，我再在云函数中加一句输出语句console.log(event)，将event对象即前端界面传过来的参数，打印出来。

接下来，鼠标右击，选择开启云函数本地调试，没有安装的先npm install一下，注意这里开启本地调试的是login这个云函数

接下来，点击页面中的「点击获取 openid」，查看云函数本地调试的情况。

放大看看，查看event的结果，发现是空的，因为我们调用的时候没传参数。

下面我们稍微修改下page/index/index.js文件中的onGetOpenid方法，调用云函数的时候传个参数看看效果。

在这里加上一个参数name: 123，并保存代码。如下图所示

再次点击，查看效果，已经可以拿到值了。

这篇文章中主要介绍了云开发相关的功能使用，以及云函数编写的基础知识点，包括如何进行调试，从前端页面到云函数的交互到这里就串联了起来。

基础知识到这里就差不多了，也有很多地方提到了之前的知识点，也有部分只讲了重要的功能。还是那句话，记不住没关系，但是一定大概要有个印象。

后面文章更新应该会更加偏向实践了，要去实践，不断的用到，在练习中会记住的更深刻~

相关文章
基于云开发的微信小程序实战教程（一）
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程（三）