广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序开发之云函数的使用教程详解
  • 469
分享到

小程序开发之云函数的使用教程详解

2024-04-02 19:04:59 469人浏览 安东尼
摘要

目录1、云函数1.1 云函数api和云函数创建2、云函数案例1、云函数 云函数是部署在云端的函数,他和小程序本地的函数存在很大的区别,云函数应用涉及云端云函数定义和本地引用云端云函数

1、云函数

云函数是部署在云端的函数,他和小程序本地的函数存在很大的区别,云函数应用涉及云端云函数定义和本地引用云端云函数的API接口两个问题。

1.1 云函数API和云函数创建

1.1.1 小程序云函数API接口

小程序云函数API接口是指小程序调用云端函数的接口,(和wx.request()类似)。小程序提供了wx.cloud.callFunction()接口作为云函数API接口,它的属性如表所示。

属性类型默认值必填说明
namestring 云函数名
dataObject 传递给云函数的参数,在云函数中可通过 event 参数获取
configObject 配置
successFunction 返回云函数调用的返回结果
failFunction 接口调用失败的回调函数
completeFunction 接口调用结束的回调函数(调用成功、失败都会执行)

官网示例代码:

假设已有一个云函数 add:

exports.add = async (event, context, cb) => {
  return event.x + event.y
}

在小程序端发起对云函数 add 的调用:

wx.cloud.callFunction({
  // 要调用的云函数名称
  name: 'add',
  // 传递给云函数的event参数
  data: {
    x: 1,
    y: 2,
  }
}).then(res => {
  // output: res.result === 3
}).catch(err => {
  // handle error
})

1.1.2 云函数的创建

创建云函数的方法是右击项目中的cloudfunctions文件夹,如下图所示,选择“新建node.js云函数”选项,开发工具会自动生成一个文件夹,在文本框中输入的文件夹即是云函数名。

创建好之后的界面:

在创建好云函数之后,即可根据自己的需要在main函数中编写自己的代码。使用回车结束云函数的创建还有一个好处是可以不用上传和部署云函数,系统会自动上传和部署函数到云端,即云函数对应的文件夹图标会自动变成云朵摸样。

2、云函数案例

本例分别采用云函数和本地函数实现加法操作和剑法操作,请对比区别。

firstcloudfunction.wxml:

<view class="data"><input placeholder="请输入a" focus="true" bindinput="binda"></input></view>
<view class="data"><input placeholder="请输入b" focus="true" bindinput="bindb"></input></view>
<view class="partition"></view>
<view class="arithmetic"><view bindtap='add'><button size="mini" class='bt' >+</button></view><view>{{add}}</view></view>
<view class="arithmetic"><view  bindtap='sub'><button size="mini" class='bt' >-</button></view><view>{{sub}}</view></view>

firstcloudfunction.js:

const app = getApp()
Page({
  data: {
    a:1,
    b:1,
   add:'',
   sub:''
  },

  onLoad: function() {
    
  },

binda:function(e){
 this.setData({
   a: e.detail.value
 })
    console.log(e.detail.value)
  },

  bindb: function (e) {
    this.setData({
      b: e.detail.value
    })
    console.log(e.detail.value)
  },

  add:function(e){
    var that=this;
    wx.cloud.callFunction({
      // 云函数名称
      name: 'add',
      // 传给云函数的参数
      data: {
        a: that.data.a,
        b: that.data.b,
      },
      success: function (res) {
        console.log(res.result.add) 
        var c = res.result.add
        that.setData({
          add: "a+b=" + c
        })
      },
      fail: console.error
    })
  },

  sub: function (e) {
    var c = Number(this.data.a) - Number(this.data.b)
    console.log(c)
    this.setData({
      sub: "a-b=" + c
    })
  }
})

代码讲解:binda和bindb两个点击函数从firstcloudfunction.wxml文件中获取用户输入的两个操作数a和b,减法函数sub是普通的本地javascript函数,而加法函数add则采用了wx.cloud.callFunction()接口调用云函数add。本例重点是云函数的创建和部署。

云函数add/index.js的代码如下:

exports.main = async (event, context) => {
return{add:Number(event.a)+Number(event.b)}
}

实现效果:

以上就是小程序开发之云函数的使用教程详解的详细内容,更多关于小程序云函数的资料请关注编程网其它相关文章!

--结束END--

本文标题: 小程序开发之云函数的使用教程详解

本文链接: https://www.lsjlt.com/news/143679.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作