mysql的数据现实在小程序_小程序云开发实战六：云数据库读取的数据显示在小程序端列表里...

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的使用 https://www.jianshu.com/p/10d75a3ca3d0

使用组件库引入，可以省略自己写很多代码的样式，简单方便，当然也可以自己写。https://youzan.github.io/vant-weapp/

注意main.json里面的路径

{

"usingComponents": {

"van-card": "../../vant/card/index"

}

}

写好之后

wxml如下：

私家书柜

8：先在js里面打印一条具体的数据，方便渲染的时候写出item.xxx的内容

9：小程序wxml界面

主要demo

wxml:

price="{{item.price}}"

desc="{{item.author}}"

title="{{item.title}}"

thumb="{{item.image }}" />

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,云数据库读取的数据显示在小程序端列表里.