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

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

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq群聊来问我：473819131。

小程序云开发入门实战课程总结：