微信小程序学习笔记二

WXML 模板

1. 介绍

   WXML 要求标签必须严格闭合，没有闭合将会导致编译错误

   可有属性，属性的格式基本上为 key="value"

   属性大小写敏感，class, Class是不同的属性

2. 数据绑定

   • WXML通过 {{变量名}}绑定 WXML 文件和对应的 Javascript 文件中的 data 对象属性
   • 属性值可动态改变，但必须被包裹于 “” 中;
   • 变量名大小写敏感，{name}``````{Name}是两个不同的变量;
   • 未被定义的变量或是被设置为undefined的变量不会被同步到 wxml;

3. 逻辑语法

   {{变量名}}语法可使得 WXML 拥有动态渲染的能力，除此之外还可在 {{}} 内进行简单的逻辑运算

   • 三元运算

     <!-- 根据 a 的值是否等于 10 在页面输出不同的内容 -->
     <text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>
     

   • 算数运算

     <!--
     { a: 1,  b: 2, c: 3 }
     -->
     <view> {{a + b}} + {{c}} + d </view>
     <!-- 输出 3 + 3 + d -->
     

   • 字符串拼接

     <!--   { name: 'world' }    -->
     <view>{{"hello " + name}}</view>
     <!-- 输出 hello world -->
     

     {{}} 中可以直接放置数字、字符串或是数组

4. 条件逻辑

   wx:if="{{condition}}"判断是否需要渲染该代码块

   <view wx:if="{{condition}}">True</view>
   

   //使用 wx:elif 和 wx:else 添加 else 块
   <view wx:if="{{length>5}}">1</view>
   <view wx:elif="{{length>2}}">2</view>
   <view wx:else>3</view>
   

   wx:if是一个控制属性，需将他添加至一个标签上，若要一次性判断多个组件标签，可使用<block/>标签将多个组件包装起来，并在上边使用 wx:if控制属性

   <block wx:if="{{true}}">
       <view>view1</view>
       <view>view2</view>
   </block>
   

5. 列表渲染

   组件上使用 wx:for控制属性绑定一个数组，

   默认数组的当前项的下标变量名为 index,数组当前项的变量名默认为 item

   //使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名
   <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
       {{idx}}:{{itemName.message}}
   </view>
   

   wx:for用在 <block/>标签上，以渲染一个包含多节点的结构块

   <block wx:for="{{[1,2,3]}}">
       <view> {{index}} </view>
       <view> {{item}} </view>
   </block>
   

   若列表中的项目位置会动态改变或有新的项目添加至列表中，并且希望列表中的项目保持自己的特征和状态 （如 <input/>中的输入内容，```` ```的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

   wx:key的值的两种提供形式

   • 字符串，

     for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变 ；

   • 保留关键字 this

     for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

     当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

6. 模板

   可在模板中定义代码片段，在不同地方调用

   //使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，
   <template name="msgItem">
     <view>
       <text> {{index}}: {{msg}} </text>
       <text> Time: {{time}} </text>
     </view>
   </template>
   
   

   使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

   is可以动态决定具体需要渲染哪个模板

7. 引用

   • import

     在该文件中，使用目标文件定义的 template

     有作用域的概念,只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,不具有 递归 的特性 --> C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义template

   • include

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

8. 共同属性 – 所有 wxml 标签均支持的属性

   属性名	类型	描述	注解
   id	String	组件的唯一标识	整个页面唯一
   class	String	组件的样式类	在对应的 WXSS 中定义的样式类
   style	String	组件的内联样式	可动态设置的内联样式
   hidden	Boolean	组件是否显示	所有组件默认显示
   data-*	Any	自定义属性	组件上触发的事件时,会发送给事件处理函数
   bind* / catch*	EventHandler	组件的事件