3.0 基本构成
3.1 视图层View
视图层由WXML与WXSS编写,由组件进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
3.1.1 WXML (WeiXin Markup language)
框架标签语言,结合基础组件、事件系统,可以构建页面结构。
特性
- 数据绑定【WXML 中的动态数据均来自对应 .js文件Page 的 data,Mustache语法(双大括号)将变量包起来】
- 简单绑定
- 运算
- 组合——构成新的对象或数组
- 简单绑定
列表渲染
- wx:for(可嵌套)
- wx:key()
<!-- 在组件上使用wx:for 控制属性绑定一个数组,数组当前项下标变量名默认为index,当前项的变量名默认为item -->
<!-- 使用 wx:for-item 属性可以指定数组当前元素的变量名 -->
<!-- 使用 wx:for-index 属性可以指定数组当前下标的变量名 -->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
- wx:for(可嵌套)
条件渲染
- wx:if
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
- wx:if
模板
- 定义模板:使用 name 属性作为模板的名字,然后在
<template/>
内定义代码片段。 - 使用模板
```xml{{index}}: {{msg}} Time: {{time}}
- 定义模板:使用 name 属性作为模板的名字,然后在
1. **模板作用域:只能使用data传入的数据以及模板文件中定义的<wxs/>模块**<br />
5. **事件**<br />
> 事件是视图层到数据层的通讯方式。通过事件将用户的行为反馈到逻辑 层进行处理。
> 事件可以绑定在组件上,当达到触发条件,就会执行逻辑层中对应的事件处理函数。
> 事件对象可以携带额外信息。
1. <br />
2. 使用方式<br />
```javascript
<!-- 在组件中绑定一个事件处理函数 -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
<!--在相应的Page定义中写上相应的事件处理函数,参数是event -->
Page({
tapName: function(event) {
console.log(event)
}
})
- 事件详解
- 事件分类
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:不会
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 事件绑定和冒泡
- 事件绑定的写法同组件的属性,以 key、value 的形式。
- key 以
bind
或catch
开头,然后跟上事件的类型,如bindtap
、catchtouchstart
,bind
事件绑定不会阻止冒泡事件向上冒泡,catch
事件绑定可以阻止冒泡事件向上冒泡。 - value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
- key 以
- 事件绑定的写法同组件的属性,以 key、value 的形式。
- 事件捕获
- 事件对象
- 引用
- 事件分类
- import:只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
- include:
include
可以将目标文件除了<template/>
<wxs/>
外的整个代码引入,相当于是拷贝到include
位置
3.1.2 WXSS (WeiXin Style Sheet)
描述WXML的组件样式,WXSS具有CSS大部分特性,并对CSS进行了扩充和修改。
- 扩展特性(与CSS相比)
- 响应式像素——根据屏幕宽度进行自适应
- 外联样式导入:使用
@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。- 执行顺序:从上到下,从左到右
- 执行顺序:从上到下,从左到右
- 响应式像素——根据屏幕宽度进行自适应
- 特性
- 内联样式
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
- class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上
.
,样式类名之间用空格分隔
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
- 选择器
- 选择器优先级
- 选择器优先级
- 内联样式
- WXS
3.1.3 Component
视图的基本组成单元
3.2 逻辑层
3.2.1 WXS(WeiXin Script)
WXS(WeiXin Script)是小程序的一套脚本语言(其实就是在JavaScript上层做了封装和限制),结合
WXML
,可以构建出页面的结构, 一般用于过滤和计算。 wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。 wxs 函数不能作为组件的事件回调。
示例
- 页面渲染
- 数据处理
3.3 MINA框架
- View视图层
- WXML:节点树结构
- WXML:节点树结构
- App Service逻辑层
- Manager:逻辑执行
- API:wasservie.js封装API接口,让不同平台的运行环境通过该API获得使用微信客户端的能力
- *整个小程序只有一个app service,并且整个生命周期常驻内存,整个app service逻辑层由appservice线程加载运行
- Manager:逻辑执行
- Native系统层