前言
- 框架的视图层由 WXML 与 WXSS 编写，由组件（例如open-data：用于展示微信开放的数据）来进行展示。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
- WXML(WeiXin Markup language) 用于描述页面的结构。
- WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
- WXSS(WeiXin Style Sheet) 用于描述页面的样式。
- 组件(Component)是视图的基本组成单元。
WXML
数据绑定
- 数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)
运算
- 支持的有如下几种方式:
三元运算、算数运算、逻辑判断、字符串运算、数据路径运算
组合
直接进行组合，构成新的对象或者数组
例子
<text class="user-motto"></text>- //index.js
Page({ data: { text: 'Click me get my posts!', motto: helloData, } })
列表渲染
- 在
组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
wx:key指定列表中项目的唯一的标识符2）当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。 1）使用场景：（如 <input/> 中的输入内容，<switch/> 的选中状态） VM339:2 ./pages/logs/logs.wxml (anonymous) @ VM339:2 VM339:3 Now you can provide attr "wx:key" for a "wx:for" to improve performance. 25 | 26 | <view class="container log-list"> 27 | <block wx:for="" wx:for-item="log" wx:for-index="knindex"> | ^ 28 | <text class="log-item"></text> 29 | </block> 30 | </view> (anonymous) @ VM339:3
例子1
- 重复渲染
text组件–logs.wxml
- logs.js
//logs.js 页面逻辑 const util = require('../../utils/util.js') Page({//进行页面的注册 data: { logs: []//数组 }, onLoad: function () { util.sayHello('kunna') util.sayGoodbye('kunnan') this.setData({ logs: (wx.getStorageSync('logs') || []).map(log => { return util.formatTime(new Date(log)) }) }) } })- wxss
/*页面样式表*/ .log-list { display: flex; flex-direction: column; padding: 40rpx; } .log-item { margin: 10rpx; }
例子2
条件渲染
wx:if vs ` hidden`
` wx:if` 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
` hidden` : 组件始终会被渲染，只是简单的控制显示与隐藏。
*一般来说，
wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，---频繁修改判断条件 如果在运行时条件不大可能改变则 wx:if 较好。--- 判断条件固定
例子一
例子二
模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
事件
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
事件对象可以携带额外信息，如 id, dataset, touches
事件的使用方式
- 在组件中绑定一个事件处理函数。
bindtap<button bindtap="switch"> Switch </button>
事件分类
- 事件分为
冒泡事件和非冒泡事件：1) 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 2) 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
WXML的冒泡事件列表：
事件绑定和冒泡
- key、value 的形式
1) key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。 自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。 2) value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
事件的捕获阶段
- 自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。
需要在捕获阶段监听事件时，可以采用`capture-bind`、`capture-catch`关键字，后者将中断捕获阶段和取消冒泡阶段。
例子
事件对象
- 如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
dataset
- 组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头
例子
- CustomEvent 自定义事件对象（继承 BaseEvent）
<button wx:if="" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>- 属性:detail 额外的信息:
表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息getUserInfo: function (e) {// 通过button.open-type.getUserInfo的方式获取数据 console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }
引用
WXML 提供两种文件引用方式import和include。
import
import 的作用域
只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
include
include 可以将目标文件除了
See Also
/Users/devzkn/bin/knpost miniprogram_framework_view 视图层 -t miniprogram #原来""的参数，需要自己加上""
转载请注明：张坤楠的博客 > miniprogram_framework_view
