微信小程序云开发--获取云数据列表并显示在页面(限制20条)

先:
完成云开发的配置,之前的博客有描述。

  1. index.wxml
<button bindtap="getData">获取数据</button>

<view wx:for="{{array}}">
  <view>{{item.name}}</view>
  <view>{{item.age}}</view>
  <view>{{item.sex}}</view>
</view>
  1. index.js
Page({

  data:{
    array:[]
  },

  getData(){
    let that = this
    wx.cloud.database().collection("userList").get({
      success(res){
        console.log("请求成功",res);
        that.setData({
          array:res.data
        })
      },
      fail(res){
        console.log("请求失败",res);
      }
    })
  }
})

  1. 自行添加记录
    微信小程序云开发--获取云数据列表并显示在页面(限制20条)_第1张图片

效果展示

  • 云数据库
    微信小程序云开发--获取云数据列表并显示在页面(限制20条)_第2张图片
  • 页面展示
    微信小程序云开发--获取云数据列表并显示在页面(限制20条)_第3张图片

你可能感兴趣的:(微信小程序开发)