【小程序】微信小程序云开发笔记详细教程(建议收藏)

这篇具有很好参考价值的文章主要介绍了【小程序】微信小程序云开发笔记详细教程(建议收藏)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1- 前言


1.1 微信云开发是什么?

微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。

开发者无需搭建服务器,可免鉴权直接使用平台提供的 API 进行业务开发。

1.2 怎么快速学习?

法一:前往官网 ,了解更多信息

【小程序】微信小程序云开发笔记详细教程(建议收藏)

法二:也可以登录自己的微信小程序

【小程序】微信小程序云开发笔记详细教程(建议收藏)

2- 介绍

2.1 概念

  1. 无需搭建服务器,快速构建小程序、公众号;

  2. 无需搭建服务器,只需使用平台提供的各项能力,即可快速开发业务。

直白来讲,小程序云开发就是让前端程序员拥有后端的能力

2.2 能力概览

云开发包括以下(参考云开发文档):

  • 储存数据与文件

云数据库:文档型数据库;支持在小程序端和云函数中调用。

存储:云端文件存储,支持在前端直接上传/下载,可在云开发控制台可视化管理。

  • 运行后端代码

云函数:开发者只需编写自身业务逻辑代码

  • 扩展能力

静态网站:快速部署网站,支持自定义域名、网站防刷等配置。

内容管理(CMS): 一键部署,可视化管理文本、Markdown、图片等多种内容,使用云数据库读取数据并使用数据。

  • 打通微信生态

云调用:云函数内免鉴权调用小程序开放接口,包括服务端调用、获取开放数据等能力。

微信支付:免鉴权、免签名计算、免 access_token,在云函数内原生调用微信支付接口。

环境共享:跨账号资源和能力复用,可授权云开发资源给其他小程序/公众号使用。

2.3 流程

前端写好云函数 ==> 上传到云服务器 ==>定义自定义云部署 ===>

前端去调用云函数 ==> 间接通过云函数对数据库的操作

前端==>全栈

3- 搭建云开发模板

3.1 创建项目

打开并登录微信开发者工具,新建小程序项目,填入 AppID,后端服务选择“微信云开发”并勾选同意"云开发服务条款":

【小程序】微信小程序云开发笔记详细教程(建议收藏)

点击创建后,即可得到一个展示云开发基础能力的示例小程序:
【小程序】微信小程序云开发笔记详细教程(建议收藏)

3.2 开通云开发,创建环境

在使用云开发能力之前,需要先开通云开发。

在开发者工具的工具栏左侧,点击 “云开发” 按钮即可打开云控制台,根据提示开通云开发,并且创建一个新的云开发环境。

【小程序】微信小程序云开发笔记详细教程(建议收藏)
【小程序】微信小程序云开发笔记详细教程(建议收藏)
注意 :免费体验1个月,只限没有用过微信云开发的新用户

  • 每个环境相互隔离,拥有唯一的环境 ID,包含独立的数据库实例、存储空间、云函数配置等资源;
  • 初始创建的环境自动成为默认环境;

3.3 开始开发

开通创建环境后,即可以开始在模拟器上操作小程序体验云开发提供的部分基础能力演示。

4- 云开发能力

微信小程序云开发提供了数据库、云存储、云函数、云调用、HTTP API 等功能。

4.1 数据库

4.1.1 介绍

云开发提供了一个 JSON 数据库,顾名思义,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。

关系型数据库和 JSON 数据库的概念对应关系如下表:
【小程序】微信小程序云开发笔记详细教程(建议收藏)

4.1.2 创建
  • 创建集合

【小程序】微信小程序云开发笔记详细教程(建议收藏)

  • 添加记录

【小程序】微信小程序云开发笔记详细教程(建议收藏)

4.2 存储

云存储提供高可用、高稳定、强安全的云端存储服务,支持任意数量和形式的非结构化数据存储,如视频和图片,并在控制台进行可视化管理。

4.3 云函数

4.3.1 介绍

云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用。

4.3.2 创建
  • 右键创建云函数

【小程序】微信小程序云开发笔记详细教程(建议收藏)

  • 在页面中调用云函数

【小程序】微信小程序云开发笔记详细教程(建议收藏)

4.3.3 操作

在云函数如何操作云数据

  1. 初始化
var db = cloud.database()
  1. 获取
var data = await db.collection("feedback").get()
  1. 添加
var  data = await db.collection("feedback").add(data:{添加数据}

4.4 HTTP API

云开发资源也可以通过 HTTP 接口访问,即在小程序外访问,接口见 HTTP API 文档。

5- 云上传

5.1 介绍

wx.cloud.uploadFile

将本地资源上传至云存储空间,如果上传至同一路径则是覆盖写;

【小程序】微信小程序云开发笔记详细教程(建议收藏)

5.2 使用示例

  • Callback 风格
wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 文件路径
  success: res => {
    // get resource ID
    console.log(res.fileID)
  },
  fail: err => {
    // handle error
  }
})
  • Promise 风格
wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 文件路径
}).then(res => {
  // get resource ID
  console.log(res.fileID)
}).catch(error => {
  // handle error
})

6- 排序

6.1 介绍

Collection.orderBy(fieldPath: string, string: order):Collection

支持端:小程序 , 云函数 , Web

指定查询排序条件

6.2 参数

fieldPath: string
string: order

6.3 返回值

Collection

6.2 参数说明

方法接受一个必填字符串参数 fieldName 用于定义需要排序的字段,一个字符串参数 order 定义排序顺序。order 只能取 asc 或 desc。

如果需要对嵌套字段排序,需要用 “点表示法” 连接嵌套字段,比如 style.color 表示字段 style 里的嵌套字段 color。

同时也支持按多个字段排序,多次调用 orderBy 即可,多字段排序时的顺序会按照 orderBy 调用顺序先后对多个字段排序

6.3 示例代码:按一个字段排序

按进度排升序取待办事项

db.collection('todos').orderBy('progress', 'asc')
  .get()
  .then(console.log)
  .catch(console.error)

6.3 示例代码:按多个字段排序

先按 progress 排降序(progress 越大越靠前)、再按 description 排升序(字母序越前越靠前)取待办事项:

db.collection('todos')
  .orderBy('progress', 'desc')
  .orderBy('description', 'asc')
  .get()
  .then(console.log)
  .catch(console.error)

7- 分页

7.1 介绍

Collection.skip(offset: number):Collection

支持端:小程序 , 云函数 , Web

指定查询返回结果时从指定序列后的结果开始返回,常用于分页

7.2 参数

offset: number

7.3 参数

Collection

7.4 示例代码

db.collection('todos').skip(10)
  .get()
  .then(console.log)
  .catch(console.error)

8- 查询

可在官方文档详细查看

【小程序】微信小程序云开发笔记详细教程(建议收藏)

9- 注意点

  1. 在app.js

【小程序】微信小程序云开发笔记详细教程(建议收藏)

  1. 云函数index.js 定义id

【小程序】微信小程序云开发笔记详细教程(建议收藏)

  1. 云id 来自云开发 ==> 概览 ==>环境id

【小程序】微信小程序云开发笔记详细教程(建议收藏)

  1. 选择环境

【小程序】微信小程序云开发笔记详细教程(建议收藏)

  1. 上传并部署

【小程序】微信小程序云开发笔记详细教程(建议收藏)

  1. 增量上传

【小程序】微信小程序云开发笔记详细教程(建议收藏)


往期传送门

【小程序】微信小程序自定义组件Component详细总结

【小程序】微信小程序常用api的使用,附案例(建议收藏)

【微信小程序】小程序使用详细教程(建议收藏)文章来源地址https://www.toymoban.com/news/detail-483434.html

到了这里,关于【小程序】微信小程序云开发笔记详细教程(建议收藏)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • appium+夜神模拟器操作微信小程序,多个模拟器要结合yaml配置文件来并发控制,一万多行代码[建议收藏]

    技术心得 python+appium+夜神模拟器+结合yaml配置文件实现并发采集任务。   代码如下 : 模拟器的配置文件如下: 欢迎大家一起学习,一起进步,喜欢私聊。

    2024年02月13日
    浏览(36)
  • ~~~超详细Nginx安装教程,建议收藏保存

    1.1、Nginx概述 Nginx (“engine x”) 是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。 1.2、Nginx作为web服务器 Nginx可以作

    2024年02月08日
    浏览(40)
  • MySQL 详细学习教程【万字长文, 建议收藏】

    Mysql文档地址👉 建议在用户变量下配置 在mysql-5.7.19-winx64目录下创建my.ini文件 1.3.1 Navicat 1.3.2 SQLyog 改变字体显示 所有安装Mysql数据库,就是在主机安装一个数据库管理系统(DBMS),这个管理程序可以管理多个数据库。DBMS(database manage system) 一个数据库中可以创建多个表,以保存

    2024年02月14日
    浏览(42)
  • 校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程

    校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程 完整代码下载地址:校园二手书商城源代码基于微信小程序云开发 长话短说,下面直接说配置流程 1、下载导入 直接下载到本地,然后导入开发者工具 最近墙的厉害,也可使用蓝奏云下载 ht

    2023年04月24日
    浏览(55)
  • Fastbot_ios详细教程(建议收藏!!!)iOS monkey测试

    前言:如遇到报错信息,请滑动至文章最底部,有相关解决方案 1.下载fastbot_iOS的资源 1.github下载资源地址:https://github.com/bytedance/Fastbot_iOS 2.下载方式(二选一):ssh拉取下载                                           直接打包下载 3.下载成功后,是一个Fastbot_ios-main文

    2024年01月20日
    浏览(35)
  • JavaScript保姆级教程 ——— 重难点详细解析(万字长文,建议收藏)

    本文是整理了JS中的一些 重点,难点,以及不好理解的知识点 本文非常详细 ,深入的讲解, 包学包会 1.1 函数(Function)是什么? 函数(方法)是由事件驱动的或者当它被调用时执行的可重复使用的代码块 —— 官方说明 向来觉得官方的文档是有些生硬的,举个例子: 函数可

    2023年04月08日
    浏览(40)
  • Spring Boot+Mybatis实现增删改查接口开发+测试(超详细建议收藏)

    Java也是测试必知必会的内容,特别是现在类似spring boot 等Java框架更是成为主流。之前实现的图书增删改查是用Python实现的,没看过的请移步:Flask+mysql 实现增删改查接口开发+测试(图文教程附源码),本次给大家带来用Java实现的后端接口版本,并根据之前的项目总结有做一

    2024年02月03日
    浏览(33)
  • 微信小程序API(详细 教程)

    小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。 小程序提供了很多实用的方法供开发者使用 小程序全局对象是: wx 所有的 API 都保存在 wx 对象中 显示消息提示框: wx.sh

    2023年04月15日
    浏览(33)
  • 微信小程序对接微信支付详细教程

    小程序 微信支付官方文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_11index=2 https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_0.shtml 前提 在进行对接微信支付之前,我们首先需要将以下几点准备好: 申请APPID 申请商户号 小程序开通微信支付,绑定已经申请好的商户号。

    2024年02月09日
    浏览(34)
  • 最详细的Keycloak教程(建议收藏):Keycloak实现手机号、验证码登陆——(二)Keycloak与SpringBoot的集成

    上一篇已经介绍了keycloak的下载与使用: Keycloak的下载与使用 本文章和大家分享keycloak怎么去集成springboot项目,以及怎么去做接口权限的校验。 PS:根据红帽的公告,目前在springboot 3.x版本已经不支持keycloak适配器,所以本章基于 springboot 2.7.16 版本,集成keycloak做登录校验,并

    2024年02月05日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包