微信小程序(八)-项目实例(原生框架 MINA转云开发)==03-云开发-数据库

云数据库

云数据库开发文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html

1.新建云数据库(小程序中叫集合名,以前叫表名,轮播图表)

2.在数据表中加入数据

　　1.新建一个excel.csv文件(indexLBT.csv)

　　2.表中新建两个字段(lbtID,src)

　　3.将数据填在表中保存(先要将图片上传到云存储中)

　　4.导入文件 indexLBT.csv 到数据库中

3.初始化(哪个组件中要用数据库的数据就在哪个组件js文件中引用)

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html

Page({
  onLoad() {
    // 初始化云数据库(1-2步固定写法)
    // 1.获取当前云环境下(env:"wcg-8gmhce8s0001d52f")的数据库的引用
    const DB = wx.cloud.database()
    // 2.获取集合(数据库表名users)的引用
    const lunbotu = DB.collection("index-lunbotu")
    // 使用数据(1.查询: get )
    lunbotu.get({
      // 请求成功
      success(res){
        console.log(res)
      },
      // 请求失败
      fail(err){
        console.log(err)
      }
    })
  }
})

index.js

4.使用数据(要注意数据的权限,不然查询不到数据)

　　1.查询 .get() https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html

　　　　1.传统写法:

Page({
  onLoad() {
    // 初始化云数据库(1-2步固定写法)
    // 1.获取当前云环境下(env:"wcg-8gmhce8s0001d52f")的数据库的引用
    const DB = wx.cloud.database()
    // 2.获取集合(数据库表名users)的引用
    const lunbotu = DB.collection("index-lunbotu")
    // 使用数据(1.查询: get )
    lunbotu.get({
      // 请求成功
      success(res){
        console.log(res)
      },
      // 请求失败
      fail(err){
        console.log(err)
      }
    })
  }
})

index.js

　　　　2.ES6的简洁写法(箭头函数):

Page({
  onLoad() {
    // 初始化云数据库(1-2步固定写法)
    // 1.获取当前云环境下(env:"wcg-8gmhce8s0001d52f")的数据库的引用
    const DB = wx.cloud.database()
    // 2.获取集合(数据库表名users)的引用
    const lunbotu = DB.collection("index-lunbotu")
    // 3.使用数据(1.查询: get )
    // 3.1 传统写法
    // lunbotu.get({
    //   // 请求成功
    //   success(res){
    //     console.log(res)
    //   },
    //   // 请求失败
    //   fail(err){
    //     console.log(err)
    //   }
    // })
    // 3.2 ES6简洁写法(箭头函数)
    lunbotu.get()
    // 请求成功
    .then(res=>{
      console.log(res)
    })
    // 请求失败
    .catch(err=>{
      console.log(err)
    })
  }
})

index.js　

　　 这样有可能就查询不到数据

　　修改权限后查询就有

　　　　3.展示数据(轮播图)

Page({
  data: {
    lunbotu: []
  },
  onLoad() {
    // 初始化云数据库(1-2步固定写法)
    // 1.获取当前云环境下(env:"wcg-8gmhce8s0001d52f")的数据库的引用
    const DB = wx.cloud.database()
    // 2.获取集合(数据库表名users)的引用
    const lunbotu = DB.collection("index-lunbotu")
    // 3.使用数据(1.查询: get )
    lunbotu.get()
      // 请求成功,将数据赋值给 lunbotu 在页面展示
      .then(res => {
        this.setData({
          lunbotu: res.data
        })
      })
      // 请求失败
      .catch(err => {
        console.log("数据请求失败!")
      })
  }
})

index.js

  <view class="index_swiper">
    <!-- 
    1 swiper标签存在默认的宽度和高度 100%*150px 
      1 如果不改变swiper标签的默认尺寸,哪图片尺寸最好750px*150px
      2 如果图片不是750*150尺寸,就得根据图片的高度调整swiper标签的高度(swiper标签高=图片高)
    2 image标签默认宽度和高度 320px*240px
      1.图片是放到swiper标签中的,哪么图片是默认尺寸,哪放到swiper标签中就是宽度 320px(100%)*150px
      2.要将图片放到swiper标签中装满并且不变形,就得调整图片的宽度为100%,图片高度自适应(mode="widthFix")
    3 图片标签 mode属性渲染模式 
      1.widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
      2.widthFix 让图片标签宽高和图片标签内容的宽高都等比例的发生变化
    4 例:实际图片宽高为 750*268 (图片宽度最好是750px)
      1.先设图片属性 mode="widthFix"
      2.swiper标签高设 height: 268rpx;(图片的高度)
      3.image 标签宽设 width: 100%;
   -->
    <swiper autoplay circular interval="5000" indicator-dots indicator-active-color="red" indicator-color="#0094ff">
      <swiper-item wx:for="{{lunbotu}}" wx:key="lbtID">
        <image mode="widthFix" src="{{item.src}}" />
      </swiper-item>
    </swiper>
  </view>