美文网首页es6
微信小程序(一)WXML模板

微信小程序(一)WXML模板

作者: 我拥抱着我的未来 | 来源:发表于2018-05-29 18:37 被阅读609次

WXML模板

本节学习目标

(1)了解wxml的基本概况和设计理念
(2) 掌握wxml语言的各种常用语法

(一)wxml是什么

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

(二)wxml语法规则

  • 所有的元素都需要闭合标签,类似
  • 所有的元素都必须正确嵌套，符合层级关系
  • 属性值必须使用引号包围
  • 标签必须使用小写(虽然编辑器能识别，但是有的场合识别不出来)
  • wxml中连续多个空格会被合并为1个空格
<text>Hello World</text>
<view><text>Hello World</text></view>
<text id="text1">myText</text>
<text>Hello       world</text> <!--渲染的时候会被处理成一个空格-->
  • 由于某些属性几乎被所有的组件使用，所以这些属性被抽离出来，形成组件的共同属性
属性名 类型 描述 注解
id String 组件唯一标识 页面内唯一
class String 组件样式类 在对应的wxss内定义
style String 组件的内联样式 常用于动态样式
hidden Boolean 组件是否显示 默认显示
data-* Any 自定义数据 触发时会上报
bind/catch EventHandler 组件事件 绑定事件用的

(三)wxml数据绑定

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

数据绑定(双向绑定)

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

  • wxml 的数据均来自对应的Page的data
  • 数据绑定使用的是Mustache 语法(双大括号)
<view>{{val1}}</view>
<view>{{val2}}</view>
<view>{{val3}}</view>
<view>{{val4}}</view>
在JS文件目录中
Page({
  data:{
  var2: undefined,
  var3: null,
  var4: "var4"
 }
})
----------------------
渲染的结果就是:
null
var4
注意: 在小程序中没有被定义或设置为undefined的变量不会被同步到wxml中去

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

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

(2)组件属性绑定

  • 组件属性绑定: 可以实现动态属性
 <view id="item-{{id}}"></view>
Page({
  data:{
    id:0
  }
})
--------------------
渲染结果:
<view id="item-0"></view>
  • 借助动态属性，可以实现如下操作
    (1) 动态样式
    (2) 动态宽度
    (3) 动态长度
    (4) .....

(3) 逻辑语法

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

(1) 三元运算符

<view class="{{is_top?'top-cls':'sub-cls'}}">Hi</view>

(2) 算数运算

  • 标签内支持简单的加减乘除
<view> {{a+b}}+{{c}}+d</view>
Page({
  data:{
    a:1,
    b:2,
    c:3
   }
})

(3)字符串运算

  • 标签内支持对字符串的操作
<view>{{"hello"+name}}</view>

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

(4) 数据路径运算

  • WXML支持对对象，数组，路径操作，读取内部的数据
<view>{{object.key}}
{{array[0]}}
</view>
--------------------
Page({
      data:{
         object:{
             key:"Hello"
            },
         array:['MiNA']
     }
})

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

  • WXML 可以在Mustache内进行数组的组合
 <view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>
------------------
Page({
   data:{
        zero:0
   }
})

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

 <template is="objectCombine" data="{{for:a,bar:b}}"></template>
-------------------
Page({
          data:{
             a:1,
             b:2
          }
})
------------------
组1代码组合后传入的数据为{for:1,bar:2}
  • 如果组合时，出现了相同的变量名，后面的变量会覆盖前面的变量
  • 花括号和引号之间如果有空格，空格最终将被解析为字符串

(四) 列表渲染

  • 了解列表渲染的使用场景
  • 掌握列表渲染的使用方法
  • 学会wx:key的使用
列表渲染使用说明
  • 列表渲染 : 将一个数组内的所有数据依次展示在界面上
  • 常用场景：(1)文章列表 (2)商品列表
  • 列表渲染示例：在组件的wx:for属性上绑定一个数组，就可以使用数组中项目的值来重复渲染该组件
    示例
  <view wx:for="{{forText}}"wx:key="index">
     <view>{{index}}---{{item}}</view>
  </view>
------------------------
Page({
  data: {
    forText:[1,2,3,4,5,6]
  }
})

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

  • 在渲染时，可能会面临要同时循环多个元素，那么可以使用辅助标签block来循环
 <block wx:for="{{forText}}"wx:key="index">
     <view>这个就是序号:{{index}}</view>
     <view>这个就是值:{{item}}</view>
  </block>
------------------------
Page({
  data: {
    forText:[1,2,3,4,5,6]
  }
})
  • 修改循环变量名

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

  <block wx:for="{{forText}}" wx:key="index" wx:for-index="xuhao" wx:for-item="firstzhi">
    <view>这个就是序号:{{xuhao}}</view>
    <view>这个就是值:{{firstzhi}}</view>
  </block>
  • wx:key用法

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

(五) 条件渲染

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

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

  • 控制单个组件的显示

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

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

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

  • else 属性

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

示例:

 <view wx:if="{{length>5}}">
1
</view>
<view wx:elif="{{length>2}}">
2
</view>
<view wx:else>
3
</view>

  • wx:if 和hidden区别

  • wx:if 根据值来判断组件是否需要渲染进入页面

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

(六) 模板使用

  • wxml提供了模板(template)，可以在模板中定义代码片段，然后在不同的页面调用
<template name="msgItem">
<view>
  <text>{{index}}:{{msg}}</text>
  <text>Time:{{time}}></text>
</view>
</template>
  • 每个模板都需要一个name属性，作为模板的名字
  • template标签内部包含的是具体的模板内容，标签内借助双大括号来进行数据绑定
  • 使用模板
<template is="msgitem" data="{{...item}}">
----------
Page({
data:{
   item:{
     index:0,
     msg:"this is a template",
     time:"2016-09-15" 
    }
}
})

备注模板之间传值可以用{{...xxxx}}这样能把对象完全展开。

  • wxml引用

wxml提供两种引用方式: import 和include

(1) import 可以引入目标文件中的template,template以外的不会被引入，在当前文件中使用该template,还保持独立的template
(2) include 则是将目标文件中的template代码进行整体引入，相当于复制过来。没有了独立性

举例

<import src="template.wxml">

相关文章