站长圈

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

  • 时间:2019-08-08 11:06 编辑:祈澈姑娘 来源:简书 阅读:175
  • 扫一扫,手机访问
摘要:读取数据在之前也有详细的写过案例了,现在用在项目里面,很容易就能理解了。参考的读取api,请点击:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html1:初始化实例和book方法  //云数据库

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

参考的读取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:打印在控制台


2.jpg

4:拿到res.data之后,要赋值给page实例里面的data
所以在data里面设置一个默认的空数组

3.jpg

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);
      } 
    })
  },
})


4.jpg

6:直接使用this来设置data

5.jpg

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
组件路径:


6.jpg

7.jpg

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


10.jpg



  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【计算机/互联网|多媒体】微信小程序入门与实战音乐素材(2019-08-15 18:58)
【计算机/互联网|程序设计开发】小程序云开发实战七:云开发首页列表跳转详情页(2019-08-08 11:13)
【计算机/互联网|程序设计开发】小程序云开发实战六:云数据库读取的数据显示在小程序端列表里(2019-08-08 11:06)
【计算机/互联网|程序设计开发】小程序云开发实战五:如何将获取到的API数据存入云数据库里面(2019-08-08 10:59)
【计算机/互联网|程序设计开发】小程序云开发实战四:调用豆瓣API获取具体的数据(2019-08-08 10:35)
【计算机/互联网|程序设计开发】第 2 章:初始化微信小程序蓝牙适配器(openBluetoothAdapter)——蓝牙教程(2019-08-07 17:34)
【计算机/互联网|程序设计开发】第 1 章:新建微信小程序项目——蓝牙教程(2019-08-07 17:21)
【计算机/互联网|程序设计开发】微信小程序蓝牙教程之前言(2019-08-07 17:16)
【计算机/互联网|程序设计开发】小程序云开发实战三:编写云函数代码(2019-08-07 11:04)
【计算机/互联网|程序设计开发】小程序云开发实战二:小程序云开发云函数安装依赖步骤(2019-08-07 10:06)
网站首页  |   关于我们  |   广告合作  |   联系我们  |   隐私条款  |   免责声明
CopyRight 2014-2024 站长圈 | ICP证:粤ICP备16065033号-15
联系客服
技术咨询 售前小郑 客服鸯鸯 联系客服
0769-33314958
手机版

扫一扫进手机版
返回顶部