微信小程序-框架-视图层

阅读量

一、视图层概述

1.框架的视图层由WXML和WXSS编写,由组件进行展示.
2.将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
3.WXML(WeiXin Markup Language)用于描述页面的结构.
WXS(WeiXin Script)是小程序的一套脚本语言，结合WXML可以构建出页面的结构.
WXSS(WeiXin Style Sheet)用于描述页面的样式.
组件(Component)是视图的基本组成单元.
二、WXML
1.数据绑定
WXML中的动态数据均来自对应的Page的data。

1.1简单绑定
数据绑定使用Mustance语法(双打括号)将变量抱起来，可作用于： 

• 内容 
    home.wxml:
    <view>{{message}}</view>

    home.js
    Page({
        data:{
            message:'Hello MINA!'
        }
    })    
• 组件属性(需要在双引号内) 
    home.wxml
    <view id="item-{{id}}"></view>

    home.js
    Page({
        data:{
            id:0
        }
    })
• 控制属性(需要在双引号内)  
    home.wxml
    <view wx:if="{{condition}}"></view>

    home.js
    Page({
        data:{
            condition:true
        }
    })
• 关键字(需要在双引号内)  
    ture:boolean 类型的 true，代表真值。
    false:boolean 类型的 false，代表假值。

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

    tips:不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值

1.2运算
可以在{{}}内进行简单的运算，支持方式:

• 三元运算
    home.wxml
    <view hidden="{{flag ? true : false}}"> Hidden </view>

    home.js
    Page({
        data:{
            flag:true
        }
    })
• 算数运算
    home.wxml
    <view>{{a+b}} + {{c}} + d</view>

    home.js
    Page({
        data:{
            a:1,
            b:2,
            c:3
        }
    })
• 逻辑判断
    home.wxml
    <view wx:if="{length > 5}"> </view>

    home.js
    Page({
        data:{
            length:2
        }
    })
• 字符串运算
    home.wxml
    <view>{{"hello" + name}}</view>

    home.js
    Page({
        data:{
            name:'MINA'
        }
    })
• 数据路径运算
    home.wxml
    <view>{{object.key}} {{array[0]}}</view>

    home.js
    Page({
        data:{
            object:{
                key:'hello'
            },
            array:['MINA']
        }
    })

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

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

    home.js
    Page({
        data:{
            zero:0
        }
    })
对象
    home.wxml
    方式一：
    <template is='objectCombine' data="{{for:a,bar:b}}"></template>

    方式二：用扩展运算符 ... 来将一个对象展开
    <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

    方式三：如果对象的 key 和 value 相同，也可以间接地表达
    <template is="objectCombine" data="{{foo, bar}}"></template>

    方式四:上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面
    <template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>

    home.js
    Page({
        方式一：
        data:{
            a:1,
            b:2
        }
        方式二：
        data:{
             obj1: {
              a: 1,
              b: 2
            },
            obj2: {
              c: 3,
              d: 4
            }
        }
        方式三:
        data:{
            foo:'my-foo',
            bar:'my-bar'
        }
        方式四：
        data:{
             obj1: {
              a: 1,
              b: 2
            },
            obj2: {
              c: 3,
              d: 4
            },
            a:5
        }
    })
    方式一：
    最终组合成的对象是 {for: 1, bar: 2}
    方式二：
    最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
    方式三：
    最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。
    方式四：
    最终组合成的对象是 {a: 5, b: 3, c: 6}。

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

<view wx:for='{{[1,2,3]}} '>{{item}}</view>
等价于
<view wx:for='{{[1,2,3] + ' '}}'>{{item}}</view>

2.列表渲染
2.1 wx:for
在组件上使用wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认：数组的当前项的下标变量名为index，当前项的变量名为item；

home.wxml
<view wx:for='{{array}}'>{{index}}:{{item.message}} </view>

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

修改默认下标名和变量名

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

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

wx:for的嵌套

九九乘法表
home.wxml
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">="" {{i}}="" *="" {{j}}="{{i" j}}="" <="" view>="" <="" code="">

2.2 block wx:for
类似block wx:if,可以将wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块;

home.wxml
<block wx:for='{{[1,2,3]}}'>
  <view>{{index}}:</view>
  <view>{{item}}</view>
</block>

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

• 字符串 代表在for循环的array中item的某个property，该property 的值需要是列表中唯一的字符串或数字，且不能动态改变；
• 保留关键字 *this 代表在for循环中的item本身,这种表示需要 item 本身是一个唯一的字符串或者数字
        eg:当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
ps:不提供wx:key 会报一个警告。确定列表是静态，或不在乎顺序可忽略。


home.wxml
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

home.js
Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})
注意: 
当wx:for的值为字符串时，会将字符串解析成字符串数组
<view wx:for='array'>{{item}}</view>
等价于
<view wx:for='{{['a','r','r','a','y']}}'>{{item}}</view>

当花括号和引号间有空格,将最终被解析成字符串
<view wx:for="{{[1,2,3]}} ">{{item}}</view>
等价于    
<view wx:for="{{[1,2,3] + ' '}}">{{item}}</view>

3.条件渲染
wx:if

在框架中,使用wx:if="{{condition}}" 来判断是否需要渲染该代码块
<view wx:if="{{condition}}"></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>

blcok wx:if
使用场景：如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

wx:if 是一个控制属性，需要将它添加到一个标签上.
<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性.

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

wx:if 和 hidden的区别

• 因为wx:if之中的模版可能包含数据绑定,所以当wx:if的条件值切换时,框架有一个渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
• 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
• 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

4.模版 - 注意导入路径
WXML提高模板(template),可以在模板中定义代码片段,然后在不同的地方调用。实现一次定义，到处使用。
4.1 定义模板
创建步骤：

1.新建一个template文件夹用来管理项目中的所有模板;
2.新建一个yourtemplatename.wxml文件来定义模板;
3.使用name属性,作为模板的名字,然后在<template/>内定义代码片段。
4.在新建模板的时候同时新建一个yourtemplatename.wxss的文件，与CSS同样的写法控制样式。
5.在需要使用模板的页面.wxss文件中import进来;或者直接在app.wxss中引入，这样只需要一次引入,其他文件就不需要引入了。

    app.wxss
    /*引入模板样式文件*/
    @import "../template/courseList.wxss";
ps：
1.一个.wxml文件中可以定义多个模板,只需要通过name来区分;
    yourtemplatename.wxml
    //模板一：
    <template name='msgItem1'>
     <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>

    //模板二：
    <template name='msgItem2'>
         <view> msgItem2 </view>
    </template>

2.模板中的数据都是展开之后的属性。

4.2 使用模板
使用步骤：

1.使用is属性,声明需要使用的模板;
    <import src="../../templates/yourtemplatename.wxml"/>

2.将模板所需要的data传入,一般我们都会使用列表渲染;
    <template is="msgItem1" data="{{...item}}"/>

ps:
1.表达式来确定选择使用哪个模板
• is属性可以使用Mustache语法来动态决定需要渲染哪个模板 - index为数组下标
<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{index % 2 == 0 ? 'msgItem1' : 'msgItem2'}}"/>
</block>
• 也可以通过wx:if来确定 - index为数组下标
<template wx:if="{{index%2 === 0}}" is="msgItem1" data="{{...item}}"></template>
<template wx:else is="msgItem2" data="{{...item}}"></template>
2.data是要模板渲染的数据，data='{{...item}}'写法是ES6的写法，item是wx:for当前项，... 是展开运算符，在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。

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

5.事件
5.1事件概述

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

5.2使用方式

• 在组件中绑定一个事件处理函数。
• 在相应的Page定义中写上相应的事件处理函数，参数event。
eg:    
    my.wxml
    <view id='tapTest' data-hidden='WeChat' bindtap='tapName'>Click me！</view>

    my.js
    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
    }]
    }

5.3事件分类：冒泡事件和非冒泡事件

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

类型 触发条件 最低版本
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 1.5.0
longtap。 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发 1.9.90 
除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件)

5.4事件绑定和冒泡

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

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

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>

1.点击 inner view 会先后调用handleTap3 和 handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡，不再向父节点传递);
2.点击 middle view 会触发handleTap2;
3.点击 outer view 会触发handleTap1。

5.5事件的捕获阶段

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

eg1:点击 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>

eg2:只触发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>

5.6事件对象

当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象.
BaseEvent基础事件对象属性列表:

属性 类型 说明 其他
type String 事件类型
timeStamp Integer 事件生成的时间戳 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合 触发事件的源组件
currentTarget Object 当前组件的一些属性值集合 事件绑定的当前组件

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

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

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

属性 类型 说明
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组

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

target - 触发事件的源组件
currentTarget - 事件绑定的当前组件

属性 类型 说明
id String 事件源组件的id
tagName String 当前组件的类型
dataset Object 事件源组件上由data-开头的自定义属性组成的集合

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

my.wxml
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

my.js
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

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

Touch对象

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

CanvasTouch对象

属性 类型 说明
identifier Number 触摸点的标志符
x, y Number 距离 Canvas 左上角的距离，Canvas 的左上角为原点，横向为X轴，纵向为Y轴

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

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

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

6.引用
引用方式:import 和 include
eg:import - 模板的使用

在item.wxml中定义了一个叫item的template：
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在index.wxml中引用了item.wxml模板，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import的作用域问题： 

只会import目标文件中定义的template，而不会import目标文件中所有的template。

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

三、WXS

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

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

1.模块
WXS代码可以编写在wxml文件中的<wxs> 标签内,或以.wxs为后缀名的文件内。

1.1模块

每一个.wxs文件和<wxs>标签都是一个单独的模块；
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见；
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现；

1.2 .wxs文件

开发工具中，右键可直接创建.wxs文件，在其中编写wxs脚本；
该.wxs文件可以被其他的.wxs文件或WXML中的<wxs>标签引用；

1.3module对象
每个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";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

1.4require函数
在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。引用的时候，要注意如下几点：

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

1.5 <wxs>标签

属性名 类型 默认值 说明
module String 当前 <wxs> 标签的模块名。必填字段。
src String 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

module属性

module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。
module 属性值的命名必须符合下面两个规则：
    首字符必须是：字母（a-zA-Z），下划线（_）
    剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

src属性

src 属性可以用来引用其他的 wxs 文件模块。
引用的时候，要注意如下几点：
    只能引用 .wxs 文件模块，且必须使用相对路径。
    wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
    如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

ps:

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

2.变量

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

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

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

2.2标志符不能作为变量
…

3.注释

<!-- wxml -->
<wxs module="sample">
// 方法一：单行注释

/*
方法二：多行注释
*/

/*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;
var b = 2;
var c = "fake";

</wxs>

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

4.运算符
4.1基本运算符 

加法运算也可以作为字符串的拼接；

4.2一元运算符 

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);

4.3位运算符 

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));

4.4比较运算符
4.5等值运算符

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));

4.6赋值运算符
4.7二元逻辑运算符 

var a = 10, b = 20;

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

4.8其他运算符

var a = 10, b = 20;

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

4.9运算符优先级
5.语句

5.1 if… if… else… if…else if… else…

5.2 switch … case … default…

case:关键字只能：变量、数字、字符串
default:可以省略不写

5.3 for语句

支持break,continue 关键字跳出循环

5.4 while… while(…)… do … while…

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

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

数据类型 类型 语法 属性 方法 其他
number 数值 整数、小数 constructor：返回字符串 “Number” toString,toLocaleString,valueOf…
string 字符串 写法:单引号和双引号 1.constructor：返回字符串 “String”2.length …
boolean 布尔值 ture和false constructor：返回字符串 “Boolean” 1.toString2.valueOf
object 对象 object 是一种无序的键值对:包含对象的创建,属性的读写操作 constructor：返回字符串 “Object” toString：返回字符串 “[object Object]”
function 函数
array 数组 数组元素可以是任何类型 1.constructor：返回字符串 “Array”2.length …
date 日期 生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象 getDate() constructor：返回字符串 “Date” …
regexp 正则 生成 regexp 对象需要使用 getRegExp函数：getRegExp(pattern[, flags])

constructor属性 - 数据类型的判断可以使用此属性
typeof - 使用typeof也可以区分部分数据类型

7.基础类库

基础类库 属性 方法 其他
console console.log 方法用于在 console 窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。
Math E,LN10,LN2,PI,LOG2E,LOG10E,SQRT1_2,SQT2 abs,sin,asin,acos,atan,floor…
JSON 1.stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串2.parse(string): 将 JSON 字符串转化成对象，并返回该对象。
Number MAX_VALUE，MIN_VALUE，NEGATIVE_INFINITY，POSITIVE_INFINITY
Date parse,UTC,now
Global NaN,Infinity,undefined isNaN , isFinite

四、WXSS

WXSS（WeiXin Style Sheet）是一套样式语言,用于描述WXML的组件样式。用来决定WXML的组件应该怎么显示。与CSS相比,WXSS扩展特性:尺寸单位、样式导入

1.尺寸单位

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

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

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

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

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
    <view style="color:{{color}};" />
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
    <view class="normal_view" />

4.选择器
目前支持的选择器：

选择器 样例 样例描述
.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 组件前边插入内容

5.全局样式与局部样式

app.wxss的全局样式 会被page中的wxss局部样式覆盖相同的选择器。

五、组件

框架提供了一系列基础组件，可供开发者快速开发。

参考资料：

1.框架-视图层

2.模板的使用

3.组件文档

赏

谢谢您的鼓励

支付宝
微信

扫一扫，分享到微信

微信分享二维码
本站访客数人次

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

折腾<br><br><br>增值<br><br><br>