微信小程序云开发-两种云端数据获取方法

下面价绍两种云端数据获取方法，都不需要写云函数，都用来前端完成，首先在数据库里准备好数据，然后开始操作，下面代码我用来获取轮播图的。

首先在App.js里初始化我们的小程序，env里面写自己的环境ID，环境ID是云开发控制台里面可以查看的。

//初始化
App({
  onLaunch: function () {
      wx.cloud.init({
        env:"自己的环境ID：xxxxxxxxx",
        traceUser: true,
      })
  }
})

第一种js云端数据获取:

const db = wx.cloud.database()
Page({
  data: {
    imglist:[],
  },

  // 请求云端轮播图数据
  onLoad: function () {
    let that = this
    db.collection(lunbotu).get({
      success:res=> {
        console.log(轮播图获取成功,res)
        that.setData({
          imglist:res.data
        })
      },
      catch:res=> {
        console.log(轮播图获取失败！,res)
      }
    })
})

index.wxml里数据展现，bindtap="lunbotu" data-src="{ {item.Photo}}用来图片预览

<!-- 轮播图 -->
<view class="swiper">
  <swiper class="swiper-img" circular="true" autoplay="true"  interval="5000" duration="1000">
    <block wx:for="{
         
  {imglist}}" wx:key="_id">
      <swiper-item class="item">
        <image src="{
         
  {item.Photo}}" bindtap="lunbotu" data-src="{
         
  {item.Photo}}" class="item-Img"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

预览图片js代码：

lunbotu: function(e) {
    console.log(e.currentTarget.dataset.src)
    var current = e.currentTarget.dataset.src;
    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: [current] // 需要预览的图片http链接列表  
    })
  },

第二种请求数据方法：

onLoad: function () {
    // 请求列表数据
    wx.cloud.database().collection("news").get()
      .then(res => { console.log("请求成功", res) })
      .catch(err => { console.log("请求失败", err) })
  },

显示到小程序页面：

onLoad: function () {
    // 请求列表数据
    wx.cloud.database().collection("news").get()
      .then(res => {
        console.log("请求成功", res)
        // 显示到小程序页面上
        this.setData({
          list: res.data
        })
      })
      .catch(err => {
        console.log("请求失败", err)
       })
  },

wxml数据展现和第一种方法里面的一样。