小程序云开发入门

2023-05-16

文章目录

  • 前言
  • 一、开通云开发
  • 二、使用云开发
    • 1.直接创建云开发项目
    • 2.修改配置文件引入云开发
  • 三、云数据库
    • 1.介绍
    • 2.使用
  • 四、云函数
    • 1.介绍
    • 2.使用
  • 五、云存储
    • 1.介绍
    • 2.使用
  • 总结


前言

一个小程序在开发时,除了考虑界面功能逻辑外,还需要后端的数据支持。而为了获得后端的数据支持,开发者需要提前考虑服务器、存储和数据库等需求,并且会花费时间精力在部署应用、依赖上。因此官方为了实现小程序的快速上线和迭代,为开发者提供了一个云开发的功能,将以服务的方式为开发者提供如云函数、数据库、存储管理等所需功能,大大降低了小程序的开发门槛,仅需通过小程序云开发提供的接口,就能实现因缺乏后端知识而无法实现的需求。本章内容将简单讲解如何使用小程序云开发,如还不太清楚小程序开发是何物的,可看看本人的另外一篇博客·微信小程序入门


一、开通云开发

1.打开微信开发者工具,创建或打开项目进入开发界面。
2.在开发者工具的工具栏左侧,点击 “云开发” 按钮即可打开云控制台。
在这里插入图片描述

3.接着会出现询问开通界面,直接点击开通按钮确定开通后会弹出一个弹窗,进入环境创建。
在这里插入图片描述
4.按照个人的情况选择配额和填写环境信息,平常练习和一些个人小程序一般使用官方提供的免费配额即可够用。

5.启用云开发会发现云开发为我们提供了一个可视化的控制台,里面可以看到我们的云函数调用、数据库中的数据以及云存储存储的文件等等。
在这里插入图片描述

注意:每个小程序账号可以免费创建两个环境,每个环境拥有一套独立的开发资源,并且每个环境之间是相互独立的,在实际开发过程中,建议将开发环境和生产环境分开。把所有的功能在测试环境测试完毕后,再上传到正式环境中。

二、使用云开发

1.直接创建云开发项目

填写好AppID,后端服务选择小程序·云开发
在这里插入图片描述
创建后,即可获得一个云开发的模板项目,在其上修改为我们想要的项目。
在这里插入图片描述

2.修改配置文件引入云开发

有时候觉得直接创建云开发项目会生成很多我们不需要的文件,因此可以先创建一个后端服务不使用云开发的项目,然后再修改配置文件和在app.js中初始化云环境。

在小程序的project.config.json文件中新增一个配置 “cloudfunctionRoot”: “文件夹名/”。这个文件夹是存放云函数的。
在这里插入图片描述然后在app.js的onLaunch函数中初始化云环境在这里插入图片描述wx.cloud.init({ })指使用默认的云环境,即AppID对应的云环境,也可以指定使用的云环境

 wx.cloud.init({
        // env 参数说明:
        //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境(第一个创建的环境)
         env: 'my-env-id',// 云环境ID
        traceUser: true,
      })

按照上述两步修改后,即可使用云开发了

三、云数据库

1.介绍

云开发提供了一个 JSON 数据库,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。我们如果接触过数据库,都应该知道关系型数据库,而JSON数据库则属于文档型数据库。

关系型数据库和 JSON 数据库的概念对应关系如下表:在这里插入图片描述
JSON数据库集合中的每个记录的字段可以不相同,不必像关系型数据库的表那样统一字段,这样提高了灵活性,相关信息存储更方便。

2.使用

打开云开发控制台,选择数据库,然后就可以创建集合了
在这里插入图片描述
创建集合后,可以给集合添加记录,在记录上填写字段名称、选择字段类型以及字段的值。
在这里插入图片描述
添加字段后可以发现集合中多了一个记录
在这里插入图片描述
记录中有一个字段_id是记录的唯一标识,默认由系统生成,也可以自己定义

数据库创建好集合后即可在小程序上调用,数据库无非就四个基本操作:增删查改

在小程序js文件中使用数据库的代码示例:

// 1. 获取数据库引用,初始化操作
const db = wx.cloud.database()

// 2. 插入记录
db.collection('test').add({ //test指集合名
  // data 字段表示需新增的 JSON 数据
  data: {
    // _id: 'todo-identifiant-aleatoire', //可以自定义,这里让系统自动生成
    name: "yyy",//name是字段名,下同
    sex: "女",
  },
  success: function(res) {
    // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
    console.log(res)
  }
})

// 3.查询集合中的所有记录
db.collection('test').get({
  success: function(res) {
    // res.data 是一个包含集合中有权限访问的所有记录的数据,不超过 20 条
    console.log(res.data)
  }
})

// 4.查询集合中的一条记录
db.collection('test').doc(_id).get({ //_id是记录对应的_id,下同
  success: function(res) {
    // res.data 包含该记录的数据
    console.log(res.data)
  }
})

// 5.更新集合中的一条记录
db.collection('test').doc(_id).update({
  // data 传入需要局部更新的数据
  data: {
    // 表示将 done 字段置为 true
    done: true
  },
  success: function(res) {
    console.log(res.data)
  }
})

// 6.删除集合中的一条记录
db.collection('test').doc(_id).remove({
  success: function(res) {
    console.log(res.data)
  }
})

上述代码只是简单的对记录进行增删查改,详情可以看看官方文档中的数据库操作

四、云函数

1.介绍

云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用。云函数相当于传统的前后端分离开发中后端代码,运行在服务器中,对数据库的读写操作更快,可处理更加复杂的计算。一个云函数的写法与一个在本地定义的 JavaScript 方法无异,代码运行在云端 Node.js 中。

2.使用

在云函数根目录上右键,在右键菜单中,可以选择创建一个新的 Node.js 云函数,我们将该云函数命名为 add。
在这里插入图片描述
开发者工具在本地创建出云函数目录和入口 index.js 文件,同时在线上环境中创建出对应的云函数。我们可以看到类似如下的一个云函数模板:

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

云函数的传入参数有两个,一个是 event 对象,一个是 context 对象。event 指的是触发云函数的事件,当小程序端调用云函数时,event 就是小程序端调用云函数时传入的参数,外加后端自动注入的小程序用户的 openid 和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态,可以用它来了解服务运行的情况。

我们修改一下模板的返回值:

exports.main = async (event, context) => {
//意思是将传入的 a 和 b 相加并作为 sum 字段返回给调用端。
  return {
    sum: event.a + event.b
  }
}

在小程序中调用这个云函数前,我们还需要先将该云函数部署到云端。在云函数目录上右键,在右键菜单中,我们可以将云函数整体打包上传并部署到线上环境中。部署完成后,我们可以在小程序中调用该云函数:

wx.cloud.callFunction({
  // 云函数名称
  name: 'add',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
  success: function(res) {
    console.log(res.result.sum) // 3
  },
  fail: console.error
})

云函数部署后,我们也可以在云开发控制台中查看并调试。
在这里插入图片描述

五、云存储

1.介绍

云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。我们也可以在云开发控制台直接操作云存储。
在这里插入图片描述

2.使用

在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。下面简单的几行代码,即可实现在小程序内让用户选择一张图片,然后上传到云端管理的功能:

// 让用户选择一张图片
wx.chooseImage({
  success: chooseResult => {
    // 将图片上传至云存储空间
    wx.cloud.uploadFile({
      // 指定上传到的云路径
      cloudPath: 'my-photo.png',
      // 指定要上传的文件的小程序临时文件路径
      filePath: chooseResult.tempFilePaths[0],
      // 成功回调
      success: res => {
        console.log('上传成功', res)
      },
    })
  },
})

云存储一般都是存储图片、音频、视频等等文件,上传文件后会获得文件的路径,这时可以与数据库结合,把路径存储到数据库中,方便以后需要时调用。


总结

小程序云开发的好处就是我们无需考虑后端服务器的问题,掌握小程序云开发相当于有全栈开发的能力,一个人就完成一个有后端服务支持的小程序,使得小程序真正的活起来。但想真正的掌握云开发则需要我们多看官方文档,对数据库、云函数、云存储等等后端服务有进一步的理解。

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

小程序云开发入门 的相关文章

  • 【SpringBoot】配置文件application自定义内容引入

    背景 进行Spring Boot配置文件部署时 xff0c 发出警告Spring Boot Configuration Annotation Processor not configured xff0c 但是不影响运行 解决方案 pom x
  • ssh 登录失败

    SSH远程登录失败 xff0c 提示 Password authentication failed The authenticity of host 39 10 3 25 201 10 3 25 201 39 can 39 t be est
  • 【Vue】集成HTTP库Axios

    安装 进入vue项目目录 npm install axios 64 0 21 0 save 版本 简单使用 在一个页面中通过axios发送请求拿到后端数据 Home vue span class token function import
  • 【Nginx】mac快速安装使用

    效果图 安装 查找 brew search nginx 可用版本 使用 brew install nginx 安装nginx 查看brew列表 span class token punctuation span base span clas
  • 【Vue】vue3数据绑定

    文章目录 Vue2分析当前应用环境类型项目代码结构vue3取代生命周期函数的应用 vue3响应式ref xff08 xff09 数据绑定响应式reactive xff08 xff09 数据绑定比较两者 Vue2 分析当前应用环境 企业老项目
  • 【Java】SpringBoot整合多数据源JdbcTemplate、Mybatis、Jpa

    SpringBoot 整合 JdbcTemplate 多数据源 pom span class token comment lt 引入阿里的数据源 gt span span class token tag span class token t
  • 【Vue】集成Vuex存储

    导入 官网https vuex vuejs org zh installation html E7 9B B4 E6 8E A5 E4 B8 8B E8 BD BD cdn E5 BC 95 E7 94 A8 安装 npm install
  • element-plus日历(Calendar)动态渲染+避坑指南

    效果图 实战代码 span class token operator lt span template span class token operator gt span span class token operator lt span
  • 【opencv3】PnP测距(完整流程附C++代码)

    概述 我们只要获得特征点的世界坐标 xff08 三维坐标 xff09 2D坐标 xff08 像素坐标 xff09 相机内参矩阵 相机畸变参数矩阵以上四个参数即可以解得相机与标志物之间的外参 xff08 旋转矩阵R 平移矩阵T xff09 x
  • 【opencv3】鼠标框选矩形并显示当前像素点坐标和矩形中心点坐标C++

    实现目标 xff08 1 xff09 用鼠标在图中框选矩形目标 xff0c 然后保存框选的图片 xff1b xff08 2 xff09 鼠标拖动过程中要求显示框的线条以及鼠标当前像素点信息 xff08 坐标和RGB值 xff09 xff1b
  • TensorFlow入门教程(十三):利用inception-v3训练自己的模型

    一 训练自己模型的方法 inception v3 最初是在ImageNet比赛训练的 xff0c 其分类有1000多种 xff0c 但对于自己的特定目标 xff0c 分类效果并不好 xff0c 需要自己再对自己的数据进行训练 xff0c 有
  • 本地代码修改后如何更新Gitee仓库

    1 git status 查看当前有变更的代码文件 2 git add 你本地所有修改了的文件添加到暂存区 3 git commit m xxxxx 引号里面是你的介绍 xff0c 就是你的这次的提交是什么内容 xff0c 便于你以后查看
  • 大小端模式

    32位数字0x12345678在内存中的表示形式为 xff1a 1 大端模式 xff1a Big Endian就是高位字节排放在内存的低地址端 xff0c 低位字节排放在内存的高地址端 网络上的数据都是以大端数据模式进行交互的 低地址 gt
  • torch 和numpy的相互转化

    span class token keyword import span math span class token keyword import span torch span class token keyword import spa
  • 我的第二篇博客(vue中的瀑布流插件 vue-waterfall-easy)

    vue waterfall easy是一款很好的瀑布流插件 以下是代码 转载自GitHub的官方文档 https github com lfyfly vue waterfall easy 以下是代码 span class token ope
  • table_exists_action=append和table_exists_action=truncate

    table exists action 61 append和table exists action 61 truncate 一 环境准备 1 1 192 168 1 22上创建single01 student表 SQL gt select
  • 记录oracle的几个参数 db_files,Cursor_sharing ,open_cursor

    db files 定义了oracle数据中数据文件 的个数 xff0c 当数据文件个数超过这个参数设定的值就会报ORA 00059这个错误 这个参数设置的值的大小不会影响效率 xff0c 只是单纯的控制数据文件的个数 详情请看 xff1a
  • 【原】expdp参数CONTENT

    作者 xff1a david zhang 64 sh 转载时请以超链接形式标明文章 链接 xff1a http www cnblogs com david zhang index archive 2012 03 01 2376059 htm
  • 动态性能视图概述

    动态性能视图概述 动态性能视图属于数据字典 xff0c 它们的所有者为SYS xff0c 并且多数动态性能视图只能由特权用户和DBA用户查询 当数据库处于不同状态时 xff0c 可以访问的动态性能视图有所不同 启动例程时 xff0c ORA
  • 安装oracle19c时报错DBT-50000

    转载于 xff1a 重庆思庄每日技术分享 安装oracle19c时报错DBT 50000 知乎 在Windows10上使用dbca配置oracle19 3 0 0时 xff0c 报错DBT 50000 无法检查可用内存 查找官方文档2631

随机推荐

  • oracle 不直接提供的软件包和数据库下载

    oracle 不直接提供的软件包和数据库下载 想要下载11 2 0 1的client xff0c 点击提示的doc id 进入如下文章界面 点击提示的网址 xff1a 进入如下界面 xff1a 点击登陆 xff0c 进入如下界面 xff1a
  • ora-245control file backup failed; target is likely on a local file system

    一 rac环境控制文件快照位置存放错误 xff08 以下内容转载自ora 00245报错解决方法 晟数 博客园 xff09 1 发现问题 最近使用备份软件对客户11G RAC数据库进行备份 xff0c 发现备份失败查看日志发现数据库报ORA
  • PDB导出导入

    检查当前目录 set linesize 100 col DIRECTORY NAME for a20 col OWNER for a10 col DIRECTORY PATH for a50 select from dba director
  • 麒麟安装问题

    对于本系统 需要打开 firewall cmd zone 61 public add port 61 8001 tcp permanent firewall cmd zone 61 public add port 61 8011 tcp p
  • 单实例11g升级到19c

    11g的服务器上安装19c的软件 安装完成后 xff0c 不需要关库 xff0c 修改环境变量为19c的 xff0c 执行dbua开始下述升级 11g升级到19c 执行预检查
  • 编译方式安装mysql

    转载于 xff1a 编译编译方式安装mysql编译 环境准备 环境 xff1a 硬件为4C 4G 50G 系统版本为redhat7 9 创建用户和组 创建MySQL用户和组 并且用户不能登陆 系统自带mysql软件 xff0c 安装时会自动
  • mysql 5.7登陆简单密码问题

    lucifer mysql gt update user set authentication string 61 password 39 mysql 39 where user 61 39 root 39 Query OK 1 row a
  • 5.7及以下版本mysql不能插入中文

    转载于 xff1a https blog csdn net qq 59500621 article details 122390644 5 7及以下版本mysql默认数据库使用的字符集是Latin1 我们需要为其修改字符集为 xff1a u
  • 备库failover升级

    1 centos 6 9 single06 gt centos7 9 single06std 11 2 0 4 搭建上面的dg 2 adg上打补丁psu xff1a 31537677 3 centos 7 9 上安装19c软件 xff0c
  • Data Guard高级玩法:通过闪回恢复failover备库

    转载于 xff1a Data Guard高级玩法 xff1a 通过闪回恢复failover备库 ITPUB博客 今天看到有一个网友提了一个问题 xff0c 描述很简短 测试DG时 xff0c 主库不能宕机 xff0c 如何测试failove
  • Oracle性能调查之ASH

    转载于 xff1a Oracle性能调查之ASH xff08 一 xff09 腾讯云开发者社区 腾讯云 在ORACLE性能问题调查时 xff0c 有价值的诊断情报多 xff1a STATSPACK xff0c AWR xff0c ASH x
  • 记录一次网卡问题

    问题 xff1a root 64 rac19c01 ip a 1 lo lt LOOPBACK UP LOWER UP gt mtu 65536 qdisc noqueue state UNKNOWN group default qlen
  • CRS-1705: Found 1 configured voting files but 2 voting files are required

    背景 xff1a vmware虚拟机安装两节点19c rac xff0c 执行node1 root脚本时正常 xff0c 执行node2的root脚本时报错 报错如下 xff1a CRS 2672 Attempting to start 3
  • wwid和uuid的区别

    转载于 xff1a https blog csdn net zwjzqqb article details 80321348 1 wwid 每个SCSI磁盘都有一个WWID xff0c 类似于网卡的MAC地址 xff0c 是独一无二的 可以
  • Sm2记录介绍

    SM2是国家密码管理局于2010年12月17日发布的椭圆曲线公钥密码算法 xff0c SM2采用的就是ECC 256位的一种 1 签名验签 SSWINAPI SGD UINT32 DEVAPI SKF ECCSignData SGD HDL
  • xshell之for循环

    转载于 xff1a shell while read line 与for循环的区别 冥想心灵 博客园 cnblogs com 例子 xff1a while read line 是一次性将文件信息读入并赋值给变量line xff0c whil
  • virtualbox安装虚拟增强功能

    1 分配光驱 xff0c 选择windows的光驱 2 会发现出现了CD驱动器VBoxGuestAdditions 双击进去 xff0c 发现目录如下 xff1a 3 双击执行VBoxGuestAdditions exe
  • #蓝桥杯嵌入式组#历年客观题解析

    文章目录 第八届初赛第八届决赛第九届初赛第九届决赛第十届初赛第十届决赛 第八届初赛 C D 线与功能 xff1a 两个或多个输出信号连接在一起可以实现逻辑 与 的功能 OC门 xff0c 即 集电极开路 xff0c 实际上只是一个NPN型三
  • Git在vscode中简单使用

    Git在vscode中简单使用 一 Git安装与配置 1 Git安装 xff08 官网地址 xff1a https git scm com xff09 2 Git配置 xff08 1 xff09 安装好后 xff0c 桌面右键 Git Ba
  • 小程序云开发入门

    文章目录 前言一 开通云开发二 使用云开发1 直接创建云开发项目2 修改配置文件引入云开发 三 云数据库1 介绍2 使用 四 云函数1 介绍2 使用 五 云存储1 介绍2 使用 总结 前言 一个小程序在开发时 xff0c 除了考虑界面功能逻