文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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)}
}

实现效果:

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯