读取数据在之前也有详细的写过案例了，现在用在项目里面，很容易就能理解了。
1：初始化
实例和book方法
//云数据库初始化 const db = wx.cloud.database({}); const book = db.collection('books')
2：复制API这段代码获取多个记录的数据的方法，放在项目到onload方法之中
const db = wx.cloud.database({}); const cont = db.collection('books'); Page({ data: {}, onLoad: function(options) { db.collection('books').get({ success(res) { console.log(res.data) } }) }, })
3：打印在控制台
4:拿到res.data之后，要赋值给page实例里面的data
所以在data里面设置一个默认的空数组
5：创建一个变量来保存页面page示例中的this,方便后续使用
也可以使用箭头函数
来打印一下this,看是不是page示例
const db = wx.cloud.database({}); const cont = db.collection('books'); Page({ data: { book_list:[] }, onLoad: function(options) { // 创建一个变量来保存页面page示例中的this, 方便后续使用 var _this=this; db.collection('books').get({ success: res =>{ console.log(res.data); console.log(this); } }) }, })
6:直接使用this来设置data
7：显示和布局：
布局引用组件库Vant Weapp，如果不会可以看下面这篇
小程序动端组件库Vant Weapp的使用
使用组件库引入，可以省略自己写很多代码的样式，简单方便，当然也可以自己写。
因为数据不止一条，循环，所以要用到小程序框架的列表渲染
组件路径：
注意main.json里面的路径
{ "usingComponents": { "van-card": "../../vant/card/index" } }
写好之后
wxml如下：
<text>私家书柜</text> <view wx:for="{{book_list}}"> <van-card num="2" price="2.00" desc="描述信息" title="商品标题" /> </view>
8：先在js里面打印一条具体的数据，方便渲染的时候写出item.xxx的内容
9：小程序wxml界面
主要demo
wxml:
<view wx:for="{{book_list}}"> <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}" /> </view>
js
const db = wx.cloud.database({}); const cont = db.collection('books'); Page({ data: { book_list:[] }, onLoad: function(options) { // 创建一个变量来保存页面page示例中的this, 方便后续使用 var _this=this; db.collection('books').get({ success: res =>{ console.log(res.data[0]); this.setData({ book_list:res.data }) } }) }, })
ok,云数据库读取的数据显示在小程序端列表里.
