如何进行小程序云函数开发

以前的文章中,我们给大家介绍了小程序的基本使用,近期微信团队联合腾讯云合作开发了一项新的产品,不用服务器就可以在小程序端进行服务端开发。为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。

小程序·云开发是微信与腾讯云联合开发的原生 serverless 云服务,具备简化运维、高效鉴权等优势,让你零门槛快速上线小程序。

今天这篇文章中,我们将从0~1介绍小程序云开发的基本使用过程。同时,分享一个demo来体验云开发的优势。在教程开始之前,需要搭建搭建好小程序的基础开发环境,关于如何配置,大家可以参考如何入门小程序开发这篇文章的入门教程。

入门 - 新建云开发项目

首先,我们新建一个云开发的项目,注意AppID是你自己在小程序AppID,同时不要勾选建立云开发模版。

1548647154226

接下来,我们新建两个目录,一个目录(client)存放小程序的客户端,一个目录(server)存放小程序云开发的服务端,如图。

1548647274731

接下来,打开配置文件project.config.json,我们需要新增两行文件。

	"cloudfunctionRoot": "server/",
	"miniprogramRoot": "client/",

cloudfunctionRoot参数填写你新建的云开发服务器的文件目录,miniprogramRoot填写你小程序客户端的目录,如图。

1548647437788

当你的server文件夹图标变成了☁的样式,证明我们云开发环境就搭建完成了。

入门 - 新建云函数

我们先不写客户端,先谈谈云开发,云开发的优势是省去了服务器,在云端运行的代码,微信私有天然鉴权,开发者只需编写自身业务逻辑代码。小程序的客户端也提供了一些接口,可快速调用云函数,就如同在本地调用一样方便。

创建了第一个云开发小程序后,在使用云开发能力之前需要先开通云开发。在开发者工具工具栏左侧,点击 “云开发” 按钮即可开通云开发。云开发开通后自动获得一套云开发环境,各个环境相互隔离,每个环境都包含独立的数据库实例、存储空间、云函数配置等资源。每个环境都有唯一的环境 ID 标识,初始创建的环境自动成为默认环境。

1548647978889

我这边已经开通了小程序云开发,该页面是小程序云开发的控制台,通过该控制台,我们能查看小程序云开发的基本数据并进行管理。开通后,我们就可以新建云函数了,如图。

1548648158373

win新建一个名为add的云函数,这个名称很重要,后面在客户端调用的时候我们会用到。

1548648187930

入门 - 编写云函数

接下来,就可以编写云函数相关的代码了,我们打开server端add函数下的index.js文件夹。

1548648405057

然后粘贴下面的代码。

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

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const { a, b } = event
  const sum = a + b
  return {
    sum
  }
}

这里代码很简单,首先,我们引入wx-server-sdk云开发的node包文件,然后使用init()方法初始化云函数。之后,我们创建一个云函数入口exports.main,之后通过event方法去读取a,b两个文件,然后将其相加,最后返回改数据。

这里的代码意思是获取a,b两个数据,然后相加在返回给客户端。我们只需记住云开发最基本的函数格式就行,如下所示。

const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {

}

入门 - 云函数相关依赖安装

云函数服务端运行依赖wx-server-sdk包,所以运行前,我们一定要安装相关运行依赖文件才行。因为我们云开发服务端是NodeJS运行环境,安装wx-server-sdk包,首先要在本地搭建相关运行环境。

第一步、安装NodeJS环境

首先,我们打开NodeJS官网,下载NodeJS安装包。

1548650930323

下载完成后双击打开,并一路下一步安装即可。

1548650991772

安装完成后,打开命令提示符,试试node命令和npm命令是否正常。

1548651326941

看到如图所示的内容,证明你的nodenpm都已经安装成功了,接下来我们就可以安装相关依赖文件了。

第二步、安装依赖

在你新建的云函数上面单击右键,选择在终端中打开,如图。

1548651460838

然后执行下面的命令安装所需依赖文件。

npm install wx-server-sdk --save

如图所示,看到类似下图的内容,就证明依赖环境下载并安装完成了。

1548651669936

接下来,我们进行测试,看看我们的服务端代码是否能正常运行。

第三步 、测试云函数

还是打开上一步的终端,然后输入下面的代码。

node index.js
1548651911974

如果什么都没有输出,证明没有错误,可以正常运行。接下来,我们将整个项目上传到云函数中。

1548652001374

如图,我们在创建的云函数中右键,然后选择上传并部署:所有文件,等待系统上传后,我们云函数就部署完成了。

入门 - 部署客户端

参考如何入门小程序开发这篇文章的入门教程,我们在client目录下新建一个名为app.json的文件,并在文件中写下下面的代码。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "cloud": true
}

保存后,系统会自动生成pages文件夹,并生成index文件夹及其他相关文件,如图。

1548652237366

接下来,我们看看客户端如何调用云函数。小程序官方文档提供了云函数调用APIwx.cloud.callFunction(),废话不多说,我们先撰写最简单的一行代码演示下,打开客户端目录下的index.js文件,撰写下面的代码。

Page({
  onLoad() {
    wx.cloud.init({
      env: 'test-f97abe'
    })
    wx.cloud.callFunction({
      // 需调用的云函数名
      name: 'add',
      // 传给云函数的参数
      data: {
        a: 1,
        b: 2,
      },
      success(res) {
        console.log(res.result.sum)
      },
    })
  }
})

保存后,我们看到控制台已经输出了数字3

1548657293907

这里的代码意思是调用名为add的云函数,然后将数据ab数据传至云函数,之后如果云函数执行成功后,返回云函数所得到的数据。值得注意的是,代码运行前需要初始化云函数wx.cloud.init,并配置相关参数,具体详见官方文档,代码很简单,但是代码中namedata等参数到底是什么意思呢?我们来看看官方的文档中参数介绍。

参数

类型

必填

说明

name

String

云函数名

data

Object

传递给云函数的参数

config

Object

局部覆写 wx.cloud.init 中定义的全局配置

success

Function

返回云函数调用的返回结果

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

原来name后面是填写你云函数的相关名称,我们这里是adddata是传递给云函数的参数,我们这里填写ab两个参数,参数a=1b=2。最后看到如果云函数执行成功后,返回相关参数。

我们优化下代码,将返回的参数显示在前端。

index.wxml

<text>云函数返回数据{{sum_num}}</text>

index.js

Page({
  data: {
    sum_num: ''
  },
  onLoad() {
    var myThis = this
    wx.cloud.init({
      env: 'test-f97abe'
    })
    wx.cloud.callFunction({
      // 需调用的云函数名
      name: 'add',
      // 传给云函数的参数
      data: {
        a: 1,
        b: 2,
      },
      success(res) {
        console.log(res.result.sum)
        myThis.setData({
          sum_num: res.result.sum
        })
      },
    })
  }
})

如图,我们已经将后端的数据传送到前端展示。

1548657954913

总结

喜欢的小伙伴请持续关注本专栏。这篇教程我们介绍了小程序·云开发的基本使用,学会了吗?利用小程序云开发实现快速上线和迭代。欢迎免费使用!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券