微信小程序(一)WXML模板

WXML模板

本节学习目标

(1)了解wxml的基本概况和设计理念

(2) 掌握wxml语言的各种常用语法

(一)wxml是什么

wxml 是微信小程序团队设计的一套标签语言，可以构造出页面的结构,类似html
借助wxml提供的组件我们可以实现文字的嵌入，图片的嵌入，视频的嵌入，各种能力的嵌入等等

(二)wxml语法规则

所有的元素都需要闭合标签,类似
所有的元素都必须正确嵌套，符合层级关系
属性值必须使用引号包围
标签必须使用小写(虽然编辑器能识别，但是有的场合识别不出来)
wxml中连续多个空格会被合并为1个空格

Hello World
Hello World
myText
Hello       world

由于某些属性几乎被所有的组件使用，所以这些属性被抽离出来，形成组件的共同属性

属性名	类型	描述	注解
id	String	组件唯一标识	页面内唯一
class	String	组件样式类	在对应的wxss内定义
style	String	组件的内联样式	常用于动态样式
hidden	Boolean	组件是否显示	默认显示
data-*	Any	自定义数据	触发时会上报
bind/catch	EventHandler	组件事件	绑定事件用的

(三)wxml数据绑定

了解数据绑定的使用场景
掌握基本的数据绑定用法

数据绑定(双向绑定)

用户界面呈现会因为时刻不同，数据发生变化而有所不同，也会因为用户操作发生了动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力,从而达到更好的用户体验。

wxml 的数据均来自对应的Page的data
数据绑定使用的是Mustache 语法(双大括号)

{{val1}}
{{val2}}
{{val3}}
{{val4}}
在JS文件目录中
Page({
  data:{
  var2: undefined,
  var3: null,
  var4: "var4"
 }
})
----------------------
渲染的结果就是:
null
var4
注意: 在小程序中没有被定义或设置为undefined的变量不会被同步到wxml中去

(1)数据绑定之内容绑定

数据绑定区分大小写

{{demoText}}
Page({
  data:{
    demoText:"Here is Demo Text"
   }
})
-------------
渲染的效果就是Here is Demo Text
特别注意: 内容绑定的参数是大小写敏感的

(2)组件属性绑定

组件属性绑定: 可以实现动态属性

 
Page({
  data:{
    id:0
  }
})
--------------------
渲染结果:

借助动态属性，可以实现如下操作
(1) 动态样式
(2) 动态宽度
(3) 动态长度
(4) .....

(3) 逻辑语法

通过在{{}}内包含运算符进行简单的计算
(1) 三元运算符
(2) 算数运算符
(3) 字符串运算符
(4) 路径运算符

(1) 三元运算符

Hi

(2) 算数运算

标签内支持简单的加减乘除

 {{a+b}}+{{c}}+d
Page({
  data:{
    a:1,
    b:2,
    c:3
   }
})

(3)字符串运算

标签内支持对字符串的操作

{{"hello"+name}}

Page({
  data:{
    name:"MIMI"
  }
})

(4) 数据路径运算

WXML支持对对象，数组，路径操作，读取内部的数据

{{object.key}}
{{array[0]}}

--------------------
Page({
      data:{
         object:{
             key:"Hello"
            },
         array:['MiNA']
     }
})

(5)数据对象组合---数组

WXML 可以在Mustache内进行数组的组合

 {{item}}
------------------
Page({
   data:{
        zero:0
   }
})

(6) wxml 可以在双括号内进行对象的组合

 
-------------------
Page({
          data:{
             a:1,
             b:2
          }
})
------------------
组1代码组合后传入的数据为{for:1,bar:2}

如果组合时，出现了相同的变量名，后面的变量会覆盖前面的变量
花括号和引号之间如果有空格，空格最终将被解析为字符串

(四) 列表渲染

了解列表渲染的使用场景
掌握列表渲染的使用方法
学会wx:key的使用

列表渲染使用说明

列表渲染 : 将一个数组内的所有数据依次展示在界面上
常用场景：(1)文章列表 (2)商品列表
列表渲染示例：在组件的wx:for属性上绑定一个数组，就可以使用数组中项目的值来重复渲染该组件
示例

  
     {{index}}---{{item}}
  
------------------------
Page({
  data: {
    forText:[1,2,3,4,5,6]
  }
})

默认情况下,数组元素中当前项的下标变量名为index,当前项目值为item,必须要加上wx:key他表示获取到的序号

在渲染时，可能会面临要同时循环多个元素，那么可以使用辅助标签block来循环

 
     这个就是序号:{{index}}
     这个就是值:{{item}}
  
------------------------
Page({
  data: {
    forText:[1,2,3,4,5,6]
  }
})

修改循环变量名

wx:for-index="自定义序号名称", wx:for-item="自定义序号值"

  
    这个就是序号:{{xuhao}}
    这个就是值:{{firstzhi}}

wx:key用法

在未使用wx:key比如数据顺序发生了变更，会改变数据的结构，导致重新渲染。要是使用了wx:key就会在原数据的情况下渲染数据。提升渲染效率。

(五) 条件渲染

了解条件渲染的使用场景
学习条件渲染的语法规则
明确wx:if和hidden的区别

(1) 条件渲染

在小程序的不同生命周期和不同的用户操作情况下，可能需要为用户展示和响应不同的内容，在这个时候，我们可以借助条件渲染来展示内容

控制单个组件的显示

在组件上加入wx:if来控制组件的显示和隐藏

当wx:if对应的值为true的时候，对应组件会进行渲染
当wx:if对应的值为false的时候，对应的组件不会进行渲染

else 属性

(1) wx:if 当进行条件判断的时候，使用wx:if来进行初始的条件判断，可单独出现
(2) wx:else : 如果需要进行多种条件判断结果使用wx:else 来辅助进行结果判断
(3) wx:elif : 如果项目不止两个判断结果，使用wx:elif来辅助进行结果的输出

示例:

wx:if 和hidden区别
wx:if 根据值来判断组件是否需要渲染进入页面
hidden:始终都会进行渲染,但是会根据其值决定是否在页面中展示
如果组件的显示切换频繁，就用hidden,反之则使用wx:if

(六) 模板使用

wxml提供了模板(template)，可以在模板中定义代码片段，然后在不同的页面调用

每个模板都需要一个name属性，作为模板的名字
template标签内部包含的是具体的模板内容，标签内借助双大括号来进行数据绑定
使用模板