WXML:微信小程序版HTML

╰+哭是因爲堅強的太久メ 2021-09-07 18:48 349阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合[基础组件][Link 1]、[事件系统][Link 2]，可以构建出页面的结构。

## 3.7.1 标签与属性 ##

常用基础标签text view

特征：

text 类似html span标签 行内元素，不换行；

view 类似html div标签 块级元素，换行；

<text>text 类似html span标签 行内元素</text>
    <text>，不换行</text>
    <view>view 类似html div标签 块级元素</view>
    <view>view 类似html div标签 换行</view>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L2ORXXPp-1621055917343)(image-20210429115340525.png)\]][img-L2ORXXPp-1621055917343_image-20210429115340525.png]

**公共属性**

所有组件都有以下属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">描述</th> 
   <th align="left">注解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">id</td> 
   <td align="left">String</td> 
   <td align="left">组件的唯一标示</td> 
   <td align="left">保持整个页面唯一</td> 
  </tr> 
  <tr> 
   <td align="left">class</td> 
   <td align="left">String</td> 
   <td align="left">组件的样式类</td> 
   <td align="left">在对应的 WXSS 中定义的样式类</td> 
  </tr> 
  <tr> 
   <td align="left">style</td> 
   <td align="left">String</td> 
   <td align="left">组件的内联样式</td> 
   <td align="left">可以动态设置的内联样式</td> 
  </tr> 
  <tr> 
   <td align="left">hidden</td> 
   <td align="left">Boolean</td> 
   <td align="left">组件是否显示</td> 
   <td align="left">所有组件默认显示</td> 
  </tr> 
  <tr> 
   <td align="left">data-*</td> 
   <td align="left">Any</td> 
   <td align="left">自定义属性</td> 
   <td align="left">组件上触发的事件时，会发送给事件处理函数</td> 
  </tr> 
  <tr> 
   <td align="left">bind* / catch*</td> 
   <td align="left">EventHandler</td> 
   <td align="left">组件的事件</td> 
   <td align="left">详见<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html" rel="nofollow">事件</a></td> 
  </tr> 
 </tbody> 
</table>

<view id="name" class="nameClass" style="font-style: italic;" hidden="">view 类似html div标签 块级元素</view>

.nameClass{ 
      font-size: larger;
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7xofLpV-1621055917346)(image-20210429120102784.png)\]][img-k7xofLpV-1621055917346_image-20210429120102784.png]

## 3.7.2 数据绑定 ##

数据绑定功能使得程序在运行过程中,具备动态改变渲染界面的能力,从而达到了更好的用户体验效果。在 WEB开发中,需要借助JavaScript并通过DOM接口来实现界面的动态更新,而在小程序中,则是使用WXML语言提供的数据绑定功能来实现的。

**简单数据绑定**

data: { 
    	id:1,
    	message: 'Hello MINA!',
    	number:1234,
    	condition:true,
    	isChecked:true,
    	person:{ 
    	  name:"张三",
    	  age:25,
    	  sex:"男"
    	}
    },

<view>{
       {message}}</view>
    <view>{
       {number}}</view>
    <view>{
       {condition}}</view>
    <view>{
       {isChecked}}</view>
    <view>{
       {person}}</view>
    <view>{
       {person.name}}</view>
    <view>{
       {person.age}}</view>
    <view>{
       {person.sex}}</view>
    
    <view data-number="{ {number}}">自定义属性</view>
    
    <view id="item-{ {id}}">组件属性</view>
    
    <view wx:if="{ {condition}}">控制属性</view>
    
    <checkbox checked="{ {isChecked}}"></checkbox>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-66JFwSL6-1621055964376)(image-20210429163024606.png)\]][img-66JFwSL6-1621055964376_image-20210429163024606.png]

**运算**

可以在 `{ {}}` 内进行简单的运算，支持的有如下几种方式：

三元运算

算数运算

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

逻辑判断

字符串运算

<view>{
       {"hello " + name}}</view>

数据路径运算

<view>{
       {object.key}} {
       {array[0]}}</view>

Page({ 
      data: { 
        object: { 
          key: 'Hello '
        },
        array: ['MINA']
      }
    })

## 3.7.3 列表渲染 ##

在组件上使用 `wx:for` 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

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

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

使用 `wx:for-index` 可以指定数组当前下标的变量名：

array:[
      { 
    	id:1,
    	name:"张三"
      },
      { 
    	id:2,
    	name:"李四"
      },
      { 
    	id:3,
    	name:"王五"
      }
    ]

<view wx:for="{ {array}}" wx:for-item="item" wx:for-index="index">
      {
       {index}}-{
       {item.id}}-{
       {item.name}}
    </view>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wN7qi57W-1621056012623)(image-20210501111752408.png)\]][img-wN7qi57W-1621056012623_image-20210501111752408.png]

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

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

1.  字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.  保留关键字 `*this` 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

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

**如不提供 `wx:key`，会报一个 `warning`， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ag8LRayh-1621056012626)(image-20210501115935730.png)\]][img-ag8LRayh-1621056012626_image-20210501115935730.png]

**block wx:for**  
类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{ {array}}" wx:key="id" wx:for-item="item" wx:for-index="index">
        {
       {index}}-{
       {item.id}}-{
       {item.name}}
    </block>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScZWuCCY-1621056012630)(image-20210501122734941.png)\]][img-ScZWuCCY-1621056012630_image-20210501122734941.png]

## 3.7.4 条件渲染 ##

**wx:if**

在框架中，使用 `wx:if=""` 来判断是否需要渲染该代码块：

也可以用 `wx:elif` 和 `wx:else` 来添加一个 else 块：

**block wx:if**

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

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

**hidden**

<view hidden="{ {condition}}">hidden</view>

因为 `wx:if` 之中的模板也可能包含数据绑定，所以当 `wx:if` 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 `wx:if` 也是**惰性的**，如果在初始渲染条件为 `false`，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

**相比之下，`hidden` 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。**

一般来说，`wx:if` 有更高的切换消耗而 `hidden` 有更高的初始渲染消耗。因此，**如果需要频繁切换的情景下，用 `hidden` 更好**，如果在运行时条件不大可能改变则 `wx:if` 较好。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wd45XExh-1621056091091)(image-20210502115952887.png)\]][img-wd45XExh-1621056091091_image-20210502115952887.png]

## 3.7.5 模版 ##

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

1，定义模版

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

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

2，使用模版

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

Page({ 
      data: { 
        item: { 
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

3，模版的作用域

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

## 3.7.6 引用 ##

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

**import**

`import`可以在该文件中使用目标文件定义的`template`，如：

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

<template name="item">
      <text>{
       {text}}</text>
    </template>

在 index.wxml 中引用了 item.wxml，就可以使用`item`模板：

**import 的作用域**

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

**如：C import B，B import A，在C中可以使用B定义的`template`，在B中可以使用A定义的`template`，但是C不能使用A定义的`template`**。

<template name="A">
      <text> A template </text>
    </template>
    
    <import src="a.wxml"/>
    <template name="B">
      <text> B template </text>
    </template>
    
    <import src="b.wxml"/>
    <template is="A"/>  
    <template is="B"/>

**include**

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

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

<view> header </view>

<view> footer </view>

## 3.7.7 事件 ##

**什么是事件**  
事件是视图层到逻辑层的通讯方式。  
事件可以将用户的行为反馈到逻辑层进行处理。  
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。  
事件对象可以携带额外信息，如 id, dataset, touches。

**事件的使用方式**

*  在组件中绑定一个事件处理函数。

如`bindtap`，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

*  在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({ 
      tapName: function(event) { 
        console.log(event)
      }
    })

**事件分类**

事件分为冒泡事件和非冒泡事件：

1.  冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2.  非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">触发条件</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">touchstart</td> 
   <td align="left">手指触摸动作开始</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">touchmove</td> 
   <td align="left">手指触摸后移动</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">touchcancel</td> 
   <td align="left">手指触摸动作被打断，如来电提醒，弹窗</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">touchend</td> 
   <td align="left">手指触摸动作结束</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">tap</td> 
   <td align="left">手指触摸后马上离开</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">longpress</td> 
   <td align="left">手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.5.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">longtap</td> 
   <td align="left">手指触摸后，超过350ms再离开（推荐使用longpress事件代替）</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">transitionend</td> 
   <td align="left">会在 WXSS transition 或 wx.createAnimation 动画结束后触发</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">animationstart</td> 
   <td align="left">会在一个 WXSS animation 动画开始时触发</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">animationiteration</td> 
   <td align="left">会在一个 WXSS animation 一次迭代结束时触发</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">animationend</td> 
   <td align="left">会在一个 WXSS animation 动画完成时触发</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">touchforcechange</td> 
   <td align="left">在支持 3D Touch 的 iPhone 设备，重按时会触发</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.90</a></td> 
  </tr> 
 </tbody> 
</table>

**绑定并阻止事件冒泡**

除 `bind` 外，也可以用 `catch` 来绑定事件。与 `bind` 不同， `catch` 会阻止事件向上冒泡。

例如在下边这个例子中，点击 inner view 会先后调用`handleTap3`和`handleTap2`(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发`handleTap2`，点击 outer view 会触发`handleTap1`。

<view id="outer" bindtap="handleTap1">
      outer view
      <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
      </view>
    </view>

**实例**一

实现文本输入框和文本框数据同步；

如下 效果：

![在这里插入图片描述][2021051513235975.gif_pic_center]

<input type="text" style="border:1px solid;padding:2px;margin:2px;" bindinput="handleInput" />
    <text>文本框的值是：{
       {num}}</text>

data: { 
    	num:''   
    },
    
    /** * input事件处理 * @param {*} e 事件源 */
    handleInput(e){ 
    	console.log(e.detail.value);
    	this.setData({ 
    	  num:e.detail.value
    	})
    },

通过bindinput绑定input事件，通过事件源参数e获取文本输入框数据，最后通过setData方法，设置num值；

**实例二**

实现简单加计算器

如下效果：

![在这里插入图片描述][20210515132424771.gif_pic_center]

eventTest.wxml代码：

eventTest.wxss代码：

.inputNumber{ 
      border:1px solid gray;
      padding:2px;
      margin:1px 20px 1px 20px;
    }

eventTest.js代码：

/** * 页面的初始数据 */
      data: { 
          numA:'',
          numB:'',
          total:''
      },
    
      /** * 处理按钮点击事件 * @param {} e 事件源 */
      handleTap(e){ 
        console.log(e);
        console.log(this.data.numA);
        console.log(this.data.numB);
        this.setData({ 
          total:parseInt(this.data.numA)+parseInt(this.data.numB)
        })
      },

这里我们要用bindtap绑定按钮点击事件；input双向绑定 model:value ；

事件代码里设置total数据；

**进阶，事件传参**

let action=e.currentTarget.dataset.action;
    if(action=="="){ 
      this.setData({ 
    	total:parseInt(this.data.numA)+parseInt(this.data.numB)
      })
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0_size_16_color_FFFFFF_t_70]

通过data- 带参数；

事件里通过e.currentTarget.dataset获取参数值；

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/index.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[img-L2ORXXPp-1621055917343_image-20210429115340525.png]: /images/20210716/da6888f3e722495c90667d18f4a709c1.png
[img-k7xofLpV-1621055917346_image-20210429120102784.png]: /images/20210716/2ee14d0b4a1949a3b1896b5f61a9d7a3.png
[img-66JFwSL6-1621055964376_image-20210429163024606.png]: /images/20210716/1e76d2066c9e43e0b4c28250eaacd1db.png
[img-wN7qi57W-1621056012623_image-20210501111752408.png]: /images/20210716/e11622e0853a48e5b526c823c82bf3df.png
[input]: https://developers.weixin.qq.com/miniprogram/dev/component/input.html
[switch]: https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
[img-ag8LRayh-1621056012626_image-20210501115935730.png]: /images/20210716/d9248eaa2fdf4da5ad80bfd80fc6df7e.png
[img-ScZWuCCY-1621056012630_image-20210501122734941.png]: /images/20210716/c9db35915cad420fb4c098dfd7db4263.png
[img-wd45XExh-1621056091091_image-20210502115952887.png]: /images/20210716/d8337e2e203446e1b068d2537de7753d.png
[2021051513235975.gif_pic_center]: /images/20210716/de83c57256ec460d8599ad204264e611.png
[20210515132424771.gif_pic_center]: /images/20210716/e58c93e4b8c74bb5bc2ca7be79e4e003.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0_size_16_color_FFFFFF_t_70]: /images/20210716/04cf914b4824466199ff4be9f620eb52.png