3.0 基本构成

模块三 | 微信小程序开发框架 - 图1

3.1 视图层View

视图层由WXML与WXSS编写，由组件进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

3.1.1 WXML (WeiXin Markup language)

框架标签语言，结合基础组件、事件系统，可以构建页面结构。

特性

  1. 数据绑定【WXML 中的动态数据均来自对应 .js文件Page 的 data，Mustache语法（双大括号）将变量包起来】
    1. 简单绑定
    2. 运算
    3. 组合——构成新的对象或数组

  2. 列表渲染

    1. wx:for(可嵌套)
    2. wx:key()
      1. <!-- 在组件上使用wx:for 控制属性绑定一个数组，数组当前项下标变量名默认为index，当前项的变量名默认为item -->
      2. <!-- 使用 wx:for-item 属性可以指定数组当前元素的变量名 -->
      3. <!-- 使用 wx:for-index 属性可以指定数组当前下标的变量名 -->
      4. <view wx:for="{{array}}">
      5. {{index}}: {{item.message}}
      6. </view>

  3. 条件渲染

    1. wx:if
      1. <view wx:if="{{length > 5}}"> 1 </view>
      2. <view wx:elif="{{length > 2}}"> 2 </view>
      3. <view wx:else> 3 </view>

  4. 模板

    1. 定义模板：使用 name 属性作为模板的名字，然后在<template/>内定义代码片段。
    2. 使用模板
      ```xml 

  2.    1. **模板作用域：只能使用data传入的数据以及模板文件中定义的<wxs/>模块**<br />
  3. 5. **事件**<br />
  4. > 事件是视图层到数据层的通讯方式。通过事件将用户的行为反馈到逻辑 层进行处理。
  5. > 事件可以绑定在组件上，当达到触发条件，就会执行逻辑层中对应的事件处理函数。
  6. > 事件对象可以携带额外信息。
  8.    1. <br />
  9.    2. 使用方式<br />
  10. ```javascript
  11. <!-- 在组件中绑定一个事件处理函数 -->
  12. <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
  13. <!--在相应的Page定义中写上相应的事件处理函数，参数是event -->
  14. Page({
  15.   tapName: function(event) {
  16.     console.log(event)
  17.   }
  18. })
  1. 事件详解
    1. 事件分类
      1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
      2. 非冒泡事件：不会
    2. 事件绑定和冒泡
      1. 事件绑定的写法同组件的属性，以 key、value 的形式。
        1. key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
        2. value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
    3. 事件捕获
    4. 事件对象
    5. 引用
  2. import：只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
  3. include：include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

    3.1.2 WXSS (WeiXin Style Sheet)

    描述WXML的组件样式，WXSS具有CSS大部分特性，并对CSS进行了扩充和修改。

  • 扩展特性（与CSS相比）
    1. 响应式像素——根据屏幕宽度进行自适应
      1. 模块三 | 微信小程序开发框架 - 图2
    2. 外联样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
      1. 执行顺序：从上到下，从左到右
  • 特性
    1. 内联样式
      1. style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
      2. class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔
    2. 选择器
      1. 选择器优先级模块三 | 微信小程序开发框架 - 图3
  • WXS

    3.1.3 Component

    视图的基本组成单元

3.2 逻辑层

3.2.1 WXS(WeiXin Script)

WXS（WeiXin Script）是小程序的一套脚本语言（其实就是在JavaScript上层做了封装和限制），结合 WXML，可以构建出页面的结构， 一般用于过滤和计算。 wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。 wxs 函数不能作为组件的事件回调。 模块三 | 微信小程序开发框架 - 图4

示例

  • 页面渲染
  • 数据处理

3.3 MINA框架

模块三 | 微信小程序开发框架 - 图5

  1. View视图层
    1. WXML：节点树结构
  2. App Service逻辑层
    1. Manager：逻辑执行
    2. API：wasservie.js封装API接口，让不同平台的运行环境通过该API获得使用微信客户端的能力
    3. *整个小程序只有一个app service，并且整个生命周期常驻内存，整个app service逻辑层由appservice线程加载运行
  3. Native系统层
    1. *视图层和逻辑层采用双线程通信，之间采用数据传输和事件系统通过系统层进行数据通信。
    2. 逻辑层将数据变化通知到视图层，触发视图层的页面更新。
    3. 视图层将触发事件通知给逻辑层进行业务处理。

      3.4 小程序运行机制、小程序加载机制、生命周期、页面路由、小程序事件流