欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

教程  微信小程序之WXML讲解--数据绑定、渲染、模版、引用等

小程序应用 本站 1077 0评论

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。类似html

借助wxml提供的组件我们可以实现文字的嵌入,图片的嵌入,视频的嵌入,各种能力的嵌入等等


1.wxml语法规则


· 所有的元素都需要闭合标签,类似

· 所有的元素都必须正确嵌套,符合层级关系

· 属性值必须使用引号包围

· 标签必须使用小写(虽然编辑器能识别,但是有的场合识别不出来)

· wxml中连续多个空格会被合并为1个空格

<text>Hello World</text>
<view><text>Hello World</text></view>
<text id="text1">myText</text>
<text>Hello       world</text> <!--渲染的时候会被处理成一个空格-->

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

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


2.数据绑定


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


在index.wxml中可以看到多处类似下面的代码:

<text class="user-motto">{{motto}}</text>

在代码中有一个由大括号括起来的内容{{motto}} 是微信中的数据绑定,在运行index页面时,这个内容会被index.js中的page函数中定义的data属性中的motto内容代替。看看下面的图解。

111.jpg


· 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)控制属性(需要在双引号之内)

<view wx:if="{{condition}}"></view>
Page({
  data: {
    condition: true
  }
})


(4)关键字(需要在双引号之内)

true:boolean 类型的 true,代表真值。

false: boolean 类型的 false,代表假值。

<checkbox checked="{{false}}"></checkbox>

特别注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。


(5) 逻辑语法

通过在{{}}内包含运算符进行简单的计算

(1) 三元运算符

(2) 算数运算符

(3) 字符串运算符

(4) 路径运算符


三元运算符:

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


算数运算:

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

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


字符串运算:

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

<view>{{"hello"+name}}</view>
Page({
  data:{
    name:"MIMI"
  }
})


数据路径运算:

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

<view>{{object.key}}
{{array[0]}}
</view>
Page({
      data:{
         object:{
             key:"Hello"
            },
         array:['MiNA']
     }
})


(6)数据对象组合---数组:

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

 <view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>
Page({
   data:{
        zero:0
   }
})


wxml 可以在双括号内进行对象的组合:

 <template is="objectCombine" data="{{for:a,bar:b}}"></template>
Page({
          data:{
             a:1,
             b:2
          }
})

最终合成的对象是 {for:1,bar:2}


另外一种比较常用的方法时用运算符 ... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
}

最终组合成的对象是 {a:1,b:2,c:3,d:4,f:5}


· 如果组合时,出现了相同的变量名,后面的变量会覆盖前面的变量

· 花括号和引号之间如果有空格,空格最终将被解析为字符串


3.条件渲染


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


1)控制单个组件的显示

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

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

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

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


else 属性

也可以用 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 和hidden区别

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

· hidden:始终都会进行渲染,但是会根据其值决定是否在页面中展示

· 如果组件的显示切换频繁,就用hidden,反之则使用wx:if


2)block  wx:if

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

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

注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。


4.列表渲染


所谓的列表渲染,就是对于列表数据的展示。其使用场景大多为商品列表页面、购物车页面、收藏列表等页面,应用广泛。微信小程序实现列表展示的方式其实就是用for循环来循环生成相对应的item布局,使用 wx:for 重复渲染组件。


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

· 使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名。


wx:for 一般有两种使用场景,一种是配合view来使用,另一种则是搭配block来使用。这两者的区别就在于block不会被渲染,而使用view组件则会多渲染一次,两者可实现同样的效果,根据不同的需求选择。

<view wx:for="{{array}}" wx:for-index="position" wx:for-item="itemName"></view>
<block wx:for="{{array}}"></block>

例如:

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
page({
    data:{
        array:[{
            message:'foo'
        },{
            message:'bar'
        }]
    }
})

使用 wx:for-item 可以指定数组当前元素的变量名, 

使用 wx:for-index 可以使用数组当前下标的变量名;

<view wx:for="{{array}}" wx:for-item="idex" wx:for-index="itemname">
    {{idex}}:{{itemname.message}}
</view>


wx:for 也可以嵌套,下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view>
  </view>
</view>


下面将产品item列表进行渲染,并改为数据绑定形式。

home.js

//在data中添加 goods数据
goods:[
    {
        "imagePath":"http://img02.tooopen.com/images/tooopen1.jpg",
        "good-name":"是滴是滴所多所多所多所多所多所多所多所",
        price:34,
        "original-price":2222,
        "had-sale":34
    },
    {
        "imagePath":"http://img02.tooopen.com/images/tooopen2.jpg",
        "good-name":"是滴是滴所多所多所多所多所多所多所多所",
        price:34,
        "original-price":2222,
        "had-sale":34
    }

home.wxml

//修改goodsItem组件
<view class='goods' wx:for="{{goods}}">
   <view class="goods-item">
        <image src="{{item.imagePath}}" />
        <view class="goods-desc">
            <view class="goods-name">{{item.good_name}}</view>
            <view>
                <text class="momey-tag">¥</text>
                <text class="price">{{item.price}}</text>
                <text style="text-decoration: line-through" class="original-price">¥{{item.original_price}}</text>
            </view>
            <view class="had-sale">
                已售
                <text>{{item.had_sale}}</text>
            </view>
            <view>
                <span class="to-purchase">立即抢购</span>
            </view>
        </view>
  </view> 
</view>

效果如下:

222.jpg


在渲染时,可能会面临要同时循环多个元素,那么可以使用辅助标签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就会在原数据的情况下渲染数据。提升渲染效率。


5.使用模版


WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。


定义模板

使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,如:

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

· 每个模板都需要一个name属性,作为模板的名字

· template标签内部包含的是具体的模板内容,标签内借助双大括号来进行数据绑定


使用模板

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

<template is="msgItem" data="{{...item}}" />
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

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


模板的作用域

模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。


6.wxml引用


WXML 提供两种文件引用方式import和include


1)import

import可以在该文件中使用目标文件定义的template,如:

在 item.wxml 中定义了一个叫item的template:

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml,就可以使用item模板:

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />


import 的作用域

import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。

如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A">
  <text>A template</text>
</template>
<!-- B.wxml -->
<import src="a.wxml" />
<template name="B">
  <text>B template</text>
</template>
<!-- C.wxml -->
<import src="b.wxml" />
<template is="A" />
<!-- Error! Can not use tempalte when not import A. -->
<template is="B" />


2)include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,如:

<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
<!-- header.wxml -->
<view>header</view>
<!-- footer.wxml -->
<view>footer</view>


7.事件


关于wxml中用到的事件请参考官方文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html 


参考网址:

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/ 

http://www.php.cn/xiaochengxu-408840.html 

https://www.jianshu.com/p/9d06d41322b0

https://www.jianshu.com/p/2057d88f0920

https://blog.csdn.net/qiphon3650/article/details/79558105 

https://blog.csdn.net/lecepin/article/details/54615553 


转载请注明: ITTXX.CN--分享互联网 » 微信小程序之WXML讲解--数据绑定、渲染、模版、引用等

最后更新:2020-04-18 00:23:21

赞 (3) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽