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

目录
  • 1、云函数
    • 1.1 云函数API和云函数创建
  • 2、云函数案例

1、云函数

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

1.1 云函数API和云函数创建

1.1.1 小程序云函数API接口

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

属性 类型 默认值 必填 说明
name string   云函数名
data Object   传递给云函数的参数,在云函数中可通过 event 参数获取
config Object   配置
success Function   返回云函数调用的返回结果
fail Function   接口调用失败的回调函数
complete Function   接口调用结束的回调函数(调用成功、失败都会执行)

官网示例代码:

假设已有一个云函数 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)}
}

实现效果:

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

(0)

相关推荐

  • 微信小程序云开发如何使用云函数生成二维码

    本文实例为大家分享了微信小程序云开发使用云函数生成二维码的具体代码,供大家参考,具体内容如下 首先,需要给对应的云函数安装 request-promise 依赖.(不会给云函数安装依赖的盆友请移步 微信小程序中的云开发如何使用npm安装依赖) 生成二维码的云函数如下: // 云函数入口文件 const cloud = require('wx-server-sdk') const rp = require('request-promise') cloud.init() // 云函数入口函数 exp

  • 详解如何使用微信小程序云函数发送短信验证码

    其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,SDK下载: http://smsow.zhenzikj.com/doc/sdk.html 1.安装 下载后的SDK在cloudfunctions文件夹下会包含3个云函数文件夹,如下: 由于目前IDE没有云函数导入功能,您需要手工创建同名的云函数,然后将云函数下的文件手工拷进去 注:下载的SDK是一个

  • 微信小程序云开发之云函数详解

    在上一章我们已经配好了环境,这章我们按照模板的顺序去执行提供的案例,对官方文档进行一个实践操作. 首先我们点击"点击获取 openid "文字,发现控制台报错: 云函数 调用失败 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail requestID , cloud function service error code -504001, error messa

  • 微信小程序云开发之使用云函数

    在之前的几篇文章里面介绍了下云开发中的云数据库.云存储: 微信小程序如何使用云开发 微信小程序之使用云存储 微信小程序之使用云数据库 接下来的这篇文章主要介绍下云函数,介绍这个云函数的主要用途是因为要解决从云数据库查询数据最多显示20条的限制,而使用到云函数可以解决这种限制,使用云函数可以将最大限制改为100条,继而达到我们需要的效果. [步骤] 简单说一下我们如何创建云函数,如下所示 >我们右击cloudfunctions出现如下图所示,点击新建Node.js函数即可 >创建好云函数后我们需

  • 小程序云开发教程如何使用云函数实现点赞功能

    本文我们就要使用高大上的云函数了,实现点赞功能 什么是云函数? 云函数 云函数即在云端(服务器端)运行的函数. 在物理设计上,一个云函数可由多个文件组成,占用一定量的CPU 内存等计算资源:各云函数完全独立:可分别部署在不同的地区. - 当云函数被小程序端调用时,定义的代码会被放在Node.js 运行环境中执行. 新建的项目中其实有云函数的示例可以参考. 首先,我们在cloudfunctions 文件夹右键,新建一个nodeJs云函数, 然后命名为vote, 点击回车,等一会它会弹窗,告诉我们要

  • uni-app使用微信小程序云函数的步骤示例

    创建云函数目录 首先,我们需要在uni-app项目文件夹下,创建一个云函数目录,路径随意,我这里是functions.然后先随便在里面放一些文件,这里以new_file.css为例.(放文件的原因是:确保编译成小程序后cloudfunctions文件夹存在.如果该文件夹下没有文件,默认是不会在微信小程序开发平台中显示该文件夹的.) 修改manifest.json 在uni-app根目录下,修改manifest.json中的微信小程序项,结构如下 "mp-weixin" : { /* 小

  • 微信小程序利用云函数获取手机号码

    小程序获取手机号码方式 一.取到加密数据,然后提交到服务器解密, 二.获取到 cloudID,用云函数, 优点:直接获取原始数据,节省服务器资源 1.xml <button class="gettel" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 快捷获取</button> 2. 点击按钮调用云函数,将cloudID传给云函数 getPho

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

    目录 1.云函数 1.1 云函数API和云函数创建 2.云函数案例 1.云函数 云函数是部署在云端的函数,他和小程序本地的函数存在很大的区别,云函数应用涉及云端云函数定义和本地引用云端云函数的API接口两个问题. 1.1 云函数API和云函数创建 1.1.1 小程序云函数API接口 小程序云函数API接口是指小程序调用云端函数的接口,(和wx.request()类似).小程序提供了wx.cloud.callFunction()接口作为云函数API接口,它的属性如表所示. 属性 类型 默认值 必填

  • 微信小程序开发中var that =this的用法详解

    在微信小程序开发中,var that =this的声明很常见.举个例子,代码如下! 示例代码1 //index.js Page({ data: { toastHidden: true, }, loadData: function () { var that = this//这里声明了that:将this存在that里面 wx.request({ url: 'test.php', data: {a: 'a', b: 'b'}, header: { 'content-type': 'applicat

  • 微信小程序 消息推送php服务器验证实例详解

    微信小程序 消息推送php服务器验证实例详解 微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名 比如:

  • 微信小程序实现页面导航与传参功能详解

    目录 一.页面导航 概述 分类 声明式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 编程式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 导航传参 声明式导航传参 编程式导航传参 一.页面导航 概述 顾名思义,页面导航指的是页面之间的相互跳转, 而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数. 分类 声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转 编程式导航:通过调用小程序专门的导航API,实现页

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • SpringBoot+微信小程序实现文件上传与下载功能详解

    目录 1.文件上传 1.1 后端部分 1.2 小程序前端部分 1.3 实现效果 2.文件下载 2.1 后端部分 2.2 小程序前端部分 2.3 实现效果 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 <!--文件上传与下载相关的依赖--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fil

  • 微信小程序全屏滚动字幕的实现方法详解

    目录 一.实现背景 二.实现代码 三.滚动速度 四.后续优化 实现效果 一.实现背景 无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果 二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • 微信小程序本地缓存数据增删改查实例详解

    微信小程序本地缓存数据增删改查实例详解 数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeSt

随机推荐