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文件中也引用模板文件夹中的模板:

微信文件夹同理。运行后以下图所示