WXML語法不知道？面試會被淘汰掉嗎？

微信小程序近兩年中獲得了快速的發展，微信小程序的火爆，或許就連創始人張小龍也沒有想到，這只是一個方便你們，提升用戶體驗度的小工具，但就其如今的發展態勢來看，微信小程序已經不僅僅是以前覺得的功能簡單，微信小程序給了你們不少的機會。

WXML 介紹

全稱是 WeiXin Markup Language，是小程序框架設計的一套標籤語言，結合小程序的基礎組件、事件系統，能夠構建出頁面的結構，相似html。

藉助wxml提供的組件咱們能夠實現文字的嵌入，圖片的嵌入，視頻的嵌入，各類能力的嵌入等等

接下來讓咱們瞭解下

WXML語法之模板和引用

模板

WXML提供模板（template），能夠在模板中定義代碼片斷，而後在不一樣的地方調用。

定義模板

01

使用 name 屬性，做爲模板的名字。而後在<template/>內定義代碼片斷，如：

使用模板

02

使用 is 屬性，聲明須要的使用的模板，而後將模板所須要的 data 傳入，如：

is 屬性可使用 Mustache 語法，來動態決定具體須要渲染哪一個模板：

模板的做用域

03

模板擁有本身的做用域，只能使用 data 傳入的數據以及模板定義文件中定義的 <wxs /> 模塊。

引用

WXML 提供兩種文件引用方式import和include。

import

01

import能夠在該文件中使用目標文件定義的template，如：

在item.wxml中定義了一個叫item的template：

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

import 的做用域

02

import 有做用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template。

如：C import B，B import A，在C中可使用B定義的template，在B中可使用A定義的template，可是C不能使用A定義的template

import 的做用域

03

include能夠將目標文件除了 <template/> <wxs/> 外的整個代碼引入，至關因而拷貝到 include 位置，如：

接下來經過一個小例子來使用模板

新建一個Page:templates/messages，在其WXML文件中添加以下模板代碼：

在其WXSS中添加以下代碼：

而後分別新建一個QQ消息文件夾和一個微信消息文件夾來同時使用此模板：

qq.js文件中添加消息列表來模擬服務器發來的消息：

qq.wxml文件中引用以前的模板：

qq.wxss文件中也引用模板文件夾中的模板:

微信文件夾同理。運行後以下圖所示