小程序云开发之轮播图

概述

1，首先要把图片上传至云存储

2，写json数据，导入数据库

3，在js中获取数据，有两种获取方法,数据库和云函数获取区别就是通过云函数进行中转实现数据库API实现不了的功能

3.1，一个是通过数据库获取

3.2，一个是通过云函数

4，布局

5，将数据渲染

详述

1，上传至云存储首先要设置好图片等大小，像素等，iPhone6的,推荐750px，422px。（关于尺寸问题），然后把图片地址拷贝出来用于写json.

2,使用sublime编写，或者其他软件如DW。注意{}之间不能有逗号，banner示例.json

{"id":"1","name":"阅读","image":"cloud://ceshi-id.6365-ceshi-id-1300927431/banner/banner1阅读.png"}

{"id":"2","name":"日落","image":"cloud://ceshi-id.6365-ceshi-id-1300927431/banner/banner2日落.png"}

{"id":"3","name":"教师","image":"cloud://ceshi-id.6365-ceshi-id-1300927431/banner/banner3教师.png"}

导入数据库之后，集合的权限得改成所有用户公开，不然获取不到数据，

在获取数据时要定义环境

//app.js

App({

onLaunch:function() {

wx.cloud.init({

env:'ceshi-id'

})

},

})

3.1通过数据库直接获取。

// 初始化(关于初始化和增删改查)

constdb = wx.cloud.database()

Page({

data: {

},

onLoad:function(options) {

// 轮播图开始

constbanner = db.collection('banner')

banner.get().then(res => {

console.log(res)

this.setData({

banner: res.data

})

})

.catch(err => {

console.log(err)

})

// 轮播图结束

},

})

3.2通过云函数获取

（首先得进行云函数初始化和node.js环境准备）

然后通过云函数获取数据

4，布局,(关于swiper)

wxml