微信小程序云开发（2）——在页面显示云数据库的数据

最新推荐文章于 2025-04-23 18:14:39 发布

agepower892259

最新推荐文章于 2025-04-23 18:14:39 发布

阅读量9.9k

点赞数 9

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

本文链接：https://blog.youkuaiyun.com/agepower1989/article/details/108911583

版权

本文介绍了如何在微信小程序中显示云数据库中的数据，通过在`index.wxml`、`index.js`和`index.wxss`文件中添加相应代码，实现了数据的展示。同时，讲解了数据分片段加载的实现，利用skip()和limit()方法进行数据分页，并通过更新云函数和调整JavaScript代码来优化加载效果。

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

微信小程序云数据库的查询可以参考“微信小程序云开发（1）”

在页面显示数据库里的数据

在“pages/index/index.wxml”文件中输入以下代码：

<button bindtap="getData">查询数据</button>
<view wx:for="{
    {DataList}}" wx:key="index">
  <view class="qwer">
    <view>{
  {item.name}}</view>
    <view>{
  {item.age}}</view>
  </view>
</view>

在“pages/index/index.js”文件中输入下列代码：

Page({
   
  data:{
   
    DataList : []
  },
  getData(){
   
    let THIS = this
    wx.cloud.callFunction({
   
      name : "getSQLData",
      fail(res){
   console.log("获取数据失败",res)},
      success(res){
   
        console.log("获取数据成功",res),
        THIS.setData({
   
          DataList: res<