微信小程序学习记录——4.框架-视图层

悠悠 2023-06-13 06:22 7阅读 0赞

### 文章目录 ###

*  1.WXML
 *   *   *  数据绑定
         *   *  简单绑定
             *  运算
             *  组合
         *  列表渲染
         *   *  wx:for
             *  block wx:for
             *  wx:key
         *  条件渲染
         *   *  wx:if
             *  block wx:if
             *  wx:if vs hidden
         *  模板
         *   *  定义模板
             *  使用模板
             *  模板的作用域
         *  引用
         *   *  import
             *   *  import 的作用域
             *  include
         *  事件
         *   *  什么是事件
             *  事件的使用方式
             *  事件分类
             *  事件绑定和冒泡
             *  事件的捕获阶段
             *  事件对象
             *   *  timeStamp
                 *  target
                 *  currentTarget
                 *  dataset
                 *  touches
                 *  Touch 对象
                 *  CanvasTouch 对象
                 *  changedTouches
                 *  detail
 *  2.WSX
 *   *  页面渲染
     *  数据处理
     *  模块
     *  .wxs 文件
     *   *  module 对象
         *  require函数
     *  \\ 标签
     *   *  module 属性
         *  src 属性
         *  注意
     *  变量
     *   *  概念
         *  变量名
         *  保留标识符
     *  注释
     *  运算符
     *   *  基本运算符
         *  一元运算符
         *  位运算符
         *  比较运算符
         *  等值运算符
         *  赋值运算符
         *  二元逻辑运算符
         *  其他运算符
         *  运算符优先级
     *  if语句
     *  switch 语句
     *  for 语句
     *  while 语句
     *  数据类型
     *   *  number
         *  string
         *  boolean
         *  object
         *  function
         *  arguments
         *  array
         *  date
         *  regexp
     *  数据类型判断
     *   *  constructor 属性
         *  typeof
     *  基础类库
     *   *  console
         *  Math
         *  JSON
         *  Number
         *  Date
         *  Global
 *  3.WXSS
 *   *   *  尺寸单位
         *  样式导入
         *  内联样式
         *  选择器
         *  全局样式与局部样式

# 1.WXML #

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

用以下一些简单的例子来看看 WXML 具有什么能力：

### 数据绑定 ###

<view> {
       {message}} </view>
    // page.js
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

#### 简单绑定 ####

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

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

**内容**

<view> {
       { message }} </view>
    Page({
      data: {
        message: 'Hello abc!'
      }
    })

**组件属性(需要在双引号之内)**

<view id="item-{ {id}}"> </view>
    Page({
      data: {
        id: 0
      }
    })

**控制属性(需要在双引号之内)**

<view wx:if="{ {condition}}"> </view>
    Page({
      data: {
        condition: true
      }
    })

**关键字(需要在双引号之内)**

*  **true**：boolean 类型的 true，代表真值。
 *  **false**： boolean 类型的 false，代表假值。

> **特别注意：不要直接写 `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中的内容为 `3 + 3 + d`。

**逻辑判断**

**字符串运算**

<view>{
       {"hello" + name}}</view>
    Page({
      data:{
        name: 'abc'
      }
    })

**数据路径运算**

<view>{
       {object.key}} {
       {array[0]}}</view>
    Page({
      data: {
        object: {
          key: 'Hello '
        },
        array: ['abc']
      }
    })

#### 组合 ####

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

**数组**

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

最终组合成数组`[0, 1, 2, 3, 4]`。

**对象**

<template is="objectCombine" data="{ {for: a, bar: b}}"></template>
    Page({
      data: {
        a: 1,
        b: 2
      }
    })

最终组合成的对象是 \{for: 1, bar: 2\}

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

<template is="objectCombine" data="{ {...obj1, ...obj2, e: 5}}"></template>
    Page({
      data: {
        obj1: {
          a: 1,
          b: 2
        },
        obj2: {
          c: 3,
          d: 4
        }
      }
    })

最终组合成的对象是 `{a: 1, b: 2, c: 3, d: 4, e: 5}`。

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

<template is="objectCombine" data="{ {foo, bar}}"></template>
    Page({
      data: {
        foo: 'my-foo',
        bar: 'my-bar'
      }
    })

最终组合成的对象是 `{foo: 'my-foo', bar:'my-bar'}`。

\*\*注意：\*\*上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：

<template is="objectCombine" data="{ {...obj1, ...obj2, a, c: 6}}"></template>
    Page({
      data: {
        obj1: {
          a: 1,
          b: 2
        },
        obj2: {
          b: 3,
          c: 4
        },
        a: 5
      }
    })

最终组合成的对象是 `{a: 5, b: 3, c: 6}`。

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

等同于

### 列表渲染 ###

<view wx:for="{ {array}}"> {
       {item}} </view>
    // page.js
    Page({
      data: {
        array: [1, 2, 3, 4, 5]
      }
    })

#### wx:for ####

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

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

<view wx:for="{ {array}}">
      {
       {index}}: {
       {item.message}}
    </view>
    Page({
      data: {
        array: [{
          message: 'w3c',
        }, {
          message: 'School'
        }]
      }
    })

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

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

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

`wx:for` 也可以嵌套，下边是一个九九乘法表

#### block wx:for ####

类似 `block wx:if`，也可以将 `wx:for` 用在\`\`标签上，以渲染一个包含多节点的结构块。例如：

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

#### wx:key ####

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

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

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

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

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

\*\*注意：\*\*当 wx:for 的值为字符串时，会将字符串解析成字符串数组

等同于

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

等同于

### 条件渲染 ###

<view wx:if="{ {view == 'WEBVIEW'}}"> WEBVIEW </view>
    <view wx:elif="{ {view == 'APP'}}"> APP </view>
    <view wx:else="{ {view == 'MINA'}}"> MINA </view>
    // page.js
    Page({
      data: {
        view: 'MINA'
      }
    })

#### wx:if ####

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

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

#### block wx:if ####

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

**注意：** \`\` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

#### wx:if vs hidden ####

因为 `wx:if` 之中的模板也可能包含数据绑定，所有当 `wx:if` 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

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

### 模板 ###

<template name="staffName">
      <view>
        FirstName: {
       {firstName}}, LastName: {
       {lastName}}
      </view>
    </template>
    
    <template is="staffName" data="{ {...staffA}}"></template>
    <template is="staffName" data="{ {...staffB}}"></template>
    <template is="staffName" data="{ {...staffC}}"></template>
    // page.js
    Page({
      data: {
        staffA: {firstName: 'Hulk', lastName: 'Hu'},
        staffB: {firstName: 'Shang', lastName: 'You'},
        staffC: {firstName: 'Gideon', lastName: 'Lin'}
      }
    })

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

#### 定义模板 ####

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

<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'
        }
      }
    })

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

#### 模板的作用域 ####

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

### 引用 ###

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

#### import ####

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

在 item.wxml 中定义了一个叫item的template：

<template name="item">
      <text>{
       {text}}</text>
    </template>

在 index.wxml 中引用了 item.wxml，就可以使用`item`模板：

##### import 的作用域 #####

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

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

<template name="A">
      <text> A template </text>
    </template>
    
    <import src="a.wxml"/>
    <template name="B">
      <text> B template </text>
    </template>
    
    <import src="b.wxml"/>
    <template is="A"/>  
    <template is="B"/>

#### include ####

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

<include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
    
    <view> header </view>
    
    <view> footer </view>

### 事件 ###

<view bindtap="add"> {
       {count}} </view>
    Page({
      data: {
        count: 1
      },
      add: function(e) {
        this.setData({
          count: this.data.count + 1
        })
      }
    })

#### 什么是事件 ####

*  事件是视图层到逻辑层的通讯方式。
 *  事件可以将用户的行为反馈到逻辑层进行处理。
 *  事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
 *  事件对象可以携带额外信息，如 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
    }]
    }

#### 事件分类 ####

事件分为冒泡事件和非冒泡事件：

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

WXML的冒泡事件列表：

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>触发条件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>touchstart</td> 
   <td>手指触摸动作开始</td> 
  </tr> 
  <tr> 
   <td>touchmove</td> 
   <td>手指触摸后移动</td> 
  </tr> 
  <tr> 
   <td>touchcancel</td> 
   <td>手指触摸动作被打断，如来电提醒，弹窗</td> 
  </tr> 
  <tr> 
   <td>touchend</td> 
   <td>手指触摸动作结束</td> 
  </tr> 
  <tr> 
   <td>tap</td> 
   <td>手指触摸后马上离开</td> 
  </tr> 
  <tr> 
   <td>longpress</td> 
   <td>手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发(基础库 1.5.0 开始支持，低版本需做兼容处理。)</td> 
  </tr> 
  <tr> 
   <td>longtap</td> 
   <td>手指触摸后，超过350ms再离开（推荐使用longpress事件代替）</td> 
  </tr> 
  <tr> 
   <td>transitionend</td> 
   <td>会在 WXSS transition 或 wx.createAnimation 动画结束后触发</td> 
  </tr> 
  <tr> 
   <td>animationstart</td> 
   <td>会在一个 WXSS animation 动画开始时触发</td> 
  </tr> 
  <tr> 
   <td>animationiteration</td> 
   <td>会在一个 WXSS animation 一次迭代结束时触发</td> 
  </tr> 
  <tr> 
   <td>animationend</td> 
   <td>会在一个 WXSS animation 动画完成时触发</td> 
  </tr> 
 </tbody> 
</table>

**注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如[``](https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html)的`submit`事件，[``][https_mp.weixin.qq.com_debug_wxadoc_dev_component_form.html_submit]的`input`事件，[\`\`][Link 1]的`scroll`事件。**

#### 事件绑定和冒泡 ####

事件绑定的写法同组件的属性，以 key、value 的形式。

*  key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
 *  value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

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>

#### 事件的捕获阶段 ####

自基础库版本 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 基础事件对象属性列表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>事件类型</td> 
  </tr> 
  <tr> 
   <td>timeStamp</td> 
   <td>Integer</td> 
   <td>事件生成时的时间戳</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>Object</td> 
   <td>触发事件的组件的一些属性值集合</td> 
  </tr> 
  <tr> 
   <td>currentTarget</td> 
   <td>Object</td> 
   <td>当前组件的一些属性值集合</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>detail</td> 
   <td>Object</td> 
   <td>额外的信息</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>touches</td> 
   <td>Array</td> 
   <td>触摸事件，当前停留在屏幕中的触摸点信息的数组</td> 
  </tr> 
  <tr> 
   <td>changedTouches</td> 
   <td>Array</td> 
   <td>触摸事件，当前变化的触摸点信息的数组</td> 
  </tr> 
 </tbody> 
</table>

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

**type**

代表事件的类型。

##### timeStamp #####

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

##### target #####

触发事件的源组件。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>String</td> 
   <td>事件源组件的id</td> 
  </tr> 
  <tr> 
   <td>tagName</td> 
   <td>String</td> 
   <td>当前组件的类型</td> 
  </tr> 
  <tr> 
   <td>dataset</td> 
   <td>Object</td> 
   <td>事件源组件上由<code>data-</code>开头的自定义属性组成的集合</td> 
  </tr> 
 </tbody> 
</table>

##### currentTarget #####

事件绑定的当前组件。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>String</td> 
   <td>当前组件的id</td> 
  </tr> 
  <tr> 
   <td>tagName</td> 
   <td>String</td> 
   <td>当前组件的类型</td> 
  </tr> 
  <tr> 
   <td>dataset</td> 
   <td>Object</td> 
   <td>当前组件上由<code>data-</code>开头的自定义属性组成的集合</td> 
  </tr> 
 </tbody> 
</table>

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

##### dataset #####

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

示例：

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

##### touches #####

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。

##### Touch 对象 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>identifier</td> 
   <td>Number</td> 
   <td>触摸点的标识符</td> 
  </tr> 
  <tr> 
   <td>pageX, pageY</td> 
   <td>Number</td> 
   <td>距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴</td> 
  </tr> 
  <tr> 
   <td>clientX, clientY</td> 
   <td>Number</td> 
   <td>距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴</td> 
  </tr> 
 </tbody> 
</table>

##### CanvasTouch 对象 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>identifier</td> 
   <td>Number</td> 
   <td>触摸点的标识符</td> 
  </tr> 
  <tr> 
   <td>x, y</td> 
   <td>Number</td> 
   <td>距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴</td> 
  </tr> 
 </tbody> 
</table>

##### changedTouches #####

changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

##### detail #####

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

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

# 2.WSX #

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

**注意**

1.  wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2.  wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3.  wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4.  wxs 函数不能作为组件的事件回调。
5.  由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

以下是一些使用 WXS 的简单示例：

## 页面渲染 ##

<wxs module="m1">
    var msg = "abc";
    
    module.exports.message = msg;
    </wxs>
    
    <view> {
       {m1.message}} </view>

页面输出：

abc

## 数据处理 ##

// page.js
    Page({
      data: {
        array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
      }
    })
    
    
    <wxs module="m1">
    var getMax = function(array) {
      var max = undefined;
      for (var i = 0; i < array.length; ++i) {
        max = max === undefined ? 
          array[i] : 
          (max >= array[i] ? max : array[i]);
      }
      return max;
    }
    
    module.exports.getMax = getMax;
    </wxs>
    
    
    <view> {
       {m1.getMax(array)}} </view>

页面输出：

## 模块 ##

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 中的 \`\` 标签引用。

### module 对象 ###

每个 wxs 模块均有一个内置的 module 对象。

包含属性：

*  exports: 通过该属性，可以对外共享本模块的私有变量与函数。

示例代码：

// /pages/tools.wxs
    
    var foo = "'abc' from tools.wxs";
    var bar = function (d) {
      return d;
    }
    module.exports = {
      FOO: foo,
      bar: bar,
    };
    module.exports.msg = "some msg";
    
    
    <wxs src="./../tools.wxs" module="tools" />
    <view> {
       {tools.msg}} </view>
    <view> {
       {tools.bar(tools.FOO)}} </view>

页面输出：

some msg
    'abc' from tools.wxs

### require函数 ###

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

*  只能引用 .wxs 文件模块，且必须使用相对路径。
 *  wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
 *  如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

示例代码：

// /pages/tools.wxs
    
    var foo = "'abc' from tools.wxs";
    var bar = function (d) {
      return d;
    }
    module.exports = {
      FOO: foo,
      bar: bar,
    };
    module.exports.msg = "some msg";
    // /pages/logic.wxs
    
    var tools = require("./tools.wxs");
    
    console.log(tools.FOO);
    console.log(tools.bar("logic.wxs"));
    console.log(tools.msg);
    
    
    <wxs src="./../logic.wxs" module="logic" />

控制台输出：

'abc' from tools.wxs
    logic.wxs
    some msg

## <wxs> 标签 ##

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>module</td> 
   <td>String</td> 
   <td>当前 `` 标签的模块名。必填字段。</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>String</td> 
   <td>引用 .wxs 文件的相对路径。仅当本标签为<strong>单闭合标签</strong>或<strong>标签的内容为空</strong>时有效。</td> 
  </tr> 
 </tbody> 
</table>

### module 属性 ###

module 属性是当前 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则：

*  首字符必须是：字母（a-zA-Z），下划线（\_）
 *  剩余字符可以是：字母（a-zA-Z），下划线（\_）， 数字（0-9）

示例代码：

<wxs module="foo">
    var some_msg = "abc";
    module.exports = {
        msg : some_msg,
    }
    </wxs>
    <view> {
       {foo.msg}} </view>

页面输出：

abc

上面例子声明了一个名字为 `foo` 的模块，将 `some_msg` 变量暴露出来，供当前页面使用。

### src 属性 ###

src 属性可以用来引用其他的 wxs 文件模块。

引用的时候，要注意如下几点：

示例代码：

// /pages/index/index.js
    
    Page({
      data: {
        msg: "'hello w3cSchool' from js",
      }
    })
    
    
    <wxs src="./../comm.wxs" module="some_comms"></wxs>
    
    
    
    <view> {
       {some_comms.bar(some_comms.foo)}} </view>
    
    <view> {
       {some_comms.bar(msg)}} </view>

页面输出：

'hello w3cschool' from comm.wxs
    'hello W3CSCHOOL' from js

上述例子在文件 /page/index/index.wxml 中通过 <wxs> 标签引用了 /page/comm.wxs 模块。

### 注意 ###

*  <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
 *  <template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的<wxs> 模块。

## 变量 ##

### 概念 ###

*  WXS 中的变量均为值的引用。
 *  没有声明的变量直接赋值使用，会被定义为全局变量。
 *  如果只声明变量而不赋值，则默认值为 undefined。
 *  var表现与javascript一致，会有变量提升。

var foo = 1;
    var bar = "hello w3cSchool";
    var i; // i === undefined

上面代码，分别声明了 `foo`、 `bar`、 `i` 三个变量。然后，`foo` 赋值为数值 `1` ，`bar` 赋值为字符串 `"hello w3cSchool"`。

### 变量名 ###

变量命名必须符合下面两个规则：

*  首字符必须是：字母（a-zA-Z），下划线（\_）
 *  剩余字符可以是：字母（a-zA-Z），下划线（\_）， 数字（0-9）

### 保留标识符 ###

以下标识符不能作为变量名：

delete 
    void 
    typeof
    
    null 
    undefined 
    NaN 
    Infinity 
    var
    
    if 
    else 
    
    true 
    false
    
    require
    
    this 
    function 
    arguments
    return
    
    for
    while
    do
    break
    continue
    switch
    case
    default

## 注释 ##

WXS 主要有 3 种注释的方法。

示例代码：

<wxs module="sample">
    // 方法一：单行注释
    
    /*
    方法二：多行注释
    */
    
    /*
    方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
    
    var a = 1;
    var b = 2;
    var c = "fake";
    
    </wxs>

上述例子中，所有 WXS 代码均被注释掉了。

> 方法三 和 方法二 的唯一区别是，没有 `*/` 结束符。

## 运算符 ##

### 基本运算符 ###

示例代码：

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);
    // typeof 运算
    console.log("number" === typeof a);

### 位运算符 ###

示例代码：

var a = 10, b = 20;
    
    // 左移运算
    console.log(80 === (a << 3));
    // 无符号右移运算
    console.log(2 === (a >> 2));
    // 带符号右移运算
    console.log(2 === (a >>> 2));
    // 与运算
    console.log(2 === (a & 3));
    // 异或运算
    console.log(9 === (a ^ 3));
    // 或运算
    console.log(11 === (a | 3));

### 比较运算符 ###

示例代码：

var a = 10, b = 20;
    
    // 小于
    console.log(true === (a < b));
    // 大于
    console.log(false === (a > b));
    // 小于等于
    console.log(true === (a <= b));
    // 大于等于
    console.log(false === (a >= b));

### 等值运算符 ###

示例代码：

var a = 10, b = 20;
    
    // 等号
    console.log(false === (a == b));
    // 非等号
    console.log(true === (a != b));
    // 全等号
    console.log(false === (a === b));
    // 非全等号
    console.log(true === (a !== b));

### 赋值运算符 ###

示例代码：

var a = 10;
    
    a = 10; a *= 10;
    console.log(100 === a);
    a = 10; a /= 5;
    console.log(2 === a);
    a = 10; a %= 7;
    console.log(3 === a);
    a = 10; a += 5;
    console.log(15 === a);
    a = 10; a -= 11;
    console.log(-1 === a);
    a = 10; a <<= 10;
    console.log(10240 === a);
    a = 10; a >>= 2;
    console.log(2 === a);
    a = 10; a >>>= 2;
    console.log(2 === a);
    a = 10; a &= 3;
    console.log(2 === a);
    a = 10; a ^= 3;
    console.log(9 === a);
    a = 10; a |= 3;
    console.log(11 === a);

### 二元逻辑运算符 ###

示例代码：

var a = 10, b = 20;
    
    // 逻辑与
    console.log(20 === (a && b));
    // 逻辑或
    console.log(10 === (a || b));

### 其他运算符 ###

示例代码：

var a = 10, b = 20;
    
    //条件运算符
    console.log(20 === (a >= 10 ? a + 10 : b + 10));
    //逗号运算符
    console.log(20 === (a, b));

### 运算符优先级 ###

<table> 
 <thead> 
  <tr> 
   <th>优先级</th> 
   <th>运算符</th> 
   <th>说明</th> 
   <th>结合性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>20</td> 
   <td><code>(</code> … <code>)</code></td> 
   <td>括号</td> 
   <td>n/a</td> 
  </tr> 
  <tr> 
   <td>19</td> 
   <td>… <code>.</code> …</td> 
   <td>成员访问</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>[</code> … <code>]</code></td> 
   <td>成员访问</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>(</code> … <code>)</code></td> 
   <td>函数调用</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>17</td> 
   <td>… <code>++</code></td> 
   <td>后置递增</td> 
   <td>n/a</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>--</code></td> 
   <td>后置递减</td> 
   <td>n/a</td> 
  </tr> 
  <tr> 
   <td>16</td> 
   <td><code>!</code> …</td> 
   <td>逻辑非</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>~</code> …</td> 
   <td>按位非</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>+</code> …</td> 
   <td>一元加法</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>-</code> …</td> 
   <td>一元减法</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>++</code> …</td> 
   <td>前置递增</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>--</code> …</td> 
   <td>前置递减</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>typeof</code> …</td> 
   <td>typeof</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>void</code> …</td> 
   <td>void</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>delete</code> …</td> 
   <td>delete</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td>14</td> 
   <td>… <code>*</code> …</td> 
   <td>乘法</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>/</code> …</td> 
   <td>除法</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>%</code> …</td> 
   <td>取模</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>13</td> 
   <td>… <code>+</code> …</td> 
   <td>加法</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>-</code> …</td> 
   <td>减法</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>12</td> 
   <td>… <code>&lt;&lt;</code> …</td> 
   <td>按位左移</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&gt;&gt;</code> …</td> 
   <td>按位右移</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&gt;&gt;&gt;</code> …</td> 
   <td>无符号右移</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>11</td> 
   <td>… <code>&lt;</code> …</td> 
   <td>小于</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&lt;=</code> …</td> 
   <td>小于等于</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&gt;</code> …</td> 
   <td>大于</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&gt;=</code> …</td> 
   <td>大于等于</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td>… <code>==</code> …</td> 
   <td>等号</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>!=</code> …</td> 
   <td>非等号</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>===</code> …</td> 
   <td>全等号</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>!==</code> …</td> 
   <td>非全等号</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>… <code>&amp;</code> …</td> 
   <td>按位与</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>… <code>^</code> …</td> 
   <td>按位异或</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td>… <code>｜</code> …</td> 
   <td>按位或</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td>… <code>&amp;&amp;</code> …</td> 
   <td>逻辑与</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>… <code>｜｜</code> …</td> 
   <td>逻辑或</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>… <code>?</code> … <code>:</code> …</td> 
   <td>条件运算符</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>… <code>=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>+=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>-=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>*=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>/=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>%=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&lt;&lt;=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&gt;&gt;=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&gt;&gt;&gt;=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>&amp;=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>^=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>… <code>｜=</code> …</td> 
   <td>赋值</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td>0</td> 
   <td>… <code>,</code> …</td> 
   <td>逗号</td> 
   <td>从左到右</td> 
  </tr> 
 </tbody> 
</table>

## if语句 ##

在 WXS 中，可以使用以下格式的 if 语句 ：

*  if (expression) statement ： 当 expression 为 truthy 时，执行 statement。
 *  if (expression) statement1 else statement2 : 当 expression 为 truthy 时，执行 statement1。 否则，执行 statement2
 *  if … else if … else statementN 通过该句型，可以在 statement1 ~ statementN 之间选其中一个执行。

示例语法：

// if ...
    
    if (表达式) 语句;
    
    if (表达式) 
      语句;
    
    if (表达式) { 
      代码块;
    }
    
    
    // if ... else 
    
    if (表达式) 语句;
    else 语句;
    
    if (表达式) 
      语句;
    else 
      语句;
    
    if (表达式) { 
      代码块;
    } else { 
      代码块;
    }
    
    // if ... else if ... else ...
    
    if (表达式) { 
      代码块;
    } else if (表达式) { 
      代码块;
    } else if (表达式) { 
      代码块;
    } else { 
      代码块;
    }

## switch 语句 ##

示例语法：

switch (表达式) { 
      case 变量:
        语句;
      case 数字:
        语句;
        break;
      case 字符串:
        语句;
      default:
        语句;
    }

*  default 分支可以省略不写。
 *  case 关键词后面只能使用：变量，数字，字符串。

**示例代码：**

var exp = 10;
    
    switch ( exp ) { 
    case "10":
      console.log("string 10");
      break;
    case 10:
      console.log("number 10");
      break;
    case exp:
      console.log("var exp");
      break;
    default:
      console.log("default");
    }

**输出：**

number 10

## for 语句 ##

示例语法：

for (语句; 语句; 语句)
      语句;
    
    for (语句; 语句; 语句) {
      代码块;
    }

*  支持使用 break，continue 关键词。

**示例代码：**

for (var i = 0; i < 3; ++i) { 
      console.log(i);
      if( i >= 1) break;
    }

**输出：**

0
    1

## while 语句 ##

示例语法：

while (表达式)
      语句;
    
    while (表达式){ 
      代码块;
    }
    
    do { 
      代码块;
    } while (表达式)

*  当表达式为 true 时，循环执行语句或代码块。
 *  支持使用 break，continue 关键词。

## 数据类型 ##

WXS 语言目前共有以下几种数据类型：

*  number ： 数值
 *  string ：字符串
 *  boolean：布尔值
 *  object：对象
 *  function：函数
 *  array : 数组
 *  date：日期
 *  regexp：正则

### number ###

**语法**

number 包括两种数值：整数，小数。

var a = 10;
    var PI = 3.141592653589793;

**属性**

*  constructor：返回字符串 “Number”。

**方法**

*  toString
 *  toLocaleString
 *  valueOf
 *  toFixed
 *  toExponential
 *  toPrecision

> 以上方法的具体使用请参考 ES5 标准。

### string ###

**语法**

string 有两种写法：

'hello world';
    "hello world";

**属性**

*  constructor：返回字符串 “String”。
 *  length

> 除constructor外属性的具体含义请参考 ES5 标准。

**方法**

*  toString
 *  valueOf
 *  charAt
 *  charCodeAt
 *  concat
 *  indexOf
 *  lastIndexOf
 *  localeCompare
 *  match
 *  replace
 *  search
 *  slice
 *  split
 *  substring
 *  toLowerCase
 *  toLocaleLowerCase
 *  toUpperCase
 *  toLocaleUpperCase
 *  trim

> 以上方法的具体使用请参考 ES5 标准。

### boolean ###

**语法**

布尔值只有两个特定的值：true 和 false。

**属性**

*  constructor：返回字符串 “Boolean”。

**方法**

*  toString
 *  valueOf

> 以上方法的具体使用请参考 ES5 标准。

### object ###

**语法**

object 是一种无序的键值对。使用方法如下所示：

**属性**

*  constructor：返回字符串 “Object”。

console.log("Object" === {k:"1",v:"2"}.constructor)

**方法**

*  toString：返回字符串 “\[object Object\]”。

### function ###

**语法**

function 支持以下的定义方式：

//方法 1
    function a (x) { 
      return x;
    }
    
    //方法 2
    var b = function (x) {  
      return x;
    }

function 同时也支持以下的语法（匿名函数，闭包等）：

var a = function (x) { 
      return function () {  return x;}
    }
    
    var b = a(100);
    console.log( 100 === b() );

### arguments ###

function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性：

*  length: 传递给函数的参数个数。
 *  \[index\]: 通过 index 下标可以遍历传递给函数的每个参数。

示例代码：

var a = function(){ 
        console.log(3 === arguments.length);
        console.log(100 === arguments[0]);
        console.log(200 === arguments[1]);
        console.log(300 === arguments[2]);
    };
    a(100,200,300);

**属性**

*  constructor：返回字符串 “Function”。
 *  length：返回函数的形参个数。

**方法**

*  toString：返回字符串 “\[function Function\]”。

示例代码：

var func = function (a,b,c) {  }
    
    console.log("Function" === func.constructor);
    console.log(3 === func.length);
    console.log("[function Function]" === func.toString());

### array ###

**语法**

array 支持以下的定义方式：

var a = [];      //生成一个新的空数组
    
    a = [1,"2",{ },function(){ }];  //生成一个新的非空数组，数组元素可以是任何类型

**属性**

*  constructor：返回字符串 “Array”。
 *  length

> 除constructor外属性的具体含义请参考 ES5 标准。

**方法**

*  toString
 *  concat
 *  join
 *  pop
 *  push
 *  reverse
 *  shift
 *  slice
 *  sort
 *  splice
 *  unshift
 *  indexOf
 *  lastIndexOf
 *  every
 *  some
 *  forEach
 *  map
 *  filter
 *  reduce
 *  reduceRight

> 以上方法的具体使用请参考 ES5 标准。

### date ###

**语法**

生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。

getDate()
    getDate(milliseconds)
    getDate(datestring)
    getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])

*  参数milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数datestring: 日期字符串，其格式为：“month day, year hours:minutes:seconds”

示例代码：

var date = getDate(); //返回当前时间对象
    
    date = getDate(1500000000000);
    // Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
    date = getDate('2017-7-14');
    // Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
    date = getDate(2017, 6, 14, 10, 40, 0, 0);
    // Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)

**属性**

*  constructor：返回字符串 “Date”。

**方法**

*  toString
 *  toDateString
 *  toTimeString
 *  toLocaleString
 *  toLocaleDateString
 *  toLocaleTimeString
 *  valueOf
 *  getTime
 *  getFullYear
 *  getUTCFullYear
 *  getMonth
 *  getUTCMonth
 *  getDate
 *  getUTCDate
 *  getDay
 *  getUTCDay
 *  getHours
 *  getUTCHours
 *  getMinutes
 *  getUTCMinutes
 *  getSeconds
 *  getUTCSeconds
 *  getMilliseconds
 *  getUTCMilliseconds
 *  getTimezoneOffset
 *  setTime
 *  setMilliseconds
 *  setUTCMilliseconds
 *  setSeconds
 *  setUTCSeconds
 *  setMinutes
 *  setUTCMinutes
 *  setHours
 *  setUTCHours
 *  setDate
 *  setUTCDate
 *  setMonth
 *  setUTCMonth
 *  setFullYear
 *  setUTCFullYear
 *  toUTCString
 *  toISOString
 *  toJSON

> 以上方法的具体使用请参考 ES5 标准。

### regexp ###

**语法**

生成 regexp 对象需要使用 getRegExp函数。

getRegExp(pattern[, flags])

*  参数：pattern: 正则表达式的内容。flags：修饰符。该字段只能包含以下字符:g: globali: ignoreCasem: multiline。

示例代码：

var a = getRegExp("x", "img");
    console.log("x" === a.source);
    console.log(true === a.global);
    console.log(true === a.ignoreCase);
    console.log(true === a.multiline);

**属性**

*  constructor：返回字符串 “RegExp”。
 *  source
 *  global
 *  ignoreCase
 *  multiline
 *  lastIndex

> 除constructor外属性的具体含义请参考 ES5 标准。

**方法**

*  exec
 *  test
 *  toString

> 以上方法的具体使用请参考 ES5 标准。

## 数据类型判断 ##

### constructor 属性 ###

数据类型的判断可以使用 constructor 属性。

示例代码：

var number = 10;
    console.log( "Number" === number.constructor );
    
    var string = "str";
    console.log( "String" === string.constructor );
    
    var boolean = true;
    console.log( "Boolean" === boolean.constructor );
    
    var object = { };
    console.log( "Object" === object.constructor );
    
    var func = function(){ };
    console.log( "Function" === func.constructor );
    
    var array = [];
    console.log( "Array" === array.constructor );
    
    var date = getDate();
    console.log( "Date" === date.constructor );
    
    var regexp = getRegExp();
    console.log( "RegExp" === regexp.constructor );

### typeof ###

使用 typeof 也可以区分部分数据类型。

示例代码：

var number = 10;
    var boolean = true;
    var object = { };
    var func = function(){ };
    var array = [];
    var date = getDate();
    var regexp = getRegExp();
    
    console.log( 'number' === typeof number );
    console.log( 'boolean' === typeof boolean );
    console.log( 'object' === typeof object );
    console.log( 'function' === typeof func );
    console.log( 'object' === typeof array );
    console.log( 'object' === typeof date );
    console.log( 'object' === typeof regexp );
    
    console.log( 'undefined' === typeof undefined );
    console.log( 'object' === typeof null );

## 基础类库 ##

### console ###

console.log 方法用于在 console 窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。

### Math ###

**属性**

*  E
 *  LN10
 *  LN2
 *  LOG2E
 *  LOG10E
 *  PI
 *  SQRT1\_2
 *  SQRT2

> 以上属性的具体使用请参考 ES5 标准。

**方法**

*  abs
 *  acos
 *  asin
 *  atan
 *  atan2
 *  ceil
 *  cos
 *  exp
 *  floor
 *  log
 *  max
 *  min
 *  pow
 *  random
 *  round
 *  sin
 *  sqrt
 *  tan

> 以上方法的具体使用请参考 ES5 标准。

### JSON ###

**方法**

*  stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。
 *  parse(string): 将 JSON 字符串转化成对象，并返回该对象。

示例代码：

console.log(undefined === JSON.stringify());
    console.log(undefined === JSON.stringify(undefined));
    console.log("null"===JSON.stringify(null));
    
    console.log("111"===JSON.stringify(111));
    console.log('"111"'===JSON.stringify("111"));
    console.log("true"===JSON.stringify(true));
    console.log(undefined===JSON.stringify(function(){ }));
    
    
    console.log(undefined===JSON.parse(JSON.stringify()));
    console.log(undefined===JSON.parse(JSON.stringify(undefined)));
    console.log(null===JSON.parse(JSON.stringify(null)));
    
    console.log(111===JSON.parse(JSON.stringify(111)));
    console.log("111"===JSON.parse(JSON.stringify("111")));
    console.log(true===JSON.parse(JSON.stringify(true)));
    
    console.log(undefined===JSON.parse(JSON.stringify(function(){ })));

### Number ###

**属性**

*  MAX\_VALUE
 *  MIN\_VALUE
 *  NEGATIVE\_INFINITY
 *  POSITIVE\_INFINITY

> 以上属性的具体使用请参考 ES5 标准。

### Date ###

**属性**

*  parse
 *  UTC
 *  now

> 以上属性的具体使用请参考 ES5 标准。

### Global ###

**属性**

*  NaN
 *  Infinity
 *  undefined

> 以上属性的具体使用请参考 ES5 标准。

**方法**

*  parseInt
 *  parseFloat
 *  isNaN
 *  isFinite
 *  decodeURI
 *  decodeURIComponent
 *  encodeURI
 *  encodeURIComponent

> 以上方法的具体使用请参考 ES5 标准。

# 3.WXSS #

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

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

*  尺寸单位
 *  样式导入

### 尺寸单位 ###

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

<table> 
 <thead> 
  <tr> 
   <th>设备</th> 
   <th>rpx换算px (屏幕宽度/750)</th> 
   <th>px换算rpx (750/屏幕宽度)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iPhone5</td> 
   <td>1rpx = 0.42px</td> 
   <td>1px = 2.34rpx</td> 
  </tr> 
  <tr> 
   <td>iPhone6</td> 
   <td>1rpx = 0.5px</td> 
   <td>1px = 2rpx</td> 
  </tr> 
  <tr> 
   <td>iPhone6 Plus</td> 
   <td>1rpx = 0.552px</td> 
   <td>1px = 1.81rpx</td> 
  </tr> 
 </tbody> 
</table>

> 建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
> 
> 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

### 样式导入 ###

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

示例代码：

/** common.wxss **/
    .small-p { 
      padding:5px;
    }
    /** app.wxss **/
    @import "common.wxss";
    .middle-p { 
      padding:15px;
    }

### 内联样式 ###

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

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

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

### 选择器 ###

目前支持的选择器有：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>样例</th> 
   <th>样例描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.class</td> 
   <td><code>.intro</code></td> 
   <td>选择所有拥有 class=“intro” 的组件</td> 
  </tr> 
  <tr> 
   <td>#id</td> 
   <td><code>#firstname</code></td> 
   <td>选择拥有 id=“firstname” 的组件</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td><code>view</code></td> 
   <td>选择所有 view 组件</td> 
  </tr> 
  <tr> 
   <td>element, element</td> 
   <td><code>view, checkbox</code></td> 
   <td>选择所有文档的 view 组件和所有的 checkbox 组件</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td><code>view::after</code></td> 
   <td>在 view 组件后边插入内容</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td><code>view::before</code></td> 
   <td>在 view 组件前边插入内容</td> 
  </tr> 
 </tbody> 
</table>

### 全局样式与局部样式 ###

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

[https_mp.weixin.qq.com_debug_wxadoc_dev_component_form.html_submit]: https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html
[Link 1]: https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
[Link 2]: https://www.w3cschool.cn/weixinapp/itz51q8o.html