讀取數(shù)據(jù)在之前也有詳細(xì)的寫過案例了掺炭，現(xiàn)在用在項(xiàng)目里面，很容易就能理解了法绵。
參考的讀取api,請點(diǎn)擊：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
1：初始化
實(shí)例和book方法
//云數(shù)據(jù)庫初始化
const db = wx.cloud.database({});
const book = db.collection('books')
2：復(fù)制API這段代碼獲取多個(gè)記錄的數(shù)據(jù)的方法箕速，放在項(xiàng)目到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實(shí)例里面的data
所以在data里面設(shè)置一個(gè)默認(rèn)的空數(shù)組
5：創(chuàng)建一個(gè)變量來保存頁面page示例中的this,方便后續(xù)使用
也可以使用箭頭函數(shù)
來打印一下this,看是不是page示例
const db = wx.cloud.database({});
const cont = db.collection('books');
Page({
data: {
book_list:[]
},
onLoad: function(options) {
// 創(chuàng)建一個(gè)變量來保存頁面page示例中的this, 方便后續(xù)使用
var _this=this;
db.collection('books').get({
success: res =>{
console.log(res.data);
console.log(this);
}
})
},
})
6:直接使用this來設(shè)置data
7：顯示和布局：
布局引用組件庫Vant Weapp朋譬，如果不會(huì)可以看下面這篇
小程序動(dòng)端組件庫Vant Weapp的使用
http://www.reibang.com/p/10d75a3ca3d0
使用組件庫引入盐茎，可以省略自己寫很多代碼的樣式，簡單方便徙赢，當(dāng)然也可以自己寫字柠。https://youzan.github.io/vant-weapp/#/card
因?yàn)閿?shù)據(jù)不止一條，循環(huán)狡赐，所以要用到小程序框架的列表渲染
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
組件路徑：
注意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="商品標(biāo)題" />
</view>
8：先在js里面打印一條具體的數(shù)據(jù)窑业，方便渲染的時(shí)候?qū)懗鰅tem.xxx的內(nèi)容
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) {
// 創(chuàng)建一個(gè)變量來保存頁面page示例中的this, 方便后續(xù)使用
var _this=this;
db.collection('books').get({
success: res =>{
console.log(res.data[0]);
this.setData({
book_list:res.data
})
}
})
},
})
ok,云數(shù)據(jù)庫讀取的數(shù)據(jù)顯示在小程序端列表里.
附錄：更多的云開發(fā)參考資料和視頻
一個(gè)云開發(fā)的demo：https://github.com/LWJcoder/qiupihu
云開發(fā)圖書私房柜：https://cloud.tencent.com/developer/edu/learn-100005-1244/3148
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子，愛編程阴汇，愛運(yùn)營数冬，愛折騰。堅(jiān)持總結(jié)工作中遇到的技術(shù)問題搀庶，堅(jiān)持記錄工作中所所思所見拐纱，對于博客上面有不會(huì)的問題，可以加入qq群聊來問我：473819131哥倔。
小程序云開發(fā)入門實(shí)戰(zhàn)課程總結(jié)：
小程序云開發(fā)實(shí)戰(zhàn)一：小程序掃一掃獲取到圖書ISBN碼（圖書條形碼）
小程序云開發(fā)實(shí)戰(zhàn)二：小程序云開發(fā)云函數(shù)安裝依賴步驟
小程序云開發(fā)實(shí)戰(zhàn)三：編寫云函數(shù)代碼
小程序云開發(fā)實(shí)戰(zhàn)四：調(diào)用豆瓣API獲取具體的數(shù)據(jù)
小程序云開發(fā)實(shí)戰(zhàn)五：如何將獲取到的API數(shù)據(jù)存入云數(shù)據(jù)庫里面
小程序云開發(fā)實(shí)戰(zhàn)六：云數(shù)據(jù)庫讀取的數(shù)據(jù)顯示在小程序端列表里
小程序云開發(fā)實(shí)戰(zhàn)七：云開發(fā)首頁列表跳轉(zhuǎn)詳情頁
