小程序云开发入门实战之列表页构建

2023-11-29 21:28:19

回顾云开发小项目

在本文中，我们将继续以一个具体的云开发小程序项目为例，来讲解如何构建列表页。在前面的文章中，我们已经介绍了云开发的基础知识、项目初始化、数据库操作、文件存储等内容。现在，我们将把这些知识应用到实际项目中，来构建一个功能完整的云开发小程序。

初始化新项目

打开微信开发者工具，点击“新建项目”按钮。
选择“小程序”选项，然后输入项目名称和项目路径。
点击“确定”按钮，创建新项目。
在项目中，右键点击“pages”文件夹，然后选择“新建”>“页面”。
输入页面名称，然后点击“确定”按钮。
在新创建的页面中，添加以下代码：

<view class="container">
  <view class="list">
    <block wx:for="{{list}}" wx:key="id">
      <view class="item">
        <image src="{{item.image}}" class="image" />
        <view class="title">{{item.title}}</view>
        <view class="description">{{item.description}}</view>
      </view>
    </block>
  </view>
</view>

在新创建的页面中，添加以下代码：

Page({
  data: {
    list: []
  },

  onLoad: function () {
    // 从数据库获取数据
    wx.cloud.callFunction({
      name: 'getList',
      data: {},
      success: res => {
        this.setData({
          list: res.result.data
        })
      }
    })
  }
})

在项目中，右键点击“cloudfunctions”文件夹，然后选择“新建”>“云函数”。
输入云函数名称，然后点击“确定”按钮。
在新创建的云函数中，添加以下代码：

exports.main = async (event, context) => {
  // 从数据库获取数据
  const db = wx.cloud.database()
  const collection = db.collection('list')
  const res = await collection.get()

  return res
}