【视图层文件组成】：
视图层由 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 <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 位置
原文地址：https://www.cnblogs.com/ailex/p/9636096.html