小程序云开发实战六:云数据库读取的数据显示在小程序端列表里

小程序云开发实战六:云数据库读取的数据显示在小程序端列表里_第1张图片

读取数据在之前也有详细的写过案例了,现在用在项目里面,很容易就能理解了。

参考的读取api,请点击:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html

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/#/card

因为数据不止一条,循环,所以要用到小程序框架的列表渲染
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
组件路径:

小程序云开发实战六:云数据库读取的数据显示在小程序端列表里_第2张图片

小程序云开发实战六:云数据库读取的数据显示在小程序端列表里_第3张图片

注意main.json里面的路径

{
  "usingComponents": {
    "van-card": "../../vant/card/index"
  }
}

写好之后
wxml如下:

私家书柜

  

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


9:小程序wxml界面

主要demo
wxml:


  

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


附录:更多的云开发参考资料和视频
一个云开发的demo:https://github.com/LWJcoder/qiupihu
云开发图书私房柜:https://cloud.tencent.com/developer/edu/learn-100005-1244/3148

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

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

小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)
小程序云开发实战二:小程序云开发云函数安装依赖步骤
小程序云开发实战三:编写云函数代码
小程序云开发实战四:调用豆瓣API获取具体的数据
小程序云开发实战五:如何将获取到的API数据存入云数据库里面
小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
小程序云开发实战七:云开发首页列表跳转详情页

你可能感兴趣的:(小程序云开发实战六:云数据库读取的数据显示在小程序端列表里)