第二周课堂笔记补

wxml页面结构文件

页面结构文件(WXML)是框架设计的一套套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、cl lass 等)，组件还可以嵌套。

wxml还有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

运算

在{{}}中可以做一些简单的运算主要有算术运算、逻辑运算、三元运算、字符串运算等，这些运算应符合javascript运算规则。

算术运算基本格式：

<view>{{x+?}}</view>

逻辑运算基本格式：

<view>{{x==?}}</view>

三元运算基本格式：

<view>x>y:m:z</view>

数据绑定

条件数据绑定就是机根据绑定表达式的逻辑值来判断是否数据绑定当前前组件。

wx:if 条件数据绑定是指使用wx:if 这个属性来判断是否数据绑定当前组件。

当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来

，然后在<block>中添加wx:iff属性即可。

模板

在小程序中，如果要经常使用几个组件的组合，通常把这几个组件结合定义为一个模板，以后在需要的文件中]直接使用这个模板。
模板代码由wxml组成，因此其定义也是在 wxml 文件中其中<templlate>为模板标签，name属性用于定义模板的名称。

各个运算及数据绑定和模板的代码示例

wxml

<view>三元{{1>2?5:6 }}</view>
<view>逻辑{{age==30}}</view>
<view>算术{{age+80}}</view>
<view wx:if="age>30">1</view>
<view wx:elif="age==30">2</view>
<view wx:else>3</view>
<template name="man">
<view wx:for="{{students}}">
<text>姓名:{{item.name}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
</template>
<template is="man" data="{{students
}}"></template>

js 

  num:100,
  students:[
    {name:'lihua',height:35,weight:'game'}
  ]

代码的运行结果

页面事件

在小程序中，事件分为冒泡事件和非冒泡事件两大类型。冒泡事件冒泡事件是指某个组件上的
的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素
非冒泡事件非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个。如图

选择器 
目前，WXSS 仅支持 CSS 中常用的选择器，如.class、#id、element、∷before、aftert等
 常用属性
WXSS文件与CSS 文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如图