小程序

简介

基于微信，无需下载安装即可使用。用户扫一扫或搜一下就能打开应用。适合生活服务类线下商铺和非刚需低频应用。

微信公众平台: https://mp.weixin.qq.com/

框架结构

控制逻辑层(控制代码、API接口)

视图层(wxml、wxss、js、json)

操作系统层(网络通信、录音功能、数据缓存、系统信息)

基本设置

微信公众平台 [ 登录小程序帐号] > 首页 > [小程序发布流程 ] [小程序信息] [查看详情] [基本设置] [基本信息]

微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

获取AppID

微信公众平台 [ 登录小程序帐号] > 开发 > 开发设置 [开发者ID]

HelloWorld

修改项目AppID

文件结构

文件名称	是否必需	作用
app.js	是	逻辑代码
app.json	是	全局配置，不能添加任何注释，字符串需要使用双引号，
app.wxss	否	公共样式

app.json 全局配置项 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

属性	类型	必填	描述
pages	string[]	是	页面路径列表
window	Object	否	全局默认窗口表现
tabBar	Object	否	底部tab栏表现
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启调试模式，默认不开启

开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题

pages配置项

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

{

"pages":[

"pages/index/index",

"pages/logs/logs"

]

}

window配置项

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： `default` 默认样式 `custom` 自定义导航栏，只保留右上角胶囊按钮。
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。
pageOrientation	string	portrait	屏幕旋转设置，支持 `auto` / `portrait` / `landscape`

tarBar配置项

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	描述
color	HexColor	是	tab 上的文字默认颜色
selectedColor	HexColor	是	tab 上的文字选中时的颜色
backgroundColor	HexColor	是	tab 的背景色
borderStyle	string	否	tabbar 上边框的颜色，仅支持 `black` (默认)/ `white`
list	Array	是	tab 的列表，最少 2 个、最多 5 个 tab
position	string	否	tabBar 的位置，仅支持 `bottom (默认)` / `top`
custom	boolean	否	自定义 tabBar,默认 false

tarBar配置项 > list项 : 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象

属性	类型	必填	描述
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。

networkTimeout配置项

属性	类型	必填	描述
request	number	否	wx.request 的超时时间，单位：毫秒。默认 60000
connectSocket	number	否	wx.connectSocket 的超时时间，单位：毫秒。默认 60000
uploadFile	number	否	wx.uploadFile 的超时时间，单位：毫秒。默认 60000
downloadFile	number	否	wx.downloadFile 的超时时间，单位：毫秒。默认 60000

pages目录

存放小程序的页面,每个页面1个文件夹，每个文件夹中有4个文件，文件名称相同，类型不同

文件类型	是否必需	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式
json	否	页面配置

页面生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

页面名称.js

onLoad函数：监听页面加载，此函数只触发一次。

onReady函数：监听页面初次渲染完成，此函数只触发一次。

onShow函数：监听页面显示(切入前台)，可多次触发。

onHide函数：监听页面隐藏(切入后台)，可多次触发。

onUnload函数：监听页面卸载，可多次触发。

　　从子页面2返回子页面1时，会触发子页面2的onUnload函数。

　　从子页面返回导航页(tarBar)，会触发子页面的onUnload函数。

　　导航页(tarBar)相互切换不会触发onUnload函数。

　　页面2返回到(页面1或导航页)时，页面2只会触发onUnload函数，不会触发onHide函数。

自定义编译条件

视图结构 wxml

概述 https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF

WXML 充当的就是类似 HTML 的角色,语法参考 https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

MVVM 的开发模式提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系。

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

数据绑定使用 Mustache 语法（双大括号）将变量包起来。

可作用于内容：

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

可作用于组件属性(需在双引号之内)

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

可作用于控制属性(需在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

可作用于关键字(需在双引号之内)

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

可以在 {{}} 内进行简单的运算

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

数据路径运算

<view>{{object.key}} {{array[0]}}</view>

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
  data: {
    zero: 0
  }
})

对象

如果存在变量名相同的情况，后边的会覆盖前面的。

花括号和引号之间如果有空格，将最终被解析成为字符串

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

Page({
  data: {
    a: 1,
    b: 2
  }
})

也可以用扩展运算符 ... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

如果对象的 key 和 value 相同，也可以间接地表达

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for 也可以嵌套

也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

条件渲染

wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块

引用

WXML 提供两种文件引用方式import和include

import可以在该文件中使用目标文件定义的template

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

例：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。

与 CSS 相比，WXSS 扩展的特性有：尺寸单位、样式导入。

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

选择器

.class、#id、element、element,element、::after、::before

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

在组件中绑定一个事件处理函数

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page({
  tapName: function(event) {
    console.log(event)
  }
})

事件分类

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件

普通事件绑定

<view bindtap="handleTap">
    Click here!
</view>

自基础库版本 1.5.0 起，在大多数组件和自定义组件中， bind 后可以紧跟一个冒号，其含义不变，如 bind:tap 。基础库版本 2.8.1 起，在所有组件中开始提供这个支持。

绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

互斥事件绑定

自基础库版本 2.8.2 起，除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

例如在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 ，点击 middle view 会调用 handleTap2 和 handleTap1 。

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

事件的捕获阶段

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent基础事件对象属性

属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
target	Object	触发事件的组件的一些属性集合 id-String-事件源组件的id dataset-Object-事件源组件上由data-开头的自定义属性组成的集合
currentTarget	Object	当前组件的一些属性集合 id-String-事件源组件的id dataset-Object-事件源组件上由data-开头的自定义属性组成的集合连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如： `data-element-type` ，最终会呈现为 `event.currentTarget.dataset.elementType` ； `data-elementType` ，最终会呈现为 `event.currentTarget.dataset.elementtype` 。
mark	Object	事件标记数据当事件触发时，事件冒泡路径上所有的 `mark` 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 `mark` 。）如果存在同名的 `mark` ，父节点的 `mark` 会被子节点覆盖。在自定义组件中接收事件时， `mark` 不包含自定义组件外的节点的 `mark` 。不同于 `dataset` ，节点的 `mark` 不会做连字符和大小写转换。

CustomeEvent自定义事件对象属性（继承BaseEvent）

属性	类型	说明
detail	Object	额外的信息

TouchEvent触摸事件对象属性(继承BaseEvent)

属性

类型

说明

touches

Array

触摸事件，当前停留在屏幕中的触摸点信息的数组

identifier-Number-触摸点的标识符

pageX, pageY-Number-距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴

clientX, clientY-Number-距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

changedTouches

Array

触摸事件，当前变化的触摸点信息的数组

特殊事件： canvas 中的触摸事件不可冒泡，所以没有 currentTarget。

基础组件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

注意：所有组件与属性都是小写，以连字符-连接

属性类型

类型	描述
Boolean	布尔值组件写上该属性，不管是什么值都被当作 `true`；只有组件上没有该属性时，属性值才为`false`。如果属性值为变量，变量的值会被转换为Boolean类型
Number	数字
String	字符串
Array	数组
Object	对象
EventHandler	事件处理函数名
Any	任意属性

公共属性

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件

视图容器 view

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

如果需要使用滚动视图，请使用 scroll-view

<!--index.wxml-->
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

/* index.wxss */
@import "../lib/weui.wxss";

.page-section{
  margin-bottom: 20rpx;
}
.flex-wrp {display: flex;}
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}

视图容器 swiper 滑块

其中只可放置swiper-item组件，否则会导致未定义的行为。

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items	number	1	否	同时显示的滑块数量
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型 default 默认缓动函数 linear 线性动画 easeInCubic 缓入动画 easeOutCubic 缓出动画 easeInOutCubic 缓入缓出动画
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source} 其中source表示导致变更的原因，返回的可能值： `autoplay` 自动播放导致swiper变化； `touch` 用户划动引起swiper变化；其它原因将用空字符串表示。如果在 `bindchange` 的事件回调函数中使用 `setData` 改变 `current` 值，则有可能导致 `setData` 被不停地调用，因而通常情况下请在改变 `current` 值前检测 `source` 字段来判断是否是由于用户触摸引起。
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail = {dx: dx, dy: dy}

index.wxml

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">指示点</view>
          <view class="weui-cell__ft">
            <switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">自动播放</view>
          <view class="weui-cell__ft">
            <switch checked="{{autoplay}}" bindchange="changeProperty" data-property-name="autoplay" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">衔接滑动</view>
          <view class="weui-cell__ft">
            <switch checked="{{circular}}" bindchange="changeProperty" data-property-name="circular" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">竖向</view>
          <view class="weui-cell__ft">
            <switch checked="{{vertical}}" bindchange="changeProperty" data-property-name="vertical" />
          </view>
        </view>
      </view>
    </view>

    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider value="{{duration}}" min="500" max="2000" bindchange="changeProperty" data-property-name="duration" />
      <view class="page-section-title">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider value="{{interval}}" min="2000" max="10000" bindchange="changeProperty" data-property-name="interval" />
      <view class="page-section-title">
        <text>前边距(px)</text>
        <text class="info">{{previousMargin}}</text>
      </view>
      <slider value="{{previousMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="previousMargin" />
      <view class="page-section-title">
        <text>后边距(px)</text>
        <text class="info">{{nextMargin}}</text>
      </view>
      <slider value="{{nextMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="nextMargin" />
    </view>
  </view>
</view>

index.wxss

@import "./weui.wxss";

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
.page-body{
  padding-top: 60rpx;
}
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 80rpx;
}
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.page-section-gap .page-section-title{
  padding-left: 0;
  padding-right: 0;
}

.demo-text-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1AAD19;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}

index.js

Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    circular: false,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  },
  changeProperty: function (e) {
    var propertyName = e.currentTarget.dataset.propertyName
    var newData = {}
    newData[propertyName] = e.detail.value
    this.setData(newData)
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})