概述
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
<!--轮播图 -->
<swiperclass="swiper"indicator-dots="{{true}}"autoplay="{{true}}"interval="4000"circular="{{true}}">
<blockwx:for="{{banner}}"wx:for-item="item"wx:key="index">
<swiper-item>
<imagesrc="{{item.image}}"mode="widthFix"></image>
</swiper-item>
</block>
</swiper>
<!--轮播图结束 —>
wxss
/* 轮播图 开始*/
.swiper{
height:400rpx;
width:100%;
}
.swiperimage{
height:400rpx;
width:100%;
}
/* 轮播图 结束*/
5，渲染
<blockwx:for="{{banner}}"wx:for-item="item"wx:key="index”>这里面渲染的内容</block>
细节
mode=“widthFix” 是关于image组件的缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
indicator-dots="{{true}}”，最好加上{{}}双花括号，因为 如果是“false“ 没加{{}}的话为真，必须加上{{}},布尔值才能成立
wx:for-item=“item” （是默认的可以不用写，可以自定义名字）使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名。
wx:key=“index” 只是为了不报黄，还有其他用处
拓展
其实swiper就是一个腾讯封装好的拿来就用的自定义组件。滑块视图容器，它是一个容器，容器（可以发挥无限）
