微信小程序怎么查询云开发数据库里面的集合，怎么把集合结果显示在WXML前端页面上

最新推荐文章于 2025-07-04 11:02:56 发布

qq_37591637

最新推荐文章于 2025-07-04 11:02:56 发布

阅读量2.9w

点赞数 10

CC 4.0 BY-SA版权

分类专栏：微信小程序专栏

本文链接：https://blog.youkuaiyun.com/qq_37591637/article/details/86702559

微信小程序专栏专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍如何使用微信云开发平台，无需自建服务器，直接利用云端数据库实现前后端交互。通过具体示例，展示如何在页面加载时查询并显示数据库中的记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

云开发是2018年9月份微信开发小工具推出来的，开发者可以不用自己搭建服务器，利用现成的数据库进行前后台的交互

news集合--对应数据库里面的表

记录-表里的数据

如何把集合里面的记录显示在页面上呢？

查询数据一般都在onLoad里面，当页面加载的时候；

Page({
  data: {
    //定义一个数据，主要是放集合结果的
    ne: []
  },
  onLoad: function () {
    var _this=this;
   //1、引用数据库
   const db=wx.cloud.database({
     //这个是环境ID不是环境名称
     env:'tjn-0c0faa'
   }) 
   //2、开始查询数据了  news对应的是集合的名称
   db.collection('news').get({
     //如果查询成功的话
    success:res =>{     
      //这一步很重要，给ne赋值，没有这一步的话，前台就不会显示值
      this.setData({
        ne: res.data
      })
    }
    })
  },


})

注意：环境Id不是环境名称

前台页面

<view class="div">
<text class="head">项目列表</text>
<view  wx:for="{{ne}}">
<image src="{{item.img1}}" class="im"></image>
<image src="{{item.img2}}" class="im"></image>
<image src="{{item.img3}}" class="im"></image>
<text class="context" space='nbsp'>{{item.title}}
</text>
<text class="date">{{item.date}}</text>
</view>
</view>