尧图网站建设 
简介这份PDF资料面向微信小程序开发者尤其是刚接触云开发、需要打通前端展示与后台数据存储的初中级人员围绕云数据库与云存储的配合使用展开解决数据如何从云端文件关联到数据库字段、进而驱动界面展示的问题。资源包共1个文件为PDF格式大小约56KB内容以图文步骤形式呈现便于对照操作。已有3171人学习下载说明其在入门阶段具有一定参考价值。资料从创建集合如videos讲起说明如何将云存储返回的tempFileURL填入数据库对应字段并延伸介绍增删改查、数据过滤排序分页、实时同步以及大数据场景下的扩展性与备份恢复策略帮助读者理解云数据库在用户数据、配置信息、商品详情等场景中的实际用法适合作为云开发数据管理环节的实操参考。1. 云数据库不是“云端 Excel”从云存储到 videos 集合的真实链路很多人第一次用微信小程序云开发会把云存储和云数据库混成一件事文件传上去了就以为数据也存好了。结果前端列表一渲染全是空白回头查半天才发现——云存储只负责“放文件”云数据库才负责“放记录”。这两者之间缺的那一环就是把云存储返回的tempFileURL写进数据库集合的某个字段里。这篇笔记拆的就是这个链路在云开发控制台建一个videos集合把云存储里视频文件的下载地址落到数据库记录上再让小程序前端读出来。适合刚接触微信小程序云开发、手里有云存储文件但不知道怎么跟数据库打通的开发者。整套流程不复杂但字段类型、权限、URL 时效这几处新手十有八九要翻一次车。2. 云存储与云数据库的分工为什么不能只传文件就完事2.1 云存储存的是文件本体云数据库存的是文件索引云存储Cloud Storage解决的是“文件放哪”的问题。你上传一个视频、一张封面图它给你返回一个fileID形如cloud://xxx.636c-xxx/videos/demo.mp4。这个fileID是云开发内部的资源标识不是浏览器能直接访问的 HTTP 地址。云数据库Cloud Database解决的是“记录怎么组织”的问题。它是一个文档型数据库每条记录是一个 JSON 对象存在集合collection里。集合相当于传统数据库的表但不需要预先定义 schema字段可以随记录不同而不同。那为什么前端不能直接拿fileID渲染因为video组件的src需要的是可访问的 URL而fileID不是。你需要用wx.cloud.getTempFileURL把fileID换成临时链接或者在上传时就把tempFileURL存进数据库。项目正文里走的是后一条路上传后拿到下载地址手动粘进数据库字段。这条路直观但要注意 URL 的时效性后面避坑章节会细说。2.2 集合、记录、字段videos 集合的最小结构建集合时名字用videos就行别用中文、别带空格。集合建好后是空的你需要往里加记录。一条典型的视频记录长这样{ _id: 自动生成不用管, title: 第一节课环境搭建, coverUrl: cloud://xxx.636c-xxx/covers/lesson1.jpg, videoUrl: https://xxx.tcb.qcloud.la/videos/lesson1.mp4?signxxx, duration: 620, createTime: 2024-06-01T10:00:00.000Z }_id是云数据库自动生成的主键你插入时不用写。videoUrl就是项目正文里说的“详情界面的下载地址”也就是云存储文件换出来的临时链接。coverUrl如果也用云存储可以存fileID前端渲染时再换临时链接这样能避免封面图链接过期。字段类型要留意duration存数字别存成字符串620否则前端排序会按字典序排100会排在20前面。createTime建议用db.serverDate()写入让服务端生成时间避免客户端时间不准。2.3 权限设置默认“仅创建者可读写”会坑到谁新建集合后云开发控制台默认的权限是“仅创建者可读写”。这个默认值在单人调试时没问题但一旦你的小程序要让所有用户看到视频列表就会出问题用户 A 创建的记录用户 B 读不到。常见做法是把集合权限改成“所有用户可读仅创建者可写”。这样前端db.collection(videos).get()能拿到全部记录但只有记录创建者能改。如果你的视频数据是管理员在控制台手动录入的那这些记录的创建者是管理员账号普通用户只读没问题。改权限的位置在云开发控制台 → 数据库 → 选中集合 → 权限设置。改完不用重新部署即时生效。但要注意权限改宽之后敏感字段比如用户手机号不要放在同一个集合里否则会跟着一起暴露。3. 从云存储到 videos 集合把下载地址写进数据库的完整操作3.1 控制台建集合与手动录入第一条记录打开微信开发者工具点顶部“云开发”按钮进入云开发控制台。左侧选“数据库”点“”号新建集合输入videos确定。集合列表里会出现videos点进去是空的。点“添加记录”会弹出一个 JSON 编辑框。把上面那条示例记录粘进去把videoUrl换成你云存储里真实的下载地址。这个地址从哪来在云开发控制台左侧选“存储”找到你上传的视频文件点文件名进入详情里面有一个“下载地址”复制它。注意这个地址带签名参数是有有效期的控制台里看到的通常是较长期有效的但前端getTempFileURL拿到的是 2 小时有效。粘好后点确定记录就写入了。此时你可以在控制台看到这条记录_id是自动生成的字符串。手动录入适合调试阶段正式数据建议用代码批量写入避免手抖。3.2 用 wx.cloud.database 在小程序端读取记录前端页面要展示视频列表在onLoad里调数据库查询。代码写在页面的 js 文件里// pages/videoList/videoList.js Page({ data: { videos: [] }, onLoad() { const db wx.cloud.database() db.collection(videos) .orderBy(createTime, desc) // 按创建时间倒序 .limit(20) // 一次最多取 20 条 .get() .then(res { console.log(查询结果, res.data) this.setData({ videos: res.data }) }) .catch(err { console.error(查询失败, err) wx.showToast({ title: 加载失败, icon: none }) }) } })wx.cloud.database()拿到数据库引用collection(videos)指定集合。orderBy(createTime, desc)按时间倒序最新的在前。limit(20)限制返回条数云数据库小程序端单次最多取 20 条这是硬限制不是可调参数。get()返回 Promiseres.data是记录数组。注意如果集合权限是“仅创建者可读写”而当前用户不是记录创建者res.data会是空数组不报错。这是最容易误判的地方——你以为查询写错了其实是权限拦了。3.3 前端渲染 videoUrl 与临时链接的转换时机拿到videos数组后WXML 里用wx:for渲染!-- pages/videoList/videoList.wxml -- view wx:for{{videos}} wx:key_id classvideo-item video src{{item.videoUrl}} poster{{item.coverUrl}}/video text{{item.title}}/text /view如果videoUrl存的是控制台复制的下载地址直接渲染通常能播。但如果存的是fileIDcloud://开头video不认需要先换临时链接。转换代码// 把 fileID 批量换成临时链接 wx.cloud.getTempFileURL({ fileList: [cloud://xxx.636c-xxx/videos/lesson1.mp4] }).then(res { // res.fileList[0].tempFileURL 就是可访问的 https 地址 console.log(res.fileList[0].tempFileURL) })fileList最多传 50 个fileID返回顺序与传入一致。临时链接默认 2 小时有效过期后需要重新获取。所以如果你的页面会长时间停留建议在onShow里重新拉一次链接而不是只在onLoad里拉一次。3.4 用 add 方法从代码写入记录替代手动粘贴手动录入几条调试可以数据多了必须用代码。在小程序端调addconst db wx.cloud.database() db.collection(videos).add({ data: { title: 第二节课云数据库操作, videoUrl: https://xxx.tcb.qcloud.la/videos/lesson2.mp4?signxxx, duration: 480, createTime: db.serverDate() // 服务端时间 } }).then(res { console.log(写入成功记录 id:, res._id) })data里就是你要存的字段。db.serverDate()生成服务端时间比new Date()准。add成功后返回_id可以拿去更新其他关联记录。注意小程序端add写入的记录创建者是当前用户。如果集合权限是“仅创建者可写”那这条记录只有当前用户能改。管理员要改得在控制台操作或者用云函数以管理员身份写入。4. 避坑与排查tempFileURL 过期、权限拦截、字段类型错乱4.1 现象视频昨天能播今天 403原因临时链接过期解决存 fileID 动态换链这是最高频的坑。你把getTempFileURL拿到的地址存进数据库当时能播第二天用户反馈 403。原因就是临时链接默认 2 小时有效过期后签名失效。解决思路数据库里存fileIDcloud://开头前端渲染前统一换临时链接。这样链接过期了重新换一次就行不用改数据库。如果一定要存 https 地址那就在每次页面加载时重新调getTempFileURL把新链接覆盖到前端 data 里不要依赖数据库里的旧链接。4.2 现象查询返回空数组但不报错原因集合权限拦了解决改权限或改用云函数前面提过权限是“仅创建者可读写”时非创建者查询返回空数组。排查方法在云开发控制台看集合权限设置如果是“仅创建者可读写”而你的数据是管理员录入的那普通用户就是读不到。改法有两种一是控制台把权限改成“所有用户可读仅创建者可写”二是保持权限不变用云函数以管理员身份查云函数不受集合权限限制。云函数方案更安全但多一层调用适合数据敏感的集合。4.3 现象排序结果不对100 排在 20 前面原因数字存成了字符串解决写入时用 Number 转换duration字段如果从表单拿到的值是字符串620直接存进去就是字符串类型。云数据库排序时字符串按字典序100会排在20前面。解决写入前用Number(duration)转一下或者用parseInt(duration, 10)。如果已经存错了得逐条更新把字符串改成数字。云数据库没有批量类型转换的 API只能查出来再逐条update。4.4 现象limit 20 之后拿不到更多数据原因小程序端单次上限解决分页 skip 或云函数小程序端get()单次最多 20 条这是硬限制。要拿更多用skip分页db.collection(videos) .orderBy(createTime, desc) .skip(pageIndex * 20) // pageIndex 从 0 开始 .limit(20) .get()skip的值是偏移量第 0 页 skip 0第 1 页 skip 20以此类推。注意skip越大性能越差数据量上千后建议改用云函数云函数端单次最多取 100 条且可以用聚合做更复杂的查询。4.5 现象控制台能看到记录前端查不到原因环境 ID 不一致解决核对 wx.cloud.init 的 envwx.cloud.init时如果不传env默认用第一个创建的环境。如果你有多个环境比如测试环境和正式环境控制台看的是 A 环境前端连的是 B 环境就会出现“控制台有数据、前端查不到”。解决在app.js的onLaunch里显式指定环境 IDwx.cloud.init({ env: your-env-id, // 替换成实际环境 ID traceUser: true })环境 ID 在云开发控制台左上角能看到形如xxx-1a2b3c。改完重新编译前端就连对了。5. 进阶用聚合做分组统计以及一个我每次上线前必走的检查习惯数据量上来之后单纯get不够用了。比如你要统计每个分类下有多少个视频用聚合aggregate比拉全量再前端算高效得多const db wx.cloud.database() db.collection(videos) .aggregate() .group({ _id: $category, // 按 category 字段分组 count: $.sum(1) // 每组计数 }) .end() .then(res { console.log(分组统计, res.list) })group里的_id是分组依据$category表示取记录的category字段。$.sum(1)是聚合操作符每组加 1。end()触发执行。聚合结果在res.list里每项形如{ _id: 前端, count: 12 }。聚合还能做match过滤、sort排序、lookup跨集合关联但小程序端聚合有复杂度限制太重的查询建议放云函数。最后说一个我自己的习惯每次上线前我会在云开发控制台把集合权限、索引、数据量各看一遍。索引尤其容易被忽略——videos集合如果经常按createTime排序就在控制台给createTime建一个索引查询会快很多。没建索引时数据量过千就能感觉到列表加载变慢。建索引的位置在集合详情 → 索引管理 → 新建索引字段选createTime升序降序都行按你的排序方向选。还有一次我踩了个坑在控制台手动改了一条记录的videoUrl忘了那条记录的_id被前端缓存了用户端一直显示旧视频。从那以后我每次改完数据库记录都会在开发者工具里点“清缓存 → 清除数据缓存”再重新编译看效果。这个动作花不了几秒但能省掉“改了没生效”的玄学排查时间。希望帮到你。本文还有配套的精品资源点击获取 微信小程序云开发：云存储与云数据库打通实战
简介这份PDF资料面向微信小程序开发者尤其是刚接触云开发、需要打通前端展示与后台数据存储的初中级人员围绕云数据库与云存储的配合使用展开解决数据如何从云端文件关联到数据库字段、进而驱动界面展示的问题。资源包共1个文件为PDF格式大小约56KB内容以图文步骤形式呈现便于对照操作。已有3171人学习下载说明其在入门阶段具有一定参考价值。资料从创建集合如videos讲起说明如何将云存储返回的tempFileURL填入数据库对应字段并延伸介绍增删改查、数据过滤排序分页、实时同步以及大数据场景下的扩展性与备份恢复策略帮助读者理解云数据库在用户数据、配置信息、商品详情等场景中的实际用法适合作为云开发数据管理环节的实操参考。1. 云数据库不是“云端 Excel”从云存储到 videos 集合的真实链路很多人第一次用微信小程序云开发会把云存储和云数据库混成一件事文件传上去了就以为数据也存好了。结果前端列表一渲染全是空白回头查半天才发现——云存储只负责“放文件”云数据库才负责“放记录”。这两者之间缺的那一环就是把云存储返回的tempFileURL写进数据库集合的某个字段里。这篇笔记拆的就是这个链路在云开发控制台建一个videos集合把云存储里视频文件的下载地址落到数据库记录上再让小程序前端读出来。适合刚接触微信小程序云开发、手里有云存储文件但不知道怎么跟数据库打通的开发者。整套流程不复杂但字段类型、权限、URL 时效这几处新手十有八九要翻一次车。2. 云存储与云数据库的分工为什么不能只传文件就完事2.1 云存储存的是文件本体云数据库存的是文件索引云存储Cloud Storage解决的是“文件放哪”的问题。你上传一个视频、一张封面图它给你返回一个fileID形如cloud://xxx.636c-xxx/videos/demo.mp4。这个fileID是云开发内部的资源标识不是浏览器能直接访问的 HTTP 地址。云数据库Cloud Database解决的是“记录怎么组织”的问题。它是一个文档型数据库每条记录是一个 JSON 对象存在集合collection里。集合相当于传统数据库的表但不需要预先定义 schema字段可以随记录不同而不同。那为什么前端不能直接拿fileID渲染因为video组件的src需要的是可访问的 URL而fileID不是。你需要用wx.cloud.getTempFileURL把fileID换成临时链接或者在上传时就把tempFileURL存进数据库。项目正文里走的是后一条路上传后拿到下载地址手动粘进数据库字段。这条路直观但要注意 URL 的时效性后面避坑章节会细说。2.2 集合、记录、字段videos 集合的最小结构建集合时名字用videos就行别用中文、别带空格。集合建好后是空的你需要往里加记录。一条典型的视频记录长这样{ _id: 自动生成不用管, title: 第一节课环境搭建, coverUrl: cloud://xxx.636c-xxx/covers/lesson1.jpg, videoUrl: https://xxx.tcb.qcloud.la/videos/lesson1.mp4?signxxx, duration: 620, createTime: 2024-06-01T10:00:00.000Z }_id是云数据库自动生成的主键你插入时不用写。videoUrl就是项目正文里说的“详情界面的下载地址”也就是云存储文件换出来的临时链接。coverUrl如果也用云存储可以存fileID前端渲染时再换临时链接这样能避免封面图链接过期。字段类型要留意duration存数字别存成字符串620否则前端排序会按字典序排100会排在20前面。createTime建议用db.serverDate()写入让服务端生成时间避免客户端时间不准。2.3 权限设置默认“仅创建者可读写”会坑到谁新建集合后云开发控制台默认的权限是“仅创建者可读写”。这个默认值在单人调试时没问题但一旦你的小程序要让所有用户看到视频列表就会出问题用户 A 创建的记录用户 B 读不到。常见做法是把集合权限改成“所有用户可读仅创建者可写”。这样前端db.collection(videos).get()能拿到全部记录但只有记录创建者能改。如果你的视频数据是管理员在控制台手动录入的那这些记录的创建者是管理员账号普通用户只读没问题。改权限的位置在云开发控制台 → 数据库 → 选中集合 → 权限设置。改完不用重新部署即时生效。但要注意权限改宽之后敏感字段比如用户手机号不要放在同一个集合里否则会跟着一起暴露。3. 从云存储到 videos 集合把下载地址写进数据库的完整操作3.1 控制台建集合与手动录入第一条记录打开微信开发者工具点顶部“云开发”按钮进入云开发控制台。左侧选“数据库”点“”号新建集合输入videos确定。集合列表里会出现videos点进去是空的。点“添加记录”会弹出一个 JSON 编辑框。把上面那条示例记录粘进去把videoUrl换成你云存储里真实的下载地址。这个地址从哪来在云开发控制台左侧选“存储”找到你上传的视频文件点文件名进入详情里面有一个“下载地址”复制它。注意这个地址带签名参数是有有效期的控制台里看到的通常是较长期有效的但前端getTempFileURL拿到的是 2 小时有效。粘好后点确定记录就写入了。此时你可以在控制台看到这条记录_id是自动生成的字符串。手动录入适合调试阶段正式数据建议用代码批量写入避免手抖。3.2 用 wx.cloud.database 在小程序端读取记录前端页面要展示视频列表在onLoad里调数据库查询。代码写在页面的 js 文件里// pages/videoList/videoList.js Page({ data: { videos: [] }, onLoad() { const db wx.cloud.database() db.collection(videos) .orderBy(createTime, desc) // 按创建时间倒序 .limit(20) // 一次最多取 20 条 .get() .then(res { console.log(查询结果, res.data) this.setData({ videos: res.data }) }) .catch(err { console.error(查询失败, err) wx.showToast({ title: 加载失败, icon: none }) }) } })wx.cloud.database()拿到数据库引用collection(videos)指定集合。orderBy(createTime, desc)按时间倒序最新的在前。limit(20)限制返回条数云数据库小程序端单次最多取 20 条这是硬限制不是可调参数。get()返回 Promiseres.data是记录数组。注意如果集合权限是“仅创建者可读写”而当前用户不是记录创建者res.data会是空数组不报错。这是最容易误判的地方——你以为查询写错了其实是权限拦了。3.3 前端渲染 videoUrl 与临时链接的转换时机拿到videos数组后WXML 里用wx:for渲染!-- pages/videoList/videoList.wxml -- view wx:for{{videos}} wx:key_id classvideo-item video src{{item.videoUrl}} poster{{item.coverUrl}}/video text{{item.title}}/text /view如果videoUrl存的是控制台复制的下载地址直接渲染通常能播。但如果存的是fileIDcloud://开头video不认需要先换临时链接。转换代码// 把 fileID 批量换成临时链接 wx.cloud.getTempFileURL({ fileList: [cloud://xxx.636c-xxx/videos/lesson1.mp4] }).then(res { // res.fileList[0].tempFileURL 就是可访问的 https 地址 console.log(res.fileList[0].tempFileURL) })fileList最多传 50 个fileID返回顺序与传入一致。临时链接默认 2 小时有效过期后需要重新获取。所以如果你的页面会长时间停留建议在onShow里重新拉一次链接而不是只在onLoad里拉一次。3.4 用 add 方法从代码写入记录替代手动粘贴手动录入几条调试可以数据多了必须用代码。在小程序端调addconst db wx.cloud.database() db.collection(videos).add({ data: { title: 第二节课云数据库操作, videoUrl: https://xxx.tcb.qcloud.la/videos/lesson2.mp4?signxxx, duration: 480, createTime: db.serverDate() // 服务端时间 } }).then(res { console.log(写入成功记录 id:, res._id) })data里就是你要存的字段。db.serverDate()生成服务端时间比new Date()准。add成功后返回_id可以拿去更新其他关联记录。注意小程序端add写入的记录创建者是当前用户。如果集合权限是“仅创建者可写”那这条记录只有当前用户能改。管理员要改得在控制台操作或者用云函数以管理员身份写入。4. 避坑与排查tempFileURL 过期、权限拦截、字段类型错乱4.1 现象视频昨天能播今天 403原因临时链接过期解决存 fileID 动态换链这是最高频的坑。你把getTempFileURL拿到的地址存进数据库当时能播第二天用户反馈 403。原因就是临时链接默认 2 小时有效过期后签名失效。解决思路数据库里存fileIDcloud://开头前端渲染前统一换临时链接。这样链接过期了重新换一次就行不用改数据库。如果一定要存 https 地址那就在每次页面加载时重新调getTempFileURL把新链接覆盖到前端 data 里不要依赖数据库里的旧链接。4.2 现象查询返回空数组但不报错原因集合权限拦了解决改权限或改用云函数前面提过权限是“仅创建者可读写”时非创建者查询返回空数组。排查方法在云开发控制台看集合权限设置如果是“仅创建者可读写”而你的数据是管理员录入的那普通用户就是读不到。改法有两种一是控制台把权限改成“所有用户可读仅创建者可写”二是保持权限不变用云函数以管理员身份查云函数不受集合权限限制。云函数方案更安全但多一层调用适合数据敏感的集合。4.3 现象排序结果不对100 排在 20 前面原因数字存成了字符串解决写入时用 Number 转换duration字段如果从表单拿到的值是字符串620直接存进去就是字符串类型。云数据库排序时字符串按字典序100会排在20前面。解决写入前用Number(duration)转一下或者用parseInt(duration, 10)。如果已经存错了得逐条更新把字符串改成数字。云数据库没有批量类型转换的 API只能查出来再逐条update。4.4 现象limit 20 之后拿不到更多数据原因小程序端单次上限解决分页 skip 或云函数小程序端get()单次最多 20 条这是硬限制。要拿更多用skip分页db.collection(videos) .orderBy(createTime, desc) .skip(pageIndex * 20) // pageIndex 从 0 开始 .limit(20) .get()skip的值是偏移量第 0 页 skip 0第 1 页 skip 20以此类推。注意skip越大性能越差数据量上千后建议改用云函数云函数端单次最多取 100 条且可以用聚合做更复杂的查询。4.5 现象控制台能看到记录前端查不到原因环境 ID 不一致解决核对 wx.cloud.init 的 envwx.cloud.init时如果不传env默认用第一个创建的环境。如果你有多个环境比如测试环境和正式环境控制台看的是 A 环境前端连的是 B 环境就会出现“控制台有数据、前端查不到”。解决在app.js的onLaunch里显式指定环境 IDwx.cloud.init({ env: your-env-id, // 替换成实际环境 ID traceUser: true })环境 ID 在云开发控制台左上角能看到形如xxx-1a2b3c。改完重新编译前端就连对了。5. 进阶用聚合做分组统计以及一个我每次上线前必走的检查习惯数据量上来之后单纯get不够用了。比如你要统计每个分类下有多少个视频用聚合aggregate比拉全量再前端算高效得多const db wx.cloud.database() db.collection(videos) .aggregate() .group({ _id: $category, // 按 category 字段分组 count: $.sum(1) // 每组计数 }) .end() .then(res { console.log(分组统计, res.list) })group里的_id是分组依据$category表示取记录的category字段。$.sum(1)是聚合操作符每组加 1。end()触发执行。聚合结果在res.list里每项形如{ _id: 前端, count: 12 }。聚合还能做match过滤、sort排序、lookup跨集合关联但小程序端聚合有复杂度限制太重的查询建议放云函数。最后说一个我自己的习惯每次上线前我会在云开发控制台把集合权限、索引、数据量各看一遍。索引尤其容易被忽略——videos集合如果经常按createTime排序就在控制台给createTime建一个索引查询会快很多。没建索引时数据量过千就能感觉到列表加载变慢。建索引的位置在集合详情 → 索引管理 → 新建索引字段选createTime升序降序都行按你的排序方向选。还有一次我踩了个坑在控制台手动改了一条记录的videoUrl忘了那条记录的_id被前端缓存了用户端一直显示旧视频。从那以后我每次改完数据库记录都会在开发者工具里点“清缓存 → 清除数据缓存”再重新编译看效果。这个动作花不了几秒但能省掉“改了没生效”的玄学排查时间。希望帮到你。本文还有配套的精品资源点击获取