发新帖本帖赏金 30.00元(功能说明)我要提问
返回列表

小白学习小程序 | 从0开始使用云函数(14)

[复制链接]
1260|1
手机看帖
扫描二维码
随时随地手机跟帖
单片小菜|  楼主 | 2022-4-29 14:52 | 显示全部楼层 |阅读模式
#申请原创#@21小跑堂

标题.png

引:

      云函数是一段运行在云端的代码,不需要管理服务器,在开发工具内进行编写、可以一键上传部署即可​运行后端代码。

      小程序内提供了专门用于云函数调用的API接口,方便程序开发者获取用户的openID、appid​、进行支付功能的搭建。

      “云计算”是大趋势,这样可以减少客户端的容量​,所有的计算的环节都在云端实现了。

      不需要不断的修改用户的权限,当然也会遇到很多莫名其妙的问题,​有了问题,就需要不断的总结问题,并进行解决问题。


87636626b79e3a3e09.png

一、建立工程并清空冗余代码

      首先建立工程​,打开小程序,按照下图进行选择。


68240626b7a6150059.png

      AppID是必不可少的,需要勾选微信云开发选项,这步是使用云函数的关键如果不勾选,后续开发的时候,会缺少​部署的选项。


75967626b7b412153b.png

      老刘在选用模板的时候,没有找到空白的模板,只能使用小程序的基础模板进行开发,这里面有很多我们是使用不到的,需要将里面的代码进行删减和修改,才能够​为我们自己的项目所用。

      大家可以看到界面上是云开发的一个示例,当然可以仔细的查看里面代码的功能。我们先​进行裁剪。

51196626b7c104c28c.png


      我们可以看到quickstartFunctions文件夹我们暂时用不到components文件夹也可以删掉,同时删掉images文件夹​。进行删减之后,资源管理器中的文件夹如下图所示。


8452626b7cadf3c5c.png

      同时删除pages文件夹下面不用的子目录​。仅仅保留index​文件夹。

88256626b7ceecf3c8.png

      代码部分的删减和修改操作​。进行index.js文件的代码删除,只保留const...部分,并键入page,会自动弹出​建议代码。

89757626b7e10553f5.png


      回车之后,系统自动补全代码​如下:

16739626b7e576ad47.png

      index.json中删除


"cloud-tip-modal": "/components/cloudTipModal/index"


      index.wxml删除所有代码

49371626b7f1bc8340.png

      app.js文件中需要打开注释的部分,这部分需要填写自己的id,这部分不填写的话,后续​会出现很多莫名其妙的问题。


36189626b7fa32fef1.png


      app.json文件中​删除不用的文件夹目录,保留index文件夹的索引。同时删除windows部分。


6135626b80244890f.png

      我们进行编译之后,没有错误,同时查看模拟器上的界面为空​。​一个清爽的工程删减、修改完毕。

53402626b80afda397.png

二、云函数的创建

      我们开始创建云函数​。鼠标右键cloudfunctions文件夹,弹出菜单中选择新建Node.js云函数​。


86735626b817672ca9.png

      我们先看看云开发控制台中,云函数为空。

68041626b8232479ec.png

      我们在新建的Node.js文件夹起名为add,建立一个sum的云函数。

86116626b82901107f.png

      打开index.js文件,可以看见右侧的代码显示窗口中,已经写好了框架,我们将框架的内容进行丰富即可。

9635626b82f449dfb.png

      更改为如下求和代码:


let {a,b} = event              //将a,b放到事件里面
  let sum = a  + b                  //进行求和
  return {
    sum                          //返回求和
      鼠标右键add文件夹,选择“上传并部署:云端安装依赖(不上传node_modules)”


71600626b8415edc08.png

      我们查看一下云端情况。我们会发现add函数已经上传到了云端,并且已经部署完成。

15083626b84cf1f3e1.png

三、云函数的使用

      使用云函数,需要用到callFunction函数,我们在onLoad函数中进行使用。增加以下代码:

wx.cloud.callFunction({
        name:'add',
        data:{
        a:21,
        b:19
      },
      success:res=>{
          console.log(res.result.sum)
          this.setData({
          b:res.result.sum
        })
      },
    })
      其中name后面,是我们云函数的名字,我们刚刚起名是add函数,填写add即可。

      同时我们想在界面上查看b的数值,那么需要在data中定义b,不然在index.wxml文件中无法调用。

      只需要在index.wxml文件中写入如下代码即可查看a和b相加的数据。

<text>{{b}}</text>
      运行之后,查看界面上是不是等于40.我们会发现模拟器中和控制台都输出了40.


40646626b876fdbc92.png

结:

      云函数调用不成功的原因,可能有以下几点:


1. 环境ID设置不对,有很多环境ID,没有选择正确造成的。
2. 云函数本身书写有问题,例如上面的例子中


let {a,b} =event
     写成了
let(a,b)=event
也会出现调用错误。
3. 云函数写完之后,没有进行上传和部署,云端根本就不存在add的函数,当然就无法进行使用了。

使用特权

评论回复

打赏榜单

21小跑堂 打赏了 30.00 元 2022-04-29
理由:恭喜通过原创文章审核!请多多加油哦!

评论
21小跑堂 2022-4-29 15:28 回复TA
思路清晰,过程详细,一步步手把手创建云函数,对于初次接触并体验的小白特别适合,属于基础教程。期待分享更多关于硬件方面的原创哦~ 

相关帖子

发新帖 本帖赏金 30.00元(功能说明)我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则