参考链接

官方API文档
官方API文档-小程序启动到运行的流程

正文

wxml(类似HTML)

js

json

wxss(类似CSS)

样式渲染分为静态渲染和动态渲染

<!--静态渲染-->
<view style="color:{{color}};" />
<!--静态渲染-->
<view class="normal_view" />

小程序暂时仅支持部分选择器

仅支持以下部分选择器

事件

小程序事件详解

事件分为冒泡事件和非冒泡事件，事件都是在wxml里面触发事件的，事件触发都是以bind和catch开头的,事件需要在page中定义同名函数,handleTap1、handleTap2和handleTap3都是事件函数名；bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

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

冒泡事件

非冒泡事件

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件)

事件的捕获阶段（ 1.5.0开始才会有）

先捕获，后触发事件

在下面的代码中，点击 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>

event对象参数

BaseEvent 基础事件对象属性列表：

参数详解

type

代表事件的类型。

timeStamp

页面打开到触发事件所经过的毫秒数。

target

触发事件的源组件。

currentTarget

事件绑定的当前组件。

说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。
currentTarget

事件绑定的当前组件。

说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

dataset（用户自定义的属性）

自定义的属性会随event传递给事件函数， 以data开头，单词必须以“-”分隔，会自动转大写单词会自动转小写

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> 
DataSet Test 
</view>
<!--
在js文件中
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})
-->

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

touches

touches是一个数组，每一个元素都是一个touch对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组），表示停留在屏幕的触摸事件

CanvasTouch 对象

changedTouches

数据参数跟touches一样，表示触摸的变化，从无到有（touchstart），从开始到移动(touchmove)，从有到无（touchend、touchcancel）

注意特殊事件

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

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。