微信小程序开发文档 第33页

swiper 基础库 1.0.0 开始支持，低版本需做兼容处理。 滑块视图容器。 属性 类型 默认值 必填 说明 最低版本 indicator-dots boolean false 否 是否显示面板指示点 1.0.0 indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0 indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0 autoplay boolean false 否 是否自动切换 1.0.0 current number 0 否 当前所在滑块的 index 1.0.0 interval number 5000 否 自动切换时间间隔 1.0.0 duration number 500 否 滑动动画时长 1.0.0 circular boolean false 否 是否采用衔接滑动 1.0.0 vertical boolean false 否 滑动方向是否为纵向 1.0.0 previous-margin string “0px” 否 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 1.9.0 next-margin string “0px” 否 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0 display-multiple-items number 1 否 同时显示的滑块数量 1.9.0 skip-hidden-item-layout boolean false 否 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 1.9.0 easing-function string “default” 否 指定 swiper 切换缓动动画类型 2.6.5 bindchange eventhandle 否 current 改变时会触发 change 事件，event.detail = {current,...

scroll-view 可滚动视图区域。 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件 scroll-top Number   设置竖向滚动条位置 scroll-left Number   设置横向滚动条位置 scroll-into-view String   值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡 enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 bindscrolltoupper EventHandle   滚动到顶部/左边，会触发 scrolltoupper 事件 bindscrolltolower EventHandle   滚动到底部/右边，会触发 scrolltolower 事件 bindscroll EventHandle   滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。 示例代码： <view class="section"> <view class="section__title">vertical scroll</view> <scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view> <view class="btn-area"> <button size="mini" bindtap="tap">click me to scroll into view </button> <button size="mini" bindtap="tapMove">click me...

view 视图容器。 属性 类型 默认值 必填 说明 最低版本 hover-class string none 否 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 1.0.0 hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0 hover-start-time number 50 否 按住后多久出现点击态，单位毫秒 1.0.0 hover-stay-time number 400 否 手指松开后点击态保留时间，单位毫秒 1.0.0 示例： <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> Bug & Tip tip: 如果需要使用滚动视图，请使用 scroll-view

运行机制 小程序没有重启的概念 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁 置顶的小程序不会被微信主动销毁 当收到系统内存告警也会进行小程序的销毁 再次打开逻辑 基础库 1.4.0 开始支持，低版本需做兼容处理 用户打开小程序的预期有以下两类场景： A. 打开首页： 场景值有 1001, 1019, 1022, 1023, 1038, 1056 B. 打开小程序指定的某个页面： 场景值为除 A 以外的其他 当再次打开一个小程序逻辑如下： 上一次的场景 当前打开的场景 效果 A A 保留原来的状态 B A 清空原来的页面栈，打开首页（相当于执行 wx.reLaunch 到首页） A 或 B B 清空原来的页面栈，打开指定页面（相当于执行 wx.reLaunch 到指定页）

基础库与客户端之间的关系 小程序的能力需要微信客户端来支撑，每一个基础库都只能在对应的客户端版本上运行，高版本的基础库无法兼容低版本的微信客户端。 关于基础库的兼容方法，可以查看「兼容处理」章节。 基础库更新时机 为了避免新版本的基础库给线上小程序带来未知的影响，微信客户端都是携带 上一个稳定版 的基础库发布的。 在新版本客户端发布后，我们再通过后台灰度新版本基础库，灰度时长一般为 12 小时，在灰度结束后，用户设备上才会有新版本的基础库。 以微信 6.5.8 为例，客户端在发布时携带的是 1.1.1 基础库(6.5.7 上已全量的稳定版)发布，在 6.5.8 发布后，我们再通过后台灰度 1.2.0 基础库。 基础库版本分布 iOS 基础库版本 用户占比 1.4.0 1.88% 1.3.0 80.74% 1.2.6 0.00% 1.2.5 7.29% 1.2.4 0.00% 1.2.3 0.00% 1.2.2 0.00% 1.2.1 0.00% 1.2.0 0.00% 1.1.1 6.75% 1.1.0 0.00% 1.0.1 3.34% 1.0.0 0.00% (数据截止 2017-07-10) Android 基础库版本 用户占比 1.4.0 3.20% 1.3.0 51.24% 1.2.6 0.00% 1.2.5 37.03% 1.2.4 0.58% 1.2.3 0.00% 1.2.2 0.02% 1.2.1 0.00% 1.2.0 0.00% 1.1.1 4.33% 1.1.0 0.00% 1.0.1 2.05% 1.0.0 1.55% (数据截止 2017-07-10)

微信 Andoid 6.5.10 开始，我们提供了 Trace 导出工具，开发者可以在开发者工具 Trace Panel 中使用该功能。 使用方法 PC 上需要先安装adb工具，可以参考一些主流教程进行安装，Mac 上可使用 brew 直接安装。 确定adb工具已成功安装后，在开发者工具上打开 Trace Panel，将 Android 手机通过 USB 连接上 PC，点击「Choose Devices」，此时手机上可能弹出连接授权框，请点击「允许」。 选择设备后，在手机上打开你需要调试的开发版小程序，通过右上角菜单，打开性能监控面板，重启小程序； 重启后，在小程序上进行操作，完成操作后，通过右上角菜单，导出 Trace 数据； 此时开发者工具 Trace Panel 上会自动拉取 Trace 文件，选择你要分析的 Trace 文件即可； 可以通过adb devices命令确定设备是否已和 PC 建立起连接 性能面板 从微信 6.5.8 开始，我们提供了性能面板让开发者了解小程序的性能。开发者可以在开发版小程序下打开性能面板，打开方法：进入开发版小程序，进入右上角更多按钮，点击「显示性能窗口」。 性能面板指标说明 指标 说明 CPU 小程序进程的 CPU 占用率，仅 Android 下提供 内存 小程序进程的内存占用（Total Pss)，仅 Android 下提供 启动耗时 小程序启动总耗时 下载耗时 小程序包下载耗时，首次打开或资源包需更新时会进行下载 页面切换耗时 小程序页面切换的耗时 帧率/FPS   首次渲染耗时 页面次首次渲染的耗时 再次渲染耗时 页面再次渲染的耗时（通常由开发者的 setData 操作触发） 数据缓存 小程序通过 Storage 接口储存的缓存大小

WXSS WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式。 WXSS用来决定WXML的组件应该怎么显示。 为了适应广大的前端开发者，我们的WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，我们对CSS进行了扩充以及修改。 与css相比我们扩展的特性有： 尺寸单位 样式导入 尺寸单位 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx 建议：开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。 样式导入 使用@import语句可以导入外联样式表，@import跟需要导入的外联样式表的相对路径，用;表示语句结束。 示例代码： /** common.wxss **/ .small-p{ padding:5px; } /** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; } 内联样式 框架组件上支持使用style、class属性来控制组件的样式。 style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。 <view style="color:{{color}};" /> class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 <view class="normal_view" /> 选择器 目前支持的选择器有： 选择器 样例 样例描述 .class .intro 选择所有拥有class=”intro”的组件 #id #firstname 选择拥有id=”firstname”的组件 element view 选择所有view组件 element, element view checkbox 选择所有文档的view组件和所有的checkbox组件 ::after view::after 在view组件后边插入内容 ::before view::before 在view组件前边插入内容 全局样式与局部样式 定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。

基本运算符 示例代码： var a = 10, b = 20; // 加法运算 console.log(30 === a + b); // 减法运算 console.log(-10 === a - b); // 乘法运算 console.log(200 === a * b); // 除法运算 console.log(0.5 === a / b); // 取余运算 console.log(10 === a % b); 加法运算（+）也可以用作字符串的拼接。 var a = '.w' , b = 'xs'; // 字符串拼接 console.log('.wxs' === a + b); 一元运算符 示例代码： var a = 10, b = 20; // 自增运算 console.log(10 === a++); console.log(12 === ++a); // 自减运算 console.log(12 === a--); console.log(10 === --a); // 正值运算 console.log(10 === +a); // 负值运算 console.log(0-10 === -a); // 否运算 console.log(-11 === ~a); // 取反运算 console.log(false === !a); // delete 运算 console.log(true === delete a.fake); // void 运算 console.log(undefined === void a); //...

WXS 模块 WXS 代码可以编写在 wxml 文件中的<wxs> 标签内，或以 .wxs 为后缀名的文件内。 模块 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。 .wxs 文件 在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。 示例代码： // /pages/comm.wxs var foo = "'hello world' from comm.wxs"; var bar = function(d) { return d; } module.exports = { foo: foo, bar: bar }; 上述例子在 /pages/comm.wxs 的文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。 module 对象 每个 wxs 模块均有一个内置的 module 对象。 属性 exports: 通过该属性，可以对外共享本模块的私有变量与函数。 示例代码： // /pages/tools.wxs var foo = "'hello world' from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg"; {{tools.msg}} {{tools.bar(tools.FOO)}} 页面输出： some msg 'hello world' from tools.wxs require 函数 在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。 引用的时候，要注意如下几点： 只能引用...

什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如id, dataset, touches。 事件的使用方式 在组件中绑定一个事件处理函数。 如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。 <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 在相应的Page定义中写上相应的事件处理函数，参数是event。 Page({ tapName: function(event) { console.log(event) } }) 可以看到log出来的信息大致如下 { "type": "tap", "timeStamp":895, "target": { "id": "tapTest", "dataset": { "hi": "WeChat" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi": "WeChat" } }, "detail": { "x":53, "y":14 }, "touches": [{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14, }], "changedTouches": [{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14, }], } 事件详解 事件分类 事件分为冒泡事件和非冒泡事件 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 WXML的冒泡事件列表： 类型 触发条件 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longtap 手指触摸后，超过350ms再离开 注：除上表之外的其他组件自定义事件都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件) 事件绑定 事件绑定的写法同组件的属性，以key、value的形式。 key以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。 如在下边这个例子中，点击inner view会先后触发handleTap3和handleTap2(因为tap事件会冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父节点传递)，点击middle view会触发handleTap2，点击outter view会触发handleTap1。 <view id="outter" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3"> inner view...