小程序开发：云开发数据库查询数据输出到界面、数据库储存图片信息输出到界面

关于云开发数据库的增删改查很多人都陷入了知识盲区，主要是云开发所用的数据库与mysql不同，想要用传统的mysql开发可以连接服务器和mysql的云数据库，本文主要讲解云开发数据库的数据查询并输出到界面。

一、前提准备

首先要获得你的环境ID，在云开发的设置里可以看到

然后初始化云开发，建议在app.js里初始化

二、定义数据库数据

构建一个名为imageSwiper的集合，注意将权限设置为所有用户可读，仅创作者可读写

添加一个字段及数据，可使用系统自动生成的ID，也可以自己定义，这里的集合可以理解为mysql里的表，字段可以理解为属性

现在就建好了集合，url字段存储着图片链接

三、数据的查询，在.js文件里实现

 

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSwiperimage()
  },

  // Swiper数据获取
  getSwiperimage(){
    let that=this 
    let imgArr = []; //定义数组接受数据
    //查询imageSwiper的全部数据
    wx.cloud.database().collection("imageSwiper").get({
      //如果get成功
      success(res) {
        let dataList = res.data; //用dataList获取res返回的data数据
        for (let i = 0; i < dataList.length; i++) {
          imgArr.push(dataList[i].url) //push所有带url字段的数据
        }
        //用setData方法将imgArr的数据赋值给imageSwiperArray
        that.setData({
          imageSwiperArray: imgArr
        })
      }
    })
  },

四、页面的输出

这里运用swiper轮播器组件输出图片，附.wxml代码

<!--index.wxml-->

<!-- 定义一个swiper组件 -->
<swiper interval="3000" autoplay="{{ true }}" circular="{{ true }}"  
indicator-dots="{{ true }}" indicator-active-color="grey" current="0">
<!-- 用wx:for循环输出数组里的数据 -->
<block wx:for="{{imageSwiperArray}}">
<swiper-item>
<image class="swiperimage" src="{{item}}" lazy-load="{{ true }}" mode="scaleToFill"></image>
</swiper-item>
</block>
</swiper> 

五、样式的修改

swiper{
  width:100%;
  /* 高度自适应 */
  height:calc(750rpx*600/1125); 
}
.swiperimage{
  width:100%;
}

最后，让我们看看效果