wxml把云数据库获取的数据（包括图片）遍历出来

卖火柴的小男孩2

已于 2022-05-30 00:55:40 修改

阅读量642

点赞数

分类专栏：微信小程序文章标签：微信小程序

于 2022-05-30 00:28:24 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42839746/article/details/125039020

版权

本文介绍了如何在微信小程序中利用云开发后台创建数据库集合，并详细讲解了如何将包含图片的数据遍历并在wxml中显示。通过app.js配置和JS的处理，实现了从云数据库中获取并展示数据的完整流程。

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

先在云开发后台添加数据库集合，并在集合里添加数据

app.js

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    wx.cloud.init({
      env:"yunkaifa-9gjm6nggf704ec01"//这里输入云开发id
    })
  },
})

wxml

<block wx:for="{
  {list}}">  <!-- list 是数组 -->
  <view><view><view>商品名：{
  {item.name}}，价格：{
  {item.price}}</view></view></view>
  <image src="{
  {item.fileID}}"></image>  <!-- fileID 是云数据库的图片 -->
</block>

// 关联云开发数据库
var db = wx.cloud.database();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: []  // 空数组，用来存储从云空间获取到的数据

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onL