微信小程序-WXML

一：WXML的介绍

WXML（WeiXin Markup Language）,是框架设计的标签语言，结合组件、WXS和事件系统，可以构建页面结构。

二：WXML语言特性

1：数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

 

例如：内容绑定

-----------index.js------------------- 
 <view>
    <text>{{message}}</text>
  </view>

------------index.wxml-------------------
Page({
    data: {
        message: "hello world",
    })

 

属性绑定

-----------index.js------------------- 
 <view>
    <text data-name="{{message}}"></text>
  </view>

------------index.wxml-------------------
Page({
    data: {
        message: "hello",
    })

 

运算符绑定

-----------index.js------------------- 
 <view>
    <text hidden="{{flag? true:false}}></text>
  </view>

------------index.wxml-------------------
Page({
    data: {
       flag: false,
    })

 

 

2：列表渲染

----------index.wxml----------------------
  <view>
    <block wx:for="{{items}}" wx:for-item="item" wx-key="index">
      <view>{{index}:{{item.name}}}</view>
    </block> 
  </view>

--------index.js------------------
Page({
    data: {
        items:[
          { name: "A" },
          { name: "B" },
          { name: "C" },
        ],
}）

 

 

3：条件渲染

----------index.wxml----------------------------
  <view>今天吃什么？</view>
  <view wx:if="{{condition === 1}}">
    饺子
  </view>
  <view wx:elif="{{condition === 2}}">
    面试
  </view>
  <view wx:else>
    苹果
  </view>

------------index.js--------------------------
Page({
    data: {
        items:{
          condition: Math.floor(Math.random()*3+1)
        }}
    })

 

 

4：模板引用

（1）模板

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

<template is="msgItem" data="{{...item}}" />
//使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

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

 

（2）引用

方式一：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。

方式二：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>

 

 

 

 

 

---

资料：

　　官方网站语法