小程序获取云数据库集合的数据并显示在页面

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

按理说没什么毛病，数据确实也从云函数传到js里了，但传不到页面吖

先贴个代码，解决了再来更新www

找到问题了！

Promise.all 方法会将多个 Promise 实例，包装成一个新的 Promise 实例

上图是返回的数据，可以看出数据路径是返回集合名称.result.data，所以只要把js里

success: res => {
　　console.log(res)
　　this.setData({
　　　　block: res.data
　　})
}

改成

success: res => {
    console.log(res)
    this.setData({
        block: res.result.data
    })
},

下面是原代码

云函数：

// 云函数入口文件
//npm install --save wx-server-sdk
const cloud = require('wx-server-sdk')
cloud.init({env:'start-tally-x3qms'})
const db = cloud.database()
const tally = db.collection('tally')

// 云函数入口函数
exports.main = async (event, context) => {
  console.log('yun')
  // 先取出集合记录总数
  const MAX_LIMIT = 100
  const countResult = await tally.count()
  const total = countResult.total
  // 计算需分几次取
  const batchTimes = Math.ceil(total / 100)
  // 承载所有读操作的 promise 的数组
  const tasks = []
  for (let i = 0; i < batchTimes; i++) {
    const promise = tally.skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
    tasks.push(promise)
  }
  // 等待所有
  return (await Promise.all(tasks)).reduce((acc, cur) => ({
    data: acc.data.concat(cur.data),
    errMsg: acc.errMsg,
  }))
}

js：

Component({
  data: {
    block:[]
  },
  methods: {
    onShow: function () {
      console.log('show')
      this.setTallyList()
    },

    setTallyList: function(){
      wx.cloud.callFunction({
        // 云函数名称
        name: 'tally',
        // 传给云函数的参数
        data: {},
        success: res => {
          console.log(res) // 3
          this.setData({
            block: res.data
          })
        },
        fail: console.error
      })
    },
  }
})

wxml：

<view class="block" wx:for="{{block}}" wx:for-item="block" data-id="{{block._id}}" bindtap="block" wx:key="block">
  <view class="block_main">
    <view class="block_left">
      <view class="block_icon">
      <icon type="success"></icon>
      </view>
      <view class="block_left2">
        <view class="block_left3">
           <view class="block_type">{{block.type}}</view>
          <view class="block_remark">{{block.remark}}</view>
        </view>
        <view class="block_date">{{block.date}}</view>
      </view>
    </view>
    <view class="block_right">
      <view class="block_expend_or_income">{{block.expend_or_income == 'INCOME' ? '+' : '-'}}</view>
      <view class="block_money">{{block.money}}</view>
    </view>
  </view>
  <view class="block_border"></view>
</view>