Skip to content

Latest commit

 

History

History
633 lines (578 loc) · 47.2 KB

README.md

File metadata and controls

633 lines (578 loc) · 47.2 KB
Raw

wechat-demo - 一个从0开始的微信小程序

整体结构

1.根路径下需要创建三个文件，分别是 app.json , app.wxss , app.js

其中app.json和app.js 必须存在，会在小程序启动时只执行一次且文件名不可以更改。

2.每个页面由.wxml、.wxss、.js、.json 组成，且wxml和js必须存在，而且这4个文件的文件名必须一致，可以同目录名不同，但为了便于管理，最好一致

根目录文件详细说明

app.json

1.pages 设置页面路径，必填项，一个数组，各元素为路径+文件名(不加文件后缀)，默认第一个路径为首页

2.window 设置小程序状态栏、导航条、标题、窗口背景色等系统级样式

  • navagationBarBackgroundColor ： 导航栏背景色，16进制颜色值
  • navigationBarTextStyle ：导航栏标题颜色，仅支持black/white
  • navigationBarTitleText ：导航栏标题文字
  • navigationStyle ：导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 微信版本 6.6.0 navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用） 可方便切到旧视觉
  • backgroundColor ：窗口背景色 16进制颜色值
  • backgroundTextStyle ：下拉背景字体、Loading图的样式 仅支持dark/light
  • backgroundColorTop ：顶部窗口的背景色，仅 iOS 支持 微信版本 6.5.16
  • backgroundColorBottom ：底部窗口的背景色，仅 iOS 支持 微信版本 6.5.16
  • enablePullDownRefresh ：是否开启下拉刷新,默认为false 类型为boolean
  • onReachBottomDistance ：页面上拉触底事件触发时距页面底部距离，单位为px 类型为number

3.tabBar 指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

  • 注意：
  • 当设置 position 为 top 时，将不会显示 icon
  • tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
  • 属性说明
  • color tab上文字的默认颜色，16进制颜色值
  • selectedColor 选中文字的颜色 16进制颜色值
  • backgroundColor tab的背景色 16进制颜色值
  • borderStyle tabbar上边框的颜色， 仅支持 black/white
  • list tab 的列表，其值是一个数组，数组中每一项是一个对象，代表一个tab的相关配置 * pagePath 页面路径，必须在 pages 中先定义 * text tab 上按钮文字 * iconPath 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片 * selectedIconPath 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
  • position tab栏的位置，可选值 bottom、top

4.networkTimeout 小程序中各种网络请求api的超时时间只能通过networkTimeout统一设置，不能在api中单独设置

  • request wx.request的超时时间，单位毫秒，默认为：60000
  • connectSocket wx.connectSocket的超时时间，单位毫秒，默认为：60000
  • uploadFile wx.uploadFile的超时时间，单位毫秒，默认为：60000
  • downloadFile wx.downloadFile的超时时间，单位毫秒，默认为：60000

5.debug 是否开启调试模式，默认关闭

小程序逻辑

  • 分为页面逻辑文件和小程序逻辑文件，app.js便是小程序文件，在其中，通过App()函数注册小程序生命周期函数、全局方法和全局属性，已注册的小程序可以在其他逻辑层代码中通过getApp()获取
  • App()函数用于注册一个小程序，参数为一个对象，在这个参数对象中可以注册自定义方法和属性供全局使用，且此函数必须在App.js中注册唯一的一个。
  • 参数属性--以下3个方法为生命周期函数，尽量不要私自调用生命周期函数，除非非常熟悉
    • onLaunch 监听小程序初始化，当小程序初始化完成时触发，且全局只会触发一次
    • onShow 监听小程序显示，当小程序启动或从后台进入前台显示时会触发
    • onHide 监听小程序隐藏，当小程序从前台进入后台时触发
  • 其他 可以添加任意的函数和数据到object参数中，这些属性会被注册到小程序对象中，其他逻辑文件可以通过getApp()函数获取已注册的小程序实例
  • 在App()注册的函数中，可以直接使用this获取小程序实例，不需要通过getApp()获取，当获取实例后，可以获取注册的属性、调用注册的方法

小程序生命周期函数执行时机

  • 当启动一个程序时，首先会触发onLaunch和onShow方法，然后通过app.json的pages属性注册相应的页面，最后根据默认路径加载首页
  • 当用户点击左上角的关闭或者home键离开微信时，小程序并没有销毁，而是进入了后台，触发了onHide方法
  • 当再次唤醒微信或者在微信中打开小程序的时候，是从后台进入前台，触发onShow方法
  • 只有当小程序进入后台一定时间，或者系统资源占用锅盖，才会真正被销毁

框架页面

页面配置文件

  • 页面配置文件和框架配置文件一样，是一个json文件，不同的是，页面配置文件是非必要存在的
  • 页面配置文件的配置项只有window，控制当前页面的窗口表现，window的属性和app.json一致。渲染时，页面的window配置项会覆盖app.json中的相同配置项。由于页面的json只能配置window相关属性，所以编写时直接写出属性而不用写window这个键。

页面逻辑文件

  • 主要功能有：设置初始化数据，注册当前页面生命周期函数、注册事件处，理函数等。小程序的逻辑层文件是Js文件，所有的逻辑文件包括app.js最终会打包成一个js文件在小程序启动时运行，知道小程序销毁。
  • 每个逻辑文件有独立的作用域，且具备模块化的能力。
  • js文件是运行在纯js引擎中而非浏览器中，所以一些浏览器提供的特有对象，例如document、window等在小程序时无法使用的。同理的jq、zepto也不能使用，同时不能通过操作DOM改变页面。

1.注册页面

  • 通过Page()函数注册页面，指定页面的初始数据、生命周期函数、事件处理函数等。参数为一个object对象
  • data 页面的初始数据，数据格式必须是可转成json格式的对象类型。当页面第一次渲染时，data会以json的形式由逻辑层传至渲染层，渲染层可以通过wxml对数据进行绑定
  • onLoad 页面加载时触发，一个页面只会调用一次，接受页面参数，可以获取wx.navigateTo、wx.redirectTo以及其中的query参数
  • onShow 页面显示时触发，每次打开页面都会调用一次
  • onReady 页面初次渲染完成时触发，一个页面生命周期中只会调用一次，代表当前页面已经准备完毕，可以和视图层进行交互。
  • onHide 页面隐藏时触发
  • onUnload 页面卸载时触发
  • onPullDownRefresh 页面相关事件处理函数，用户下拉时触发。使用时需要将app.json中window中的enablePullDownRefresh设置为true。当处理完数据刷新后，可以调用wx.stopPullDownRefresh停止当前页面的下拉刷新。
  • onReachBottom 页面上拉触底事件的处理函数
  • 其他 可以添加任意的函数或数据到object参数中。可以用this访问这些函数和数据。自定义函数可与渲染层中的组件进行事件绑定(类似于react中的setState())

当发生路由切换时，页面栈和生命周期函数的关系

  • 小程序初始化 默认页面入栈，依次触发onLoad、onShow、onReady
  • 打开新页面 新页面入栈，依次触发新页面的onLoad、onShow、onReady
  • 页面重定向 当前页面出栈并卸载，触发当前页面的onUnload，新页面入栈，触发新页面的onLoad、onShow、onReady
  • 页面返回 页面不断出栈并卸载，触发当前弹出页面onUnload，直到返回目标页面，新页面入栈，触发新页面onShow方法
  • tab切换 当前页面出栈但不卸载，仅触发onHide方法，新页面入栈，如果当前页面是新加载的，触发onLoad、onShow、onReady。如果当前页面已加载过，触发onShow
  • 程序从前台到后台 触发当前页面onHide方法，触发app onHide方法
  • 程序从后台到前台 触发小程序onShow，触发页面onShow

获取当前页面栈

  • getCurrentPages()函数用于获取当前页面栈的实例，页面栈以数组形式按栈书序给出，第一个元素为首页，最后一个元素为当前页。

事件处理函数

  • 页面对象中注册的函数可以和视图层中的组件进行绑定，当达到触发条件，就会执行Page中定义的相应事件。

触发视图层渲染

  • 页面首次加载时，框架会结合初始化数据渲染页面，在逻辑层中需要调用Page.prototype.setData()进行数据的修改，这样数据会从逻辑层发送到视图层，触发视图层的重绘，同时会修改Page的data值。setData接收一个object。当object中的key和this.data中的key不同会触发视图层的渲染。方法会自动将this.data中的key对应的值变为object中的key值
  • object参数中的key可以按数据路径的形式给出，例如array[5].info、obj.key.subkey，并且这样使用，不需要在this.data中预先定义。包括setData中也可以这样写。而且还能修改一个wxml中已绑定但未在data中定义的数据。

页面生命周期

  • 当逻辑层线程触发onLoad、onShow方法后会把出初始数据data传送给视图层线程，视图层完成第一次渲染后触发逻辑层onReady，之后通过setData方法主动触发视图层渲染，当页面被调往后台，触发onHide，这时候逻辑层并没有被销毁，仍然可以通过代码控制视图层渲染，只是可能不会在界面中表现出来。当页面从后台回到前台，触发onShow方法，最后页面销毁时，触发onUnload。在路由方式中只有页面重定向和页面返回会结束当前页面生命周期，进去一个已加载的页面触发的是onShow，而不是onLoad和onReady。

页面结构文件(WXML)

  • 是框架设计的一套标记语言，用于渲染界面，渲染原理和React Native思路一致，通过一套标记语言，在不同平台被解析为不同端的渲染文件。
  • 因为WXML语言最终会转译为宿主端对应的语言，所以WXML中一定是小程序定义的标签，不能使用自定义标签，这样才能正确的被转译。
  • WXML具有数据绑定、列表渲染、条件渲染、模板、事件等能力。

  • 数据绑定

* 页面渲染时，将WXML文件同对应Page的`data`进行绑定,使用`{{}}`进行绑定
* 组件属性是boolean时，不能直接写`checked="false"`,这样是checked的值是字符串false,转成boolean类型是true,要写为`checked="{{false}}"`
* 组合：直接将数据作为value值进行组合、用`...`展开对象、对象的key和value相同，可以只写key值，当一个组合中有相同属性名时，后面的属性会覆盖前面的属性

  • 条件渲染

  • wx:if="{{判断条件}}" 成立时渲染,后两者必须配合wx:if使用
  • wx:elif="{{判断条件}}"
  • wx:else
  • wx:if和hidden wx:if控制是否渲染条件内的模板，当其条件值切换时，会触发局部渲染以确保条件块在切换时销毁或重新渲染，如果在初始渲染条件为false时，框架什么都不做，在条件第一次为真时才渲染 hidden是控制组件是否显示，组件始终会被渲染，只是简单的控制显示和隐藏，并不会触发重新渲染和销毁。所以在频繁切换的场景下不要使用wx:if会造成更大的损耗，而是改为使用hidden。

  • 列表渲染

  • wx:for 遍历数组，下标变量为index,项目名为item {{index}}:{{item}}
  • wx:for-index和wx：for-item进行变量名的修 wx:for-index="myIndex" wx:for-item="myItem" {{myIndex}}:{{myItem.name}}

  • 模板

  • 相同的结构在不同的地方反复出现，可以将相同的布局代码片段放置到一个模板中，在不同的地方传入对应的数据进行渲染
  • <template/> 定义模板，设置<template/>的name属性，指定模板名称即可
  • 在<template/>上设置is属性指向需要使用的模板，设置data属性，将模板所需的变量传入，模板拥有自己的作用域，只能使用data属性传入的数据，不能直接使用Page中的data数据，模板is属性支持数据绑定，可以通过属性绑定动态决定使用哪个模板,<template is="{{templateName}}" data="myData">
  • 模板可以嵌套使用

  • 事件

  • 冒泡事件：touchstart touchmove touchcancel touchend tap longtap
  • 其余组件自定义事件无特殊声明都是非冒泡事件
  • 事件绑定 bind/catch+事件名 均为小写 bind不阻止冒泡，catch阻止冒泡
  • 事件对象 当组件触发事件时，事件处理函数会收到一个事件对象
  • 引用 * 一个WXML通过import/include import引入只接受模板的定义，忽略模板定义之外的所有内容，include引入除<template/>以外的代码直接拷贝到<include/>位置 import引入模板定义,include引入组件 * <import src="b.wxml"/> src为相对路径，import引用有作用域概念，只能使用直接引入的定义模板，不能使用间接引入的定义模板
//wx:if 是一个控制属性，可以写在任何组件标签上
//但当需要包装多个组件且不想影响布局，就需要使用<block/>标签将需要包装的组件放置在里面，通过wx:if进行判断
//<block/>不是组件仅仅是一个包装元素，页面渲染过程中不做任何渲染
 <block wx:if="{{true}}">
     <view>view组件</view>
     <image/>
 </block>

页面样式文件(wxss)

  • rpx rem 相对单位，最后会换算成px wxss规定屏幕宽度为750rpx/20rem,所以在iphone6中 750rpx=375px 1rpx=0.5px/20rem=375px 1rem=18.75px
  • @import引入其他wxss文件，以;表示结束

模块化

  • module.exports = {} 导出模块，小程序中一个js就是一个模块
  • require(path) 引入

组件

  • 组件的属性名都是小写，以-连接
  • 组件属性分为所有组件都有的共同属性和组件自定义的特殊属性
  • 共同属性：id class style hidden data-*(自定义属性，组件上触发事件时，会发送给事件处理函数，事件处理函数可以通过dataset获取) bind*/catch*

view组件

  • hover 是否启动点击态 默认值为false
  • hover-class 指定按下去的样式，当hover-class="none"时，没有点击效果，默认值为none
  • hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态 1.5.0+支持 默认值false
  • hover-start-time 按住后多久出现点击态，单位毫秒，默认值50
  • hover-stay-time 手指松开后点击态保留时间，单位毫秒，默认值400

scroll-view组件

  • 在<view/>的基础上添加了滚动相关的属性
  • scroll-x 允许横向滚动，默认值false
  • scroll-y 允许纵向滚动，默认值false
  • upper-threshold 距顶部/左边多远时，触发scrolltoupper事件，默认值50，单位px
  • lower-threshold 距底部/右边多远时，触发scrolltolower事件，默认值50，单位px
  • scroll-top 设置竖向滚动条位置
  • scroll-left 设置横向滚动条位置
  • scroll-into-view 值应为某子元素id,滚动到该元素时，元素顶部对齐滚动区域顶部
  • scroll-with-animation 在设置滚动条位置时使用动画过渡
  • enable-back-to-top iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 默认值false
  • bindscrolltoupper 滚动到顶部/左边 触发scrolltoupper事件
  • bindscrolltolower 滚动到底部/右边 触发scrolltolower事件
  • bindscroll 滚动时触发 event.detail = {scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}
  • <textarea /> <video/> <map/> <convas> 不能再<scroll-view/>中使用
  • 使用纵向滚动时，需要给<scroll-view/>一个固定高度
  • scroll-into-view 的优先级高于 scroll-top
  • 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh,若要使用下拉刷新，请使用页面的滚动，而不是scroll-view

滑动视图组件(和组成)

  • <swiper-item/> 内部能放置任何组件，默认宽高自动设置为100%
  • <swiper/>属性
    • indicator-dots 是否显示面板指示点，默认为false
    • indicator-color 指示点的颜色，1.1.0+支持
    • indicator-active-color 当前选中的指示点颜色，1.1.0+支持
    • autoplay 是否自动切换，默认为false
    • current 当前所在页面的index,默认为0
    • current-item-id 当前所在滑块的item-id,不能与current被同时指定 1.9.0+支持，值类型string
    • interval 自动切换时间间隔，默认为5000
    • duration 滑动动画时长，默认为500
    • circular 是否采用衔接滑动，默认为false
    • vertical 滑动方向是否为纵向
    • previous-margin 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 1.9.0+ string("0px")
    • next-margin 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0+ string("0px")
    • display-multiple-items 同时显示的滑块数量 1.9.0+
    • skip-hidden-item-layout 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 1.9.0+
    • bindchange current改变时会触发change事件，event.detail={current: current, source: source}
    • bindanimationfinish 动画结束时会触发 animationfinish 事件，event.detail 同上 1.9.0+
    • 从1.4.0开始，change事件返回detail包含一个source字段，表示导致变更的原因 （autoplay 自动播放导致swiper变化； touch 用户划动引起swiper变化； 其他原因将用空字符串表示。）
    • swiper-item 属性item-id 该 swiper-item 的标识符 1.9.0+ string
  • 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起

基础组件

icon
  • type icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  • size icon的大小，单位px size="40"并不用写px
  • color icon的颜色，同css的color
  • 自定义<icon/>组件 使用雪碧图的方式进行实现，也就是background-image和background-position进行组合实现
text
  • 用于文本内容的展示。只有<text/>节点内部的内容能被长按选中
  • 行内元素，文本中的内容支持转义字符
  • 只支持<text/>嵌套
  • 属性
    • selectable 文本是否可选，默认false ,1.1.0+
    • space 显示连续空格 1.4.0+ ensp 中文字符空格一半大小 emsp 中文字符空格大小 nbsp 根据字体设置的空格大小
    • decode 是否解码，默认false 1.4.0+
    • decode可以解析的有 &nbsp; &lt; &gt; &amp; &apos;``&ensp; &emsp;
progress
  • 显示进度状态
  • 块级元素
  • 属性
    • percent 当前进度占所有进度的百分比，取值0-100
    • show-info 是否在进度条右侧显示百分比，默认false
    • stroke-width 进度条线的宽度，单位px，默认值6
    • color 进度条颜色，默认值#09BB07
    • active 渲染时时候开启进度条从左到右的动画，默认false。开启后每次修改percent触发进度条重新渲染，都会从左到右显示动画
    • activeColor 已选择的进度条的颜色
    • backgroundColor 未选择的进度条的颜色
    • active-mode backwards: 动画从头播；forwards：动画从上次结束点接着播 1.7.0+
radio-group和radio
  • <radio/>的选中态不能直接获取，需要通过<radio-group/>的change事件捕获
  • <radio-group/> 可以包含其他标签，会仅对<radio/>产生影响
  • bindchange 绑定<radio-group/>的change事件，当选中项发生变化时触发，event.detail={value:选中项radio的value}
  • <radio/>的属性
    • value <radio/>的标识，当选中时，change事件会携带<radio/>的value
    • checked 当前<radio/>是否选中，在一个<radio-group/>内只能有一个<radio/>的checked是true。设置多个，默认选中最后一个为true的单选项。默认为false
    • disabled 是否禁用 禁用后不能点击 默认false
    • color 颜色
checkbox-group和checkbox
  • bindchange <checkbox-group/>中选中项发生改变是触发 change 事件，event.detail = {value:[选中的checkbox的value的数组]}
  • <checkbox/>的属性
    • value <checkbox/>的标识，当选中时，change事件会携带<checkbox/>的value
    • checked 当前<checkbox/>是否选中,可用来设置默认选中,允许多个<checkbox/>的checked为true
    • disabled 是否禁用 禁用后不能点击 默认false
    • color 颜色
switch
  • checked 是否选中，默认为false
  • type 样式，有效值：switch, checkbox
  • bindchange checked 改变时触发 change 事件，event.detail={ value:checked}
label
  • 用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
  • for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
  • 目前可以绑定的控件有：<button/>,<checkbox/>, <radio/>, <switch/>
slider
  • 小程序只提供了水平形式的滑动选择器
  • min 最小值 默认值0
  • max 最大值 默认值100
  • step 步长，取值必须大于 0，并且可被(max - min)整除 默认值1
  • disabled 是否禁用
  • value 当前取值
  • color 背景条的颜色（请使用 backgroundColor）
  • selected-color 已选择的颜色（请使用 activeColor）
  • activeColor 已选择的颜色
  • backgroundColor 背景条的颜色
  • block-size 滑块的大小，取值范围为 12 - 28 1.9.0+
  • block-color 滑块的颜色 1.9.0+
  • show-value 是否显示当前 value
  • bindchange 完成一次拖动后触发的事件，event.detail = {value: value}
  • bindchanging 拖动过程中触发的事件，event.detail = {value: value} 1.7.0+
picker
  • 从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
普通选择器：mode = selector
  • range mode为 selector 或 multiSelector时，range 有效
  • range-key 当 range 是一个 Object Array 时，通过 range-key来指定 Object 中 key 的值作为选择器显示内容
  • value value 的值表示选择了 range 中的第几个（下标从 0 开始） 可以用来设置默认值
  • bindchange value 改变时触发 change 事件，event.detail = {value: value}
  • disabled 是否禁用 默认值false
  • bindcancel 取消选择或点遮罩层收起 picker 时触发 1.9.90+
多列选择器：mode = multiSelector（最低版本：1.4.0）
  • range [] mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
  • range-key 当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 string e.g.range="{{objectArray}}" range-key="name"
  • value value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
  • bindchange value 改变时触发 change 事件，event.detail = {value: value},value是一个数组，长度是二维数组的长度，每一项表示每一列选中的项目的索引，当点击确定时触发
  • bindcolumnchange 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 (下标从0开始)
  • bindcancel 取消选择时触发 1.9.90+
  • disabled false 是否禁用
时间选择器：mode = time
  • value 表示选中的时间，格式为"hh:mm"
  • start 表示有效时间范围的开始，字符串格式为"hh:mm"
  • end 表示有效时间范围的结束，字符串格式为"hh:mm"
  • bindchange value 改变时触发 change 事件，event.detail = {value: value}
  • bindcancel 取消选择时触发 1.9.90+
  • disabled false 是否禁用
日期选择器：mode = date
  • value 表示选中的日期，格式为"YYYY-MM-DD
  • start 表示有效日期范围的开始，字符串格式为"YYYY-MM-D
  • end 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
  • fields 有效值 year,month,day，表示选择器的粒度 默认值day
  • bindchange 改变时触发 change 事件，event.detail = {value: value}
  • bindcancel 取消选择时触发 1.9.90+
  • disabled false 是否禁用
省市区选择器：mode = region（最低版本：1.4.0）
  • value 表示选中的省市区，默认选中每一列的第一个值
  • custom-item 可为每一列的顶部添加一个自定义的项 1.5.0+
  • bindchange 改变时触发 change 事件，event.detail = {value: value}
  • bindcancel 取消选择时触发 1.9.90+
  • disabled false 是否禁用
picker-view
  • 嵌入页面的滚动选择器，自定义滚动选择器
  • 由<picker-view/>和<picker-view-column/>构成
  • <picker-view/>中仅可放置<picker-view-column/>，其他节点不会显示。<picker-view-column/>创造列,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
  • 滚动时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
  • value 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
  • indicator-style 设置选择器中间选中框的样式
  • indicator-class 设置选择器中间选中框的类名 1.1.0
  • mask-style 设置蒙层的样式 1.5.0+
  • mask-class 设置蒙层的类名 1.5.0+
  • bindchange 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
input
  • value 输入框的初始内容
  • type input 的类型
    • text 文本输入键盘 * number 数字输入键盘 * idcard 身份证输入键盘 * digit 带小数点的数字键盘
  • password false 是否是密码类型，密码类型没有拼音，是字母和数字还有字符组成
  • placeholder 输入框为空时占位符
  • placeholder-style 指定 placeholder 的样式
  • placeholder-class 指定 placeholder 的样式类,默认值"input-placeholder"
  • disabled false 是否禁用
  • maxlength 最大输入长度，设置为 -1 的时候不限制最大长度,默认值140
  • cursor-spacing 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
  • auto-focus (即将废弃，请直接使用 focus )自动聚焦，拉起键盘
  • focus false 获取焦点
  • confirm-type 设置键盘右下角按钮的文字 1.1.0+ 默认值'done'
    • send 右下角按钮为“发送” * search 右下角按钮为“搜索” * next 右下角按钮为“下一个” * go 右下角按钮为“前往” * done 右下角按钮为“完成”
  • confirm-hold false 点击键盘右下角按钮时是否保持键盘不收起 1.1.0+
  • cursor 指定focus时的光标位置 1.5.0+
  • selection-start 光标起始位置，自动聚集时有效，需与selection-end搭配使用 1.9.0+
  • selection-end 光标结束位置，自动聚集时有效，需与selection-start搭配使用 1.9.0+
  • adjust-position true 键盘弹起时，是否自动上推页面 1.9.90+
  • bindinput 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
  • bindfocus 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
  • bindblur 输入框失去焦点时触发，event.detail = {value: value}
  • bindconfirm 点击完成按钮时触发，event.detail = {value: value}
  • 微信版本 6.3.30, focus 属性设置无效；
  • 微信版本 6.3.30, placeholder 在聚焦时出现重影问题；
  • input 组件是一个 native 组件，字体是系统字体，所以无法设置 font-family；
  • 在 input 聚焦期间，避免使用 css 动画；
textarea
  • 自闭和标签，值需要赋值给value属性，而不是被标签包裹
  • value 输入框的内容
  • placeholder 输入框为空时占位符
  • placeholder-style 指定 placeholder 的样式
  • placeholder-class 指定 placeholder 的样式类,默认值textarea-placeholder
  • disabled false 是否禁用
  • maxlength 最大输入长度，设置为 -1 的时候不限制最大长度 ,默认值140
  • auto-focus false 自动聚焦，拉起键盘。
  • focus false 获取焦点
  • auto-height false 是否自动增高，设置auto-height时，style.height不生效
  • fixed false 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
  • cursor-spacing 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
  • cursor 指定focus时的光标位置 1.5.0+
  • show-confirm-bar true 是否显示键盘上方带有”完成“按钮那一栏 1.6.0+
  • selection-start -1 光标起始位置，自动聚集时有效，需与selection-end搭配使用 1.9.0+
  • selection-end -1 光标结束位置，自动聚集时有效，需与selection-start搭配使 1.9.0+
  • adjust-position true 键盘弹起时，是否自动上推页面 1.9.90
  • bindfocus 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
  • bindblur 输入框失去焦点时触发，event.detail = {value, cursor}
  • bindlinechange 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
  • bindinput 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， bindinput 处理函数的返回值并不会反映到 textarea 上
  • bindconfirm 点击完成时， 触发 confirm 事件，event.detail = {value: value}
button
  • 当<button/>被<form/>包裹时，可以通过设置form-type属性触发表单对应的事件
  • size 按钮的大小 default mini
  • type 按钮的样式类型 primary default warn
  • plain false 按钮是否镂空，背景色透明
  • disabled false 是否禁用
  • loading false 名称前是否带 loading 图标
  • form-type 用于 组件，点击分别会触发 组件的 submit/reset 事件 submit 提交表单 reset 重置表单
  • open-type 微信开放能力 1.1.0
    • contact 打开客服会话 1.1.0
    • share 触发用户转发 1.2.0
    • getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 1.3.0
    • getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 1.2.0
    • launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 1.9.5
  • hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果，默认值 button-hover
  • hover-stop-propagation false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
  • hover-start-time 按住后多久出现点击态，单位毫秒
  • hover-stay-time 手指松开后点击态保留时间，单位毫秒
  • lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 生效机制：open-type="getUserInfo" 1.3.0
  • bindgetuserinfo 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致 生效机制：open-type="getUserInfo" 1.3.0
  • session-from 会话来源 生效机制：open-type="contact"" 1.4.0
  • send-message-title 当前标题 会话内消息卡片标题 生效机制：open-type="contact" 1.5.0
  • send-message-path 当前分享路径 会话内消息卡片点击跳转小程序路径 生效机制：open-type="contact" 1.5.0
  • send-message-img 会话内消息卡片图片 生效机制：open-type="contact" 1.5.0
  • show-message-card false 显示会话内消息卡片 生效机制：open-type="contact" 1.5.0
  • bindcontact 客服消息回调 生效机制：open-type="contact" 1.5.0
  • bindgetphonenumber 获取用户手机号回调 生效机制：open-type="getphonenumber" 1.2.0
  • app-parameter 打开 APP 时，向 APP 传递的参数 生效机制：open-type="launchApp" 1.9.5
  • binderror 当使用开放能力时，发生错误的回调 生效机制：open-type="launchApp" 1.9.5
  • button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  • bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
  • 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
  • <button><image src=""/></button>可以这样写嵌套多媒体的自定义按钮
form
  • 表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
  • 当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
  • report-submit 是否返回 formId 用于发送模板消息
  • bindsubmit 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
  • bindreset 表单重置时会触发 reset 事件

navigator 导航

  • 页面链接 类似于a标签 控制页面的跳转
  • url 应用内的跳转链接
  • open-type 跳转方式
    • navigate 对应 wx.navigateTo 的功能
    • redirect 对应 wx.redirectTo 的功能
    • switchTab 对应 wx.switchTab 的功能
    • reLaunch 对应 wx.reLaunch 的功能 1.1.0
    • navigateBack 对应 wx.navigateBack 的功能 1.1.0
  • delta 当 open-type 为 'navigateBack' 时有效，表示回退的层数
  • hover-class 默认值：navigator-hover 指定点击时的样式类，当hover-class="none"时，没有点击态效果
  • hover-stop-propagation false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
  • hover-start-time 按住后多久出现点击态，单位毫秒
  • hover-stay-time 手指松开后点击态保留时间，单位毫秒
  • navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子节点背景色应为透明色

image

  • 默认宽度300px、高度225px
  • src 图片资源地址
  • mode 默认值：'scaleToFill' 图片裁剪、缩放的模式
    • scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    • aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    • aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    • widthFix 宽度不变，高度自动变化，保持原图宽高比不变
    • top 不缩放图片，只显示图片的顶部区域
    • bottom 不缩放图片，只显示图片的底部区域
    • center 不缩放图片，只显示图片的中间区域
    • left 不缩放图片，只显示图片的左边区域
    • right 不缩放图片，只显示图片的右边区域
    • top left 不缩放图片，只显示图片的左上边区域
    • top right 不缩放图片，只显示图片的右上边区域
    • bottom left 不缩放图片，只显示图片的左下边区域
    • bottom right 不缩放图片，只显示图片的右下边区域
  • lazy-load false 图片懒加载。只针对page与scroll-view下的image有效 1.5.0
  • binderror 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
  • bindload 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

audio(不建议使用，从1.6.0不在维护)

  • 1.6.0 版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口
  • id audio 组件的唯一标识符
  • src 要播放音频的资源地址
  • loop false 是否循环播放
  • controls false 是否显示默认控件
  • poster 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
  • name 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
  • author 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
    • 1--获取资源被用户禁止，2--网络错误，3 --解码错误，4--不合适资源
  • binderror 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
  • bindplay 当开始/继续播放时触发play事件
  • bindpause 当暂停播放时触发 pause 事件
  • bindtimeupdate 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
  • bindended 当播放到末尾时触发 ended 事件

video

  • <video /> 默认宽度300px、高度225px，可通过wxss设置宽高。
  • src 要播放视频的资源地址
  • initial-time 指定视频初始播放位置 1.6.0
  • duration 指定视频时长 1.1.0
  • controls true 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
  • danmu-list Object Array 弹幕列表
  • danmu-btn false 是否显示弹幕按钮，只在初始化时有效，不能动态变更
  • enable-danmu false 是否展示弹幕，只在初始化时有效，不能动态变更
  • autoplay false 是否自动播放
  • loop false 是否循环播放 1.4.0
  • muted false 是否静音播放 1.4.0
  • page-gesture false 在非全屏模式下，是否开启亮度与音量调节手势 1.6.0
  • direction 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） 1.7.0
  • show-progress true 若不设置，宽度大于240时才会显示 1.9.0
  • show-fullscreen-btn true 是否显示全屏按钮 1.9.0
  • show-play-btn true 是否显示视频底部控制栏的播放按钮 1.9.0
  • show-center-play-btn true 是否显示视频中间的播放按钮 1.9.0
  • enable-progress-gesture true 是否开启控制进度的手势 1.9.0
  • objectFit 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
  • poster 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
  • bindplay 当开始/继续播放时触发play事件
  • bindpause 当暂停播放时触发 pause 事件
  • bindended 当播放到末尾时触发 ended 事件
  • bindtimeupdate 播放进度变化时触发，event.detail = {currentTime, duration}。触发频率 250ms 一次
  • bindfullscreenchange 当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal 1.4.0
  • bindwaiting 视频出现缓冲时触发 1.7.0
  • binderror 视频播放出错时触发 1.7.0
  • video 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
  • 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 video 组件。
  • css 动画对 video 组件无效。

camera(相关api：wx.createCameraContext)

  • 需要用户授权 scope.camera
  • device-position back 前置或后置，值为front, back
  • flash auto 闪光灯，值为auto, on, off
  • bindstop 摄像头在非正常终止时触发，如退出后台等情况
  • binderror 用户不允许使用摄像头时
  • camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image覆盖在上面。
  • 同一页面只能插入一个 camera 组件。
  • 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。

map

  • 地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
  • longitude 中心经度
  • latitude 中心纬度
  • scale 缩放级别，取值范围为5-18 默认16
  • markers 标记点
    • id marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
    • latitude 浮点数，范围 -90 ~ 90
    • longitude 浮点数，范围 -180 ~ 180
    • title 标注点名
    • iconPath 显示的图标 项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
    • rotate 旋转角度 顺时针旋转的角度，范围 0 ~ 360，默认为 0
    • alpha 标注的透明度 默认1，无透明，范围 0 ~ 1
    • width 标注图标宽度 默认为图片实际宽度
    • height 标注图标高度 默认为图片实际高度
    • callout 自定义标记点上方的气泡窗口 可识别换行符。 1.2.0 content 文本 1.2.0 color 文本颜色 1.2.0 fontSize 文字大小 1.2.0 borderRadius callout边框圆角 1.2.0 bgColor 背景色 1.2.0 padding 文本边缘留白 1.2.0 display 'BYCLICK':点击显示; 'ALWAYS':常显 1.2.0 textAlign 文本对齐方式。有效值: left, right, center 1.6.0
    • label 为标记点旁边增加标签 可识别换行符。 1.2.0 content 1.2.0 color 文本颜色 1.2.0 fontSize 文字大小 1.2.0 x label的坐标，原点是 marker 对应的经纬度 1.2.0 y label的坐标，原点是 marker 对应的经纬度 1.2.0 borderWidth 边框宽度 1.6.0 borderColor 边框颜色 1.6.0 borderRadius 边框圆 1.6.0 bgColor 背景色 1.6.0 padding 文本边缘留白 1.6.0 textAlign 文本对齐方式。有效值: left, right, center 1.6.0
    • anchor 经纬度在标注图标的锚点，默认底边中点 {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 1.2.0
  • covers 即将移除，请使用 markers
  • polyline 路线 指定一系列坐标点，从数组第一项连线至最后一项 points 经纬度数组 Array 是 [{latitude: 0, longitude: 0}] color 线的颜色 8位十六进制表示，后两位表示alpha值，如：#000000AA width 线的宽度 dottedLine 是否虚线 默认false arrowLine 带箭头的线 默认false，开发者工具暂不支持该属性 1.2.0 arrowIconPath 更换箭头图标 在arrowLine为true时生效 1.6.0 borderColor 线的边框颜色 1.2.0 borderWidth 线的厚度 1.2.0
  • circles 圆 在地图上显示圆 latitude 纬度 浮点数，范围 -90 ~ 90 longitude 经度 浮点数，范围 -180 ~ 180 color 描边的颜色 8位十六进制表示，后两位表示alpha值，如：#000000AA fillColor 填充颜色 8位十六进制表示，后两位表示alpha值，如：#000000AA radius 半径 strokeWidth 描边的宽度
  • controls 控件
    • id 控件id 在控件点击事件回调会返回此id
    • position 控件在地图的位置 控件相对地图位置 left 距离地图的左边界多远 默认为0 top 距离地图的上边界多远 默认为0 width 控件宽度 默认为图片宽度 height 控件高度 默认为图片高度
    • iconPath 显示的图标 项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
    • clickable 是否可点击 默认不可点击
  • include-points 缩放视野以包含所有给定的坐标点
  • show-location Boolean 显示带有方向的当前定位点
  • bindmarkertap 点击标记点时触发
  • bindcallouttap 点击标记点对应的气泡时触发 1.2.0
  • bindcontroltap 点击控件时触发
  • bindregionchange 视野发生变化时触发
  • bindtap 点击地图时触发
  • bindupdated 在地图渲染更新完成时触发 1.6.0

canvas

  • canvas 标签默认宽度300px、高度225px
  • 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
  • canvas-id canvas 组件的唯一标识符
  • disable-scroll false 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
  • bindtouchstart 手指触摸动作开始
  • bindtouchmove 手指触摸后移动
  • bindtouchend 手指触摸动作结束
  • bindtouchcancel 手指触摸动作被打断，如来电提醒，弹窗
  • bindlongtap 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
  • binderror 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}
  • canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
  • 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。
  • css 动画对 canvas 组件无效。
  • 避免设置过大的宽高，在安卓下会有crash的问题