欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序云开发-如何使用云函数

程序员文章站 2022-06-14 14:32:40
...

一、初始化三部曲

第一步:创建云目录

在根目录创建一个文件夹,名字随意
微信小程序云开发-如何使用云函数
创建出来后有些人就觉得奇怪了为什么文件夹的图标跟图上的为什么会不一样?
下面我就教你把它变成跟图上的一样

第二步:配置云目录

在project.config.json文件中添加一个cloudfunctionRoot的key,value写上刚刚创建的文件夹名
微信小程序云开发-如何使用云函数

第三步:初始化

1.在app.js中的onLaunch调用wx.cloud.init()方法
微信小程序云开发-如何使用云函数

  • env
* 填写你的环境ID,环境ID可以在云开发控制台-设置里面找到
  • traceUser
* 这个填true 具体是什么作用可以到微信开发文档里面去找
* 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/

二、新建云函数

选中刚刚创建的文件夹创建一个Node.js云函数 等待云函数上传完成
微信小程序云开发-如何使用云函数
展开会有三个文件,因为文章主要讲的如何使用云函数所以两个json文件我们先暂时不用去关注,展开js文件我们会发现会有一个main方法这个我就不多讲了相信大家都清楚 这个一个入口函数。
JS文件作用就类似php文件,做网站开发的应该都知道

三、调用云函数

我们在控制台打印一个简单运算吧,首先我给了页面一个按钮绑定了bindtap=“getData”,然后在页面的js文件中使用wx.cloud.callFunction()API调用云函数。

这是页面中JS的代码
微信小程序云开发-如何使用云函数
这是云函数的代码微信小程序云开发-如何使用云函数这是我运行之后的结果
微信小程序云开发-如何使用云函数
我们来解释一下各个图中的代码

首先是页面中js的 代码,我们都看到wx.cloud.callFunction()API中有一一些参数 我们一个一个来讲解

  • name:就是刚刚创建云函数名,
  • data:就是你要传递的数据,
  • success:就是成功回调的函数res里面包含了后台传回来的数据

然后我们再来想一个问题 怎么从云函数中获取页面传递的数据呢?我们再来讲解一下第二幅图的代码

main方法中一个event参数,event里面就包含了页面传递过来的数据
微信小程序云开发-如何使用云函数
[^1] 最近才开始写博客,写得不好请多多包容 谢谢!(●’◡’●)

相关标签: 前端 小程序