WXML提供两种文件引用方式import和include。
import
import是用来导入模板。
include
includes用来导入除模板以外的内容。
import
import可以在该文件中使用目标文件定义的template，如：
在item.wxml中定义了一个叫item的template：
<!--item.wxml -->
<templatename="item">
<text>{{text}}</text>
</template>
在index.wxml中引用了item.wxml，就可以使用item模板：
<importsrc="item.wxml"/>
<templateis="item"data="{{text: 'forbar'}}"/>
import的作用域
import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。
如：C import B，Bimport A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
<!--A.wxml -->
<template name="A">
<text> A template </text>
</template>
<!--B.wxml -->
<import src="a.wxml"/>
<templatename="B">
<text> B template </text>
</template>
<!--C.wxml -->
<import src="b.wxml"/>
<template is="A"/><!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
include
include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置，如：
<!--index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!--header.wxml -->
<view> header </view>
<!--footer.wxml -->
<view> footer </view>
页面路由
微信小程序页面跳转按照官方文档可以有很多种方法，比如给button绑定方法，navigator标签直接填写url，还可以在tabbar给一个快捷按钮。
重点说明：
***1. tabbar list只能是2-5个，注意格式，最后一个模块不要加逗号“,”。
2. tabbar不能和页面路由（navigator和bindtap事件）同时设置，同时设置的结果就是，tabbar可以跳转，navigator不能跳转，去掉tabbar的设置，页面路由正常。*
以下是几种方法示意。
button绑定方法
/* "pages/index/index.wxml" */
<button type="primary" plain bindtap="tomypage"> Go to My Page</button>
/* "pages/index/index.js */
tomypage: function() {
wx.navigateTo({
url:'../mypage/mypage'
})
}
第二种方法是navigator标签，可直接在wxml书写配置
<navigator url="../mypage/mypage"> Go to my Page </navigator>
第三种方法是在tabbar中添加
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "Home"
},
{
"pagePath": "pages/mypage/mypage",
"text": "logs"
}
]
}
小程序的文件格式介绍
在项目中我们可以看到四种文件类型：
- .js后缀的文件是脚本文件，页面的交互等代码在这里实现；
- .json后缀的文件是配置文件，主要是json数据格式存放，用于设置程序 的配置效果；
- .wxss后缀的是样式表文件，类似于前端中的css,用于对界面进行美化；
- .wxml后缀的文件是页面结构文件，用于构建页面，在页面上增加控件。
1.2 pages目录介绍
pages:主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件，.wxml文件是界面文件，.js是事件交互文件，用于处理界面的点击事件等功能；.wxss为界面美化文件，让界面显示的更加美观；.json为配置文件，用于修改导航栏显示样式等，小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要。
注意：文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.
1.3 utils
该文件件主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。
module.exports = {
formatTime: formatTime
}
对于允许外部调用的方法，用module.exports进行声明，才能在其他js文件中用以下代码引入
var util = require('../../utils/util.js')
然后就可以调用该方法。
1.4 app.js、app.json、app.wxss
app.js : 系统的方法处理文件，主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等
app.json : 系统全局配置文件，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改；
app.wxss : 全局的界面美化代码
条件渲染
<!--wxml-->
<view wx:if="{{length > 5}}"> 大于5 </view>
<view wx:elif="{{length > 2}}"> 大于2小于5 </view>
<view wx:else> 小于2 </view>
// page.js
Page({
data: {
length: '11'
}
})
wx:if
在MINA中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
也可以用wx:elif和wx:else来添加一个else块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因为wx:if 是一个控制属性，需要将它添加到一个标签上。
但是如果我们想一次性判断多个组件标签，我们可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意： <block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
wx:if vs hidden
因为wx:if之中的模板也可能包含数据绑定，所有当wx:if的条件值切换时，MINA有一个局部渲染的过程，
因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的，如果在初始渲染条件为false，MINA什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，
用hidden更好，如果在运行时条件不大可能改变则wx:if较好。
列表渲染
1，简单实现列表
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
2，在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
wx:for也可以嵌套，下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
原文链接：https://blog.csdn.net/eurus_/article/details/80837323
