微信小程序-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>

 

 

 

 

 

---

資料：

　　官方網站語法