微信小程序云开发操作全解

2023-11-07

云开发三大基础能力

  • 云函数:运行在微信服务器上的函数,处理微信相关操作有天然优势,如获得用户信息异常方便(以前服务端解析很麻烦)
  • 数据库:一个小程序可以直接操作的JSON数据库,可以直接操作数据库,不在需要服务端了。
  • 存储:用来存储文件和图片

阅读本文之前最好对微信小程序有基本的了解,这个能够更加方便理解,如果能有一点点数据库知识那就更好了

云函数(配置)

  第一步: project.config.json 中进行添加字段 "cloudfunctionRoot": "cloudfunctions/"  这个字段主要是为了指定存放云函数的文件夹 "cloudfunctions/" 

  第二步: app.json 中添加 "cloud": true 指定是云开发模式

  第三步: 添加云函数

  第四步:添加对应的函数后,会下载依赖,这一步玩过node及npm的都知道,就是下载依赖,现在下载的是微信小程序官方的sdk。。。

    等下载完成后,点开云开发控制台的云函数一栏就会发现函数名称已经有了test这个云函数了。。。具体看下图所示:

    这个test云函数就是我们刚刚添加的云函数,此时在开发者工具中打开test目录下的index.js文件,就可以进行返回我们需要返回的内容。。。如下:测试

    这里如果是利用了获取授权的按钮之后就会在return中返回用户登录后的openId和appId,所以我们就return默认的event对象以及context(上下文)对象。主要是为了看看小程序默认提供的对象包含了什么,我们可以用什么???

    保存完了,还不够因为这个云函数我们都说了是小程序提供的服务平台来运行我们做的类似于接口的函数,所以我们必须得上传(每一次的更改操作都要上传☞),具体看下图:

               等待上传完毕,在pages下index.wxml中需要做的是

<button open-type="getUserInfo" bindgetuserinfo="getUserInfgo">授权登录</button>

    由于获取授权需要配合点击后js的操作,所以在index.js中添加对应的getUserInfo的方法,并且注意这里的wx.cloud.callFunction方法,因为这是调用云函数的方法。

getUserInfo: function(e){
    wx.cloud.callFunction({
      name: "test",//这里填写云函数的名字
      data: {
        userInfo: e // 这里是把参数e直接传给test函数处理
      },
      success: res => {
        console.log(res) // 返回的文本如下图所示:
      },
      fail: err => {
        console.log(err)
      }
    })
  }

可以看到输出的信息中会返回用户的openId以及appId还有对应云函数认证的信息。。。具体的实际可以自行测试查看

数据库

     1.插入数据

//首先  要实例一个数据库对象

let db = wx.cloud.database();
db.collection('test').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败:', err)
      }
    })

这是利用添加数据的方法进行添加的数据,此时可以在云开发控制台看到对应得数据:下图

 

   2.删除数据

//删除数据:
const db = wx.cloud.database()
  removeData:function(){
    db.collection('test').doc(this.data._id).remove({
      success: res => {
        wx.showToast({
          title: '删除成功',
        })
        this.setData({
          counterId: '',
          count: null,
        })
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '删除失败',
        })
        console.error('[数据库] [删除记录] 失败:', err)
      }
    })

  },

    3.修改数据

//修改数据
  const db = wx.cloud.database()
 updateData:function(){
    const newCount = 1000
    db.collection('test').doc(this.data._id).update({
      data: {
        count: newCount
      },
      success: res => {
        console.log(res)
        this.setData({
          count: newCount
        })
        wx.showToast({
          title: '修改记录成功',
        })
      },
      fail: err => {
        icon: 'none',
          console.error('[数据库] [更新记录] 失败:', err)
      }
    })    
  },

    4.查询数据

//查询数据
  const db = wx.cloud.database()
  getData:function(){
    db.collection('test').where({
      _openid: this.data.openid
    }).get({
      success: res => {
        this.setData({
          queryResult: JSON.stringify(res.data, null, 2)
        })
        console.log('[数据库] [查询记录] 成功: ', res)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败:', err)
      }
    })


  }

在数据库操作之前需要利用云函数login获取对应的openId, 获取方法请细看上方云函数test部分。。。

 存储

     上传图片

// 上传图片
  doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '上传中',
        })

        const filePath = res.tempFilePaths[0]
        
        // 上传图片
        const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上传文件] 成功:', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            
            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上传文件] 失败:', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => {
            wx.hideLoading()
            
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },

上传成功后在控制台查看下图

 

云开发已经基本上完成,当然云存储也可以存储json文件,然后请求静态数据~~~看自己的需要了。

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序云开发操作全解 的相关文章

  • UE基础使用

    一 打包 二 显示FPS 三 坐标系 四 第三人称模式 四 筛选物体 五 物体对其到地面 六 UE加载窗口默认布局 七 关闭磁力吸附 关闭后可以自由移动 八 属性变为默认值 九 快速聚焦到物体 按F键或者双击 十 按shift键拖拽坐标轴
  • 机械革命 键盘灯 linux,机械革命x6Ti安装ubuntu(100%成功)

    这个教程是本人亲自试验成功的 方案为ssd不变 ubuntu装在机械硬盘 步骤 1 在电脑的机械硬盘中压缩出一个大小为200G的空间 无论哪个盘 你按自己的需求压缩大小 2 在官网下载系统镜像 解压到U盘中 由于这款电脑的主板新 所以直接解
  • SpringBoot-Thymeleaf-MySQL-SpringMVC实现网页端的数据库信息的增删改查(JavaEE巨详细版)

    Hello 欢迎来到我的博客 既然选择了远方 便只顾风雨兼程 源码已上传资源 0积分获取 觉得有用的点个赞嘛 源码点击这里 上一篇 博客只实现了数据库信息的网页端展示 本篇博客我们来更详细的写一下学生信息管理系统的网页端跳转版增删改查 ht
  • 计算机网络 day8 动态路由 - NAT - SNAT实验 - VMware的网卡的3种模式

    目录 动态路由 IGP 和 EGP 参考网课 4 6 1 路由选择协议概述 哔哩哔哩 bilibili 编辑 IGP Interior Gateway Protocol 内部网关协议 EGP Interior Gateway Protoco
  • 子类实例化对象的全过程

    子类实例化对象的全过程 我们只造了一个对象dog 但是dog的构造器直接或间接的调用了直接父类或间接父类的构造器来加载他们的属性和方法 子类对象实例化全过程图示 从结果上来看 继承性 子类继承父类以后就获取了父类中声明的属性和方法 创建子类
  • 信息隐藏——DCT隐写

    DCT隐写 实验目的 了解DCT的系数隐写 实验内容 Jepg 压缩算法的回顾 用MATLAB实现图像DCT相关操作 完成基于图像DCT的信息隐藏实验 两点法的嵌入和提取 三点法的嵌入和提取 1 Jpeg压缩算法 一 色彩空间转换 RGB空

随机推荐

  • 学习日记--8.5--linux初装

    1 用xmms播放mp3 首先linux自带的xmms缺少一个插件 可以先下载并且安装 xmms mpg123 1 2 7 13 i386 rpm 但是如此之后可能还不可以使用 播放一秒就死住 这时候 在xmms 运行后之上点击 右键 gt
  • FreeAnchor:令anchor自由匹配标签的策略

    前言 本文将要介绍一种为训练样本分配标签的策略 这种策略称作 FreeAnchor 注意不是 anchor free 哦 FreeAnchor 是用于 anchor based 体系下的策略 那么它到底free在哪里呢 anchor还能玩起
  • TOP命令参数详解

    TOP命令详解 一 top命令介绍 相信每个运维人员都遇到过的事情就是服务器的负载突然飙升 碰到这种情况 大家第一反应一定是登到服务器上 先敲一个top命令看看load average吧 在Linux操作系统中 top是使用最频繁 也是信息
  • vue改变数组的值,样式控制没变化

    目录 问题背景 解决方案 第一种 使用this set target index value 第二种 this forceUpdate 参考 问题背景 我用0 1 控制隐藏还是显示 因为有多个所以用的数组 如下代码 省略 data retu
  • MATLAB怎么使用table格式读取csv文件并画图

    MATLAB中新增了一个table类型 可以很方便的读取文件中的数据 在使用这个格式的时候会默认把读取文件的第一行设置为标题 访问的时候需要通过索引值进行访问 具体怎么操作通过一个MATLAB例子进行说明 MATLAB代码 T readta
  • c 语言怎么释放链表节点,C:如何释放链表中的节点?

    我如何释放在另一个函数中分配的节点 struct node int data struct node next struct node buildList struct node head NULL struct node second N
  • 揭开数学智慧的神秘面纱:MathGPTPro使用指南带你领略数学的魅力!

    请查收一份MathGPTPro的使用指南 欢迎大家进入我们的MathGPTPro群 我们产品的链接在这 https mathgptpro com 欢迎大家踊跃提问 大家可以文字或者图片 也支持手写图片 输入问题 遇到回答中不解的问题 公式
  • MYSQL学习笔记(二)——数据库和数据表操作

    MYSQL数据库学习笔记 二 目录 MYSQL数据库学习笔记 二 一 MYSQL数据库操作 一 创建数据库 二 指定当前数据库 三 修改数据库 四 删除数据库 二 数据表操作 一 创建数据表 二 复制现成的表 三 修改数据表 1 add实例
  • 关于电脑丢失msvcr120.dll的几个修复方法

    MSVCR120 dll它是Windows系统运行某些程序所需的文件之一 如果你在运行某个程序时遇到了MSVCR120 dll丢失的错误 那么你不能简单地忽略它 因为这可能会导致程序无法正常运行 在本篇文章中 我们将为大家介绍一些解决MSV
  • MySQL高效编程学习笔记(五)--表的维护和改造

    修改表的列结构 若表中有数据最好先备份 注意转换前后的字符长度 以及是否可以互相转换等问题 改变列数据类型 ALTER TABLE visitor MODIFY nam VARCHAR 30 Eg alter table goods mod
  • 用Node.js实现一个HTTP服务器程序(文件服务器)

    http Node js开发的目的就是为了用JavaScript编写Web服务器程序 因为JavaScript实际上已经统治了浏览器端的脚本 其优势就是有世界上数量最多的前端开发人员 如果已经掌握了JavaScript前端开发 再学习一下如
  • 基于java的Mock利器-Mockito

    1 认识Mockito Mockito是java单元测试中使用率最高的Mock框架之一 特点 简明的语法和完整的文档 Mockito支持永Maven和Gradle来进行依赖引入和管理 2 Mockito Maven引入
  • 记一次Redis配置database不生效的问题

    1 先贴代码 乍一看 这个配置没问题 redis也在spring下 springboot 的 Configuration 也会默认加载redis的配置 但是一开始怎么调试都不能默认数据库为1的情况 后来我在Redis配置中发现了另一个好东东
  • Linux下重要文件不小心被删除?别着急,看这里!

    针对日常维护操作 难免会出现文件误删除的操作 大家熟知linux文件系统不同win有回收站 删除后的文件可以到垃圾箱寻回 要知道linux文件修复比较费劲 网络上面的文档也是五花八门 所以本次研究一种比较靠谱的文件和目录恢复方法 也给维护人
  • leedcode 1254. 统计封闭岛屿的数目

    题目 二维矩阵 grid 由 0 土地 和 1 水 组成 岛是由最大的4个方向连通的 0 组成的群 封闭岛是一个 完全 由1包围 左 上 右 下 的岛 思路 封闭岛屿是由1完全包围的岛 也就是说 该岛屿不能在二维矩阵的边界处 这种情况排出后
  • C语言编程中遇到Warning提示的解决方法:warning:implicit declaration of function ‘XXX‘,conflicting types for ‘XXX’

    目录 原因 解决办法 总结 在用codeblocks编写C语言代码时遇到了一个错误 implicit declaration of function XXX conflicting types for XXX 这里的 XXX 代表的是我自己
  • 案例实践:Shell定时上传文件至HDFS

    目录 一 项目需求 二 实现思路 三 具体实现流程 1 规划文件目录 2 开发shell脚本 3 给shell脚本授权 4 定时执行Shell脚本 5 查看HDFS历史访问日志 一 项目需求 公司在线服务器每天都会产生网站运行日志 为了避免
  • 机器学习_深度学习毕设题目汇总——目标检测B

    下面是该类的一些题目 题目 典型恶劣天气条件下高铁周界入侵目标检测 图模型融合时空特征的视觉显著性目标检测算法研究 基于SAR图像的舰船目标检测方法研究 基于三维点云分析的智能汽车目标检测方法研究 基于传播模型的显著目标检测方法研究 基于全
  • 如何在Ubuntu服务器上安装 QEMU/KVM 以创建虚拟机

    KVM是 Kernel based Virtual Machine 的缩写 是集成到 Linux 内核中的开源类型 1 虚拟机管理程序 裸机虚拟机管理程序 它允许您创建和管理运行 Windows Linux 或 UNIX 变体 如 Free
  • 微信小程序云开发操作全解

    云开发三大基础能力 云函数 运行在微信服务器上的函数 处理微信相关操作有天然优势 如获得用户信息异常方便 以前服务端解析很麻烦 数据库 一个小程序可以直接操作的JSON数据库 可以直接操作数据库 不在需要服务端了 存储 用来存储文件和图片