3-1 官方文档整理-视图层-WXML文件

Posted 2021-01-05 ailex

【视图层文件组成】：

　　视图层由 WXML 与 WXSS 编写，由组件来进行展示。

　　WXML(WeiXin Markup language) 用于描述页面的结构。

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

　　WXSS(WeiXin Style Sheet) 用于描述页面的样式。

【WXML】

　　【数据绑定】：数据绑定语法：使用双大括号将需要替换的对象括起来，下面的代码，界面文件中的{{message}}会替换为"Hello MINA".(莫非腾讯小程序还有个日漫迷？)

　　　　{{表达式}}：{{}} 框架会计算{{}}中表达式的值！

　　　　{{...item}}： ... 表示将 item 展开？（感觉再用Python）

　　　　当绑定的对象是值类型时，直接用值替换

　　　　当绑定的对象是字典类型是，用视图文件中{{}}中间的值做键，此键值对应的value，填入视图文件中对应的位置。

1 <!--wxml-->
2 <view> {{message}} </view>

1 Page({
2   data: {
3     message: ‘Hello MINA!‘
4   }
5 })

　　【列表渲染】-其实也是绑定。下面代码中，会生成5行 <view></view>，依次填入不同的内容、

1 <!--wxml-->
2 <view wx:for="{{array}}"> {{item}} </view>

1 // page.js
2 Page({
3   data: {
4     array: [1, 2, 3, 4, 5]
5   }
6 })

【】

1 在组件上使用 wx:for 控制属性绑定一个数组
2 使用 wx:for-item 可以指定数组当前元素的变量名
3 使用 wx:for-index 可以指定数组当前下标的变量名

　　【条件渲染】，当wx:if 之后的条件成立时，才生成<view></view>代码（类似于条件编译？），此例中，view == MINA，只生成 <view> MINA </view>

<view wx:if="{{view == ‘WEBVIEW‘}}"> WEBVIEW </view>
<view wx:elif="{{view == ‘APP‘}}"> APP </view>
<view wx:else="{{view == ‘MINA‘}}"> MINA </view>

1 // page.js
2 Page({
3   data: {
4     view: ‘MINA‘
5   }
6 })

　　【wx:if与hidden】

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

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

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

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

---------------------------------------------

　　【模板】

　　WXML文件中定义模板：

1 <!--wxml-->
2 <template name="staffName">
3   <view>
4     FirstName: {{firstName}}, LastName: {{lastName}}
5   </view>
6 </template>

　　WXML文件中使用模板：

1 <template is="staffName" data="{{...staffA}}"></template>
2 <template is="staffName" data="{{...staffB}}"></template>
3 <template is="staffName" data="{{...staffC}}"></template>

　　JS文件中注册数据：

// page.js
Page({
  data: {
    staffA: {firstName: ‘Hulk‘, lastName: ‘Hu‘},
    staffB: {firstName: ‘Shang‘, lastName: ‘You‘},
    staffC: {firstName: ‘Gideon‘, lastName: ‘Lin‘}
  }
}

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

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

　　绑定语法：

1 <view id="outer" bindtap="handleTap1"></view>
2 
3 <view id="middle" catchtap="handleTap2"></view>
4 
5 <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
6 
7 <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">

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

　　【事件对象】：当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象，详细请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

　　

【引用】：重复利用界面文件

　　import：只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template

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