微信小程序云开发入门详细教程

news2024/9/21 2:44:30

微信小程序云开发

介绍:

微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。
开发者无需搭建服务器,可免鉴权直接使用平台提供的 API 进行业务开发。
前往官网 ,了解更多信息

云开发优势:

在这里插入图片描述

目录

  • 微信小程序云开发
    • 介绍:
    • 云开发优势:
    • 使用说明:
      • 一,创建项目
      • 二,开通云开发,创建环境
        • 2.1 点击云开发
        • 2.2 给云开发环境取名
        • 2.3 获取云开发环境id
      • 三、云开发数据库
        • 1,在数据库里新建集合
        • 2,在集合里新建记录
          • 总结:
        • 3,数据库权限管理
        • 4,数据库的增删改查
          • 4.1 查询 get()
          • 4.2 添加数据 add()
          • 4.3 更新数据 update()
          • 4.4 删除数据 remove()
      • 四,云函数
        • 1,新建云函数:
        • 2, 云函数获取数据
      • 五、云开发云存储
        • 1.认识云存储
        • 文件名命名限制:
        • 2.云开发控制台管理文件
        • 3.上传图片到云存储
    • 知识扩展:
      • 一,云开发概念
      • 二,云开发注意点:
    • 云开发 常用方法:
      • 一,排序 orderBy
      • 二,查询 where
      • 三,分页 skip
      • 四,云上传 uploadFile

使用说明:

一,创建项目

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

在这里插入图片描述

点击创建后,即可得到一个展示云开发基础能力的示例小程序:

在这里插入图片描述

二,开通云开发,创建环境

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

2.1 点击云开发

在这里插入图片描述

2.2 给云开发环境取名

在这里插入图片描述

2.3 获取云开发环境id

记录下自己的云开发环境id。

在这里插入图片描述

三、云开发数据库

参考官方文档:云开发数据库。

1,在数据库里新建集合

我们这里以新建一个商品列表为例。
在这里插入图片描述

2,在集合里新建记录

在这里插入图片描述
在这里插入图片描述

总结:

在这里插入图片描述
在这里插入图片描述

3,数据库权限管理

要想让用户查询到我们创建的商品数据,需要把权限改为所有用户可读。
在这里插入图片描述

4,数据库的增删改查

首先新建goods页面。

在pages/goods/goods.js中添加:

const db = wx.cloud.database()
4.1 查询 get()
    enquire(e){
        let that =this 
        db.collection('goods').get({
            success: function(res) {
              // res.data 是一个包含集合中有权限访问的所有记录的数据,不超过 20 条
              that.setData({
                  list:res.data
              })
              console.log(res.data)
            }
          })
    },
4.2 添加数据 add()
    insert(e){
        let that =this 
        db.collection('goods').add({
            data:{
                name:'梨子',
                price:'15'
            },
            success: function(res) {
                // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
                console.log('添加成功',res)
              }
          })
    },
4.3 更新数据 update()
    change(e){
        let that =this 
        db.collection('goods').doc('9e7190f16183f44003b4a35f7560aa65').update({
            data:{
                price:'30'
            },
            success: function(res) {
                // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
                console.log('更改成功',res)
              }
          })
    },
4.4 删除数据 remove()
    delete(e){
        let that =this 
        db.collection('goods').doc('859059a56183f48803c02801607c0563').remove({
            success: function(res) {
                // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
                console.log('删除成功',res)
              }
          })
    },

四,云函数

云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。
小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appid、openid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。

1,新建云函数:

在这里插入图片描述

初始化后在,cloudfunctions/getData/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,
    }
}

2, 云函数获取数据

然后在pages/goods/goods.js中添加:

        let that = this
        wx.cloud.callFunction({
            name:'getData',
            success(res){
                console.log('请求云函数成功','res')
                that.setData({
                    openid:res.result.openid
                })
                console.log(openid)
            }
 
        })

五、云开发云存储

1.认识云存储

云存储

简单说,云存储就是可以用来存储视频,音频,图片,文件的一个云存储空间。如果你的小程序需要用到视频播放,音频播放,图片展示,文件上传与下载功能,就可以用到我们的云存储了。

文件名命名限制:

1,不能为空
2,不能以/开头
3,不能出现连续/
4,编码长度最大为850个字节
5,推荐使用大小写英文字母、数字,即[a-z,A-Z,0-9]和符号 -,!,_,.,* 及其组合
6,不支持 ASCII 控制字符中的字符上(↑),字符下(↓),字符右(→),字符左(←),分别对应 CAN(24),EM(25),SUB(26),ESC(27)
7,如果用户上传的文件或文件夹的名字带有中文,在访问和请求这个文件或文件夹时,中文部分将按照 URL Encode 规则转化为百分号编码。
8,不建议使用的特殊字符: ` ^ " \ { } [ ] ~ % # \ > < 及 ASCII 128-255 十进制
9,可能需特殊处理后再使用的特殊字符: , : ; = & $ @ + ?(空格)及ASCII 字符范围:00-1F 十六进制(0-31 十进制)以及7F(127 十进制)

2.云开发控制台管理文件

控制台也可以很方便的管理文件。

在这里插入图片描述

3.上传图片到云存储

在小程序端可调用 wx.cloud.uploadFile 方法进行上传:

wx.cloud.uploadFile({
  cloudPath: 'example.png', // 上传至云端的路径
  filePath: '', // 小程序临时文件路径
  success: res => {
    // 返回文件 ID
    console.log(res.fileID)
  },
  fail: console.error
})

上传成功后会获得文件唯一标识符,即文件 ID,后续操作都基于文件 ID 而不是 URL。

之后还包括下载文件、删除文件、换取临时链接等功能,具体可参考:云储存API指引。

知识扩展:

一,云开发概念

1,小程序云开发,让前端程序员拥有后端的能力
2,云函数 (nodejs)
3,云数据库 (mogodb)
4,云存储
5,前端写好云函数 -> 上传到云服务器 ->实现自定云部署
6,前端去调用云函数=>间接通过云函数对数据库的操作
7,前端=》全栈

二,云开发注意点:

以下是我在做项目是的一些注意事项!(重点)

1,. 在app.js
在这里插入图片描述

2, 云函数index.js 定义id
在这里插入图片描述

3, 云id来自
云开发->概览->环境id
在这里插入图片描述

4, 选择环境
在这里插入图片描述

5,上传并部署
在这里插入图片描述

6,增量上传
在这里插入图片描述

7,在云函数如何操作云数据

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

云开发 常用方法:

一,排序 orderBy

orderBy

在这里插入图片描述

指定查询排序条件

参数

fieldPath: string
string: order

返回值

Collection

说明:

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

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

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

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

按进度排升序取待办事项

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

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

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

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

二,查询 where

where

在这里插入图片描述

三,分页 skip

skip

在这里插入图片描述

四,云上传 uploadFile

uploadFile

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

请求参数:
在这里插入图片描述
Promise返回结果说明:
在这里插入图片描述
错误返回参数:
在这里插入图片描述
使用示例

Promise 风格

const cloud = require('wx-server-sdk')
const fs = require('fs')
const path = require('path')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = async (event, context) => {
  const fileStream = fs.createReadStream(path.join(__dirname, 'demo.jpg'))
  return await cloud.uploadFile({
    cloudPath: 'demo.jpg',
    fileContent: fileStream,
  })
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/13191.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ly-tab插件报错

根据三方文档进行配置后一直报错&#xff0c;搞不懂因为啥&#xff0c;也查不到原因&#xff0c;头都大了&#xff0c;后来开始怀疑是版本问题&#xff0c;进行检查后发现安装的是最新版而三方文档是2.0版本&#xff08;果然是版本差异问题&#xff09; 解决办法一 将package.…

如何成为一个全栈数字化设计师

一个全栈的数字设计师需要懂业务、懂工具、还需要能处理协调部门之间的复杂协同。Ricky就是这样一个全栈数字设计师&#xff0c;在一个省属投资平台担任财务负责人的他&#xff0c;上周的直播分享了如何利用自动化工具&#xff0c;协助企业内部实现经营管理自动化的最佳实践。如…

Spring Framework6.0 发布了GA版,期待已久的新特性功能一览

全球最大的同性社交网站Github上&#xff0c;Spring Framework 6.0 正式发布GA。 Spring Framework 6.0 中的新特性 JDK 17 和 Jakarta EE 9 基线 整个框架代码库现在基于 Java 17 源代码级别。从 迁移javax到jakartaServlet、JPA 等命名空间与 Jakarta EE 9 和 Jakarta EE 1…

IPWorks SFTP Delphi版—组件消耗的资源

IPWorks SFTP Delphi版—组件消耗的资源 一个轻量级高效的SFTP客户端组件&#xff0c;支持强大的SSH 2.0加密和高级加密。 IPWorks SFTP帮助开发人员快速构建安全的文件传输应用程序。它为一个成熟的SFTP客户端提供了一个简单易用的API&#xff0c;开发人员可以使用它将SFTP支持…

【二叉树的存储及遍历】

目录树的基本知识树的定义树的基本概念二叉树的性质二叉树的存储表示顺序存储&#xff08;数组存储&#xff09;链式表示二叉链表的静态结构&#xff08;静态存储&#xff09;结构体设计二叉树的遍历遍历思路代码树的基本知识 树的定义 树是由n&#xff08;n>0&#xff09…

通用后台管理系统前端界面Ⅴ——axios使用与封装、配置路由和路由懒加载

axios使用与封装 1、下载axios npm i -S axios 2、在 main.js导入使用axios&#xff0c;因为是用的比较多&#xff0c;所以采用的是全局引入&#xff0c;挂载到原型的方式 import axios from axios Vue.prototype.axios axios // 挂载到原型,可在全局使用 配置路由 1、下载…

某30m小箱梁渠桥结构计算与施工图设计

目录 1、设计资料 1 1.1桥面净宽 1 1.2设计荷载 1 1.3主梁跨径和全长 1 1.4材料 1 1.5设计依据 1 1.6参考资料 1 2、任务与要求 1 2.1结构尺寸拟定 1 2.2行车道板计算 1 2.3主梁计算 1 2.4横梁的计算 2 3、结构尺寸拟定 2 4、 行车道板计算 3 4.1永久荷载及其效应 3 4.2截面设计…

Redis哨兵模式

什么是哨兵模式哨兵模式是Redis高可用的解决方案&#xff0c;使用Sentinel(哨兵)监控Redis集群中全部节点的运行状态&#xff0c;当主节点服务宕机后&#xff0c;会从当前主节点下的从节点中选一个节点作为新的主节点&#xff0c;继续为用户提供服务。当原主节点重新启动后&…

个人博客类网站为什么更适合虚拟主机?

对于各位站长来说&#xff0c;建立网站有多种主机选项可以选择&#xff0c;比如&#xff0c;虚拟主机、云主机&#xff0c;物理机等。那么为什么说个人博客类网站更适合选用虚拟主机而不是其他类型的主机呢? 个人博客类网站更适合虚拟主机的理由&#xff1a; 首先&#xff0c;…

基于STM32结合CubeMX学习Free-RT-OS的源码之两类中断解析

目录 认识 常见的中断应用场景 进入与退出临界区&#xff08;开中断与关中断&#xff09; Free RTOS的systick中断 和 PendSV中断。 Cortex-M3/4的工作模式以及双堆栈指针MSP和PSP(CPU与OS的相辅相成与互相成就&#xff09; 为什么要引入这两种工作状态&#xff1f; 为什么…

Debian Linux 的安装

Debian Linux 的安装 作者&#xff1a;Grey 原文地址&#xff1a; 博客园&#xff1a;Debian Linux 的安装 CSDN&#xff1a;Debian Linux 的安装 说明 本安装说明是基于 Windows 10 下 VMware workstation 16 安装 Linux&#xff0c;Linux 版本是 Debian 11&#xff0c;需…

K8s集群环境搭建

K8s集群环境搭建 修改hosts文件 [rootmaster ~]# vim /etc/hosts [rootmaster ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhost6.localdomain6 192.…

TCO点击试剂(4E)-TCO-PEG4-amine, 2243569-24-4,反式环辛烯-四聚乙二醇-氨基

【产品描述】 (4E)-反式环辛烯-四聚乙二醇-氨基&#xff0c;胺与活性NHS酯或在活化剂suh&#xff08;如EDC&#xff09;存在下与羧酸非常反应&#xff0c;TCO部分使四嗪分子实现快速点击化学。亲水性PEG间隔臂提高了水溶性&#xff0c;并提供了一个长而灵活的连接。西安凯新生物…

软件测试的几种模型

1.V模型 在软件测试方面&#xff0c;V模型是最广为人知的模型。如图&#xff0c;V模型从左到右描述了开发过程和测试行为。V模型的价值在于它非常明确的表明了测试过程中存在的不同级别&#xff0c;并且清楚的描述了这些测试阶段和开发过程各阶段的对应关系。缺点&#xff1a;把…

Selenium基础 — POM设计模式(一)

&#xff08;一&#xff09;POM模式介绍 1、什么是POM&#xff1f; POM是Page Object Model页面对象模型的简称。 POM是为Web UI元素创建Object Repository的设计模式 。 在这个模型下&#xff0c;对于应用程序中的每个网页&#xff0c;应该有相应的页面类。 此Page类将会找到…

ES新特性与TypeScript、JS性能优化

一、ECMAScript 新特性 1、作用域 1、全局作用域 2、函数作用域 3、块级作用域2、var、let和const的区别 1、let和var用来声明变量&#xff0c;const用来声明常量&#xff08;变量就是赋值后可以改变它的值&#xff0c;常量就是赋值后就不能改变它的值&#xff09; 2、const…

Unity 资源热更新

热更新流程 启动游戏根据当前版本号&#xff0c;和平台号去版本服务器上检查是否有热更从热更服务器上下载md5文件&#xff0c;比对需要热更的具体文件列表从热更服务器上下载需要热更的资源&#xff0c;解压到热更资源目录游戏运行加载资源&#xff0c;优先到热更目录中加载&…

windows下载redis、windows安装redis、windows启动redis

一、下载并解压 下载网址&#xff1a;https://github.com/tporadowski/redis/releases 下载后解压并重命名文件夹为redis 二、打开redis文件夹 找到redis.windows.conf配置文件&#xff0c;作如下修改 protected-mode no // 将yes改为no 部分配置信息说明 bind 127.0.…

Ubuntu服务器下安装FastDFS及nginx配置访问等问题记录

Ubuntu服务器下安装FastDFS及nginx配置访问下载对应包编译环境包解压环境配置配置nginx模块和安装nginx来进行访问该图片下载对应包 下载方式一&#xff1a;直接使用 wget 下载&#xff0c;如果太慢&#xff0c;可以去github下载&#xff0c;然后上传到服务器上即可。 wget -…

Mybatis三大执行器介绍

Mybatis三大执行器介绍Mybatis相关全览一、执行器介绍执行器的选择入口设置执行器两种方式全局配置&#xff08;不建议&#xff09;局部设置&#xff08;建议&#xff09;二、三个执行器区别SimpleExecutorReuseExecutorBatchExecutor总结三、效率测试四、平时开发使用本文用的…