【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？

已于 2022-09-30 14:37:09 修改
阅读量1.3w 收藏 137
点赞数 15
分类专栏： 微信小程序 文章标签： 小程序 数据库
于 2020-11-27 15:23:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45680114/article/details/110231999
版权

前言

上一篇博客我把微信小程序云开发数据库操作（增删改查）的实现方法都已经分享出来啦，可以戳链接进去阅读哦
【微信小程序】小程序云开发实现数据库增删改查(小白速度Get起来！！一步步教你如何实现)

基于微信小程序云开发数据库的“查询”操作，我们需要把查询到的数据渲染到wxml页面。

在云函数入口文件编写数据库操作的逻辑代码
在这里插入图片描述

return res :返回users集合返回的数据

在js文件调用云函数的逻辑代码并接收数据库获取到的数据，以便后面进行渲染

js文件
在这里插入图片描述
在这里插入图片描述
获取到数据之后下一步就是页面渲染啦
在这里插入图片描述

效果图

在这里插入图片描述

源码都在上篇博客PO出来啦，想使用的朋友可戳进链接进行查看~

【微信小程序】小程序云开发实现数据库批量的增删改查(小白速度Get起来！！一步步教你如何实现)

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！

Danli.
关注
  • 15
    点赞
  • 踩
  • 137
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序云开发将页面生成为pdf
08-17
微信小程序云开发提供了一套完整的后端服务，包括数据库、存储和云函数。在这个场景下，我们可以编写一个云函数，接收前端上传的图片Base64数据，进行转换并保存PDF到云存储。前端通过调用云函数接口，触发这个转换...
【小程序云开发】如何查询数据库，并把数据渲染到页面的？
浩冉学编程的博客
05-22 773
云开发小程序如何查询数据库，并把数据渲染到页面的？
微信小程序基础使用-请求数据并渲染
2301_76866366的博客
06-08 2457
小程序模板语法-数据绑定,模板语法—条件渲染,wx:if 与 hidden区别,模板语法—列表渲染—基础,网络请求,界面交互,微信小程序本地存储,事件处理-事件对象&传参,组件事件
微信小程序数据包教程抓取，看完就是学会
最新发布
nhb687095的博客
06-01 1901
有很多粉丝小伙伴问到能不能抓取到微信小程序数据呢？答案当然是肯定的，通过或者Charles这些主流的抓包工具都可以抓得到，在IOS平台抓取微信小程序和https请求都是一样的设置，接下来给大家通过Fiddler演示如何设置在IOS平台端抓取小程序数据包（Charles也是类似）。
【微信小程序】获取云数据库数据+显示在页面
神创的博客
02-26 6999
参考：微信小程序-获取云数据库某集合数据并显示在页面https://blog.csdn.net/weixin_30622181/article/details/95356697
小程序——云开发数据库的数据读取出来显示到页面
WGTkris的博客
08-06 6383
小程序——云开发数据库的数据读取出来显示到页面
微信小程序如何将表单的数据发送到数据库，云开发，并实现将数据渲染到页面中
weixin_65143132的博客
12-03 6200
微信小程序如何将表单的数据发送到数据库，云开发，并实现将数据渲染到页面中
微信小程序云开发实现数据添加、查询和分页
11-28
在微信小程序中，你可以使用`wx.cloud.database()`获取到云数据库引用，然后调用`add()`方法向指定集合（如`topic`）中添加数据。数据通常以JSON格式传入，包括字段如`content`、`date`、`images`、`user`和`isLike...
微信小程序云开发demo
04-13
通过这个"微信小程序云开发demo"，开发者可以学习到如何结合云开发服务来实现微信小程序的完整功能，包括前端展示、后端逻辑处理、数据存储和文件管理。这有助于提升开发效率，降低运维成本，尤其适合初创团队和小型...
微信小程序食疗微信小程序的设计与实现源码数据库.zip
09-01
在这个项目中，我们将深入探讨如何设计并实现一个以食疗为主题的微信小程序，同时涉及到数据库的构建和管理，这在毕业设计中具有很高的实践价值。 首先，我们要理解微信小程序的基本架构和开发流程。微信小程序基于...
微信小程序-完整的点餐小程序源码（带后台和数据库）
05-28
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本资源提供的是一个完整的点餐小程序源码，包括了前端用户界面以及后端服务器和数据库，...
微信小程序-获取云数据库某集合数据并显示在页面
woshiliyi3的博客
12-24 3999
首先要在需要获取并显示数据的page的js文件中使用如下代码获取数据： //云数据库初始化 const db = wx.cloud.database({}); const cont = db.collection('river_data'); Page({ data:{ ne:[], //这是一个空的数组，等下获取到云数据库的数据将存放在其中 }, /**...
小程序基本命令
aiven1637的博客
10-30 3282
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序云开发（2）——在页面显示云数据库的数据
不绝顶程序猿的博客
10-14 9709
微信小程序创建云函数前的准备工作参考“微信小程序云开发（1）” 1、创建云函数 右键刚新建的“cloud”文件夹，选择“新建Node.js云函数” 我们创建一个计算2个数的和的云函数，取名叫“plus”，等右上角出现云函数上传成功的提示，到后台可以看到刚创建的云函数。 在“cloud/plus/index.js”文件里， // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() //这2行代码是初始化，不要改动 // 云函数入口函数
微信小程序：页面跳转时传递数据到另一个页面
采菊东篱下，Python满乾坤！
09-16 5631
一、功能描述 页面跳转时，同时把当前页面的数据传递给跳转的目标页面，并在跳转后的目标页面进行展示 二、功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page({   /**    * 页面的初始数据    */   data: {     name:'Tom',     age:'12'       },   buttonListen...
小程序开发：云开发数据库查询数据输出到界面、数据库储存图片信息输出到界面
m0_53350192的博客
03-10 2108
关于云开发数据库的增删改查很多人都陷入了知识盲区，主要是云开发所用的数据库与mysql不同，想要用传统的mysql开发可以连接服务器和mysql的云数据库，本文主要讲解云开发数据库的数据查询并输出到界面。
微信开发者工具 小程序 navigator组件 url传参
wenhaoyan的博客
04-15 2694
在微信小程序编写过程当中，为避免内容重复、页面过多造成的代码体量大的问题，笔者通过navigator组件url传参解决了这个问题。
微信小程序开发教程：利用nodejs从mysql数据库获取一个数据，并显示到微信小程序
qq_25501981的博客
12-01 1436
上面的代码中，{{ImgUrl}}参数是构建的一个url路径字段，你可以在我之前发布的文章中，找到它的使用方法。注意：{{item.text}}中的text，对应mysql数据库pop表中的text字段，{{item.img}}同理。最后，确保你的微信小程序的服务器域名已经添加到微信公众平台的服务器域名白名单中，否则请求会因为域名不在白名单中而失败。这是一个很基础的教程，将帮助你利用noidejs，从mysql数据库中获取想要的数据，并显示到微信小程序中。回调函数，以便使用返回的数据设置小程序页面的数据。
微信小程序 - 云开发
热门推荐
Qianmoer的博客
01-12 1万+
微信小程序 - 云开发
微信小程序云开发数据库数据如何渲染到页面
05-05
渲染微信小程序云开发数据库数据到页面需要以下步骤： 1. 在小程序的 app.js 中初始化云开发环境，获取数据库实例： ```javascript wx.cloud.init({ env: 'your-env-id' }) const db = wx.cloud.database() ``` 2. 在页面中调用数据库查询方法，获取数据并保存到页面数据中： ```javascript Page({ data: { dataList: [] }, onLoad: function () { db.collection('collection-name').get().then(res => { this.setData({ dataList: res.data }) }) } }) ``` 3. 在页面的 WXML 文件中使用数据绑定语法将数据渲染到页面上： ```html <view wx:for="{{dataList}}" wx:key="">{{item.field}}</view> ``` 其中，`collection-name` 是云数据库中的集合名称，`field` 是集合中的字段名称。 这样，页面就可以渲染出云数据库中的数据了。需要注意的是，小程序云开发数据库的数据操作是异步的，因此需要使用 Promise 或 async/await 等方式来处理数据的返回。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值