微信小程序 WXML提供了import和include引用方式

WXML提供两种文件引用方式import和include。

import 
import是用来导入模板。

include 
includes用来导入除模板以外的内容。

import

import可以在该文件中使用目标文件定义的template，如：

在item.wxml中定义了一个叫item的template：

1.  <!--item.wxml -->

2.  <templatename="item">

3.  <text>{{text}}</text>

4.  </template>

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

1.  <importsrc="item.wxml"/>

2.  <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。

1.  <!--A.wxml -->

2.  <template name="A">

3.  <text> A template </text>

4.  </template>

1.  <!--B.wxml -->

2.  <import src="a.wxml"/>

3.  <templatename="B">

4.  <text> B template </text>

5.  </template>

1.  <!--C.wxml -->

2.  <import src="b.wxml"/>

3.  <template is="A"/><!-- Error! Can not use tempalte when not import A. -->

4.  <template is="B"/>

include

include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置，如：

1.  <!--index.wxml -->

2.  <include src="header.wxml"/>

3.  <view> body </view>

4.  <include src="footer.wxml"/>

1.  <!--header.wxml -->

2.  <view> header </view>

1.  <!--footer.wxml -->

2.  <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'    })    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

第二种方法是navigator标签，可直接在wxml书写配置

<navigator url="../mypage/mypage"> Go to my Page </navigator>

• 1

第三种方法是在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  } 

• 1
• 2
• 3

对于允许外部调用的方法，用module.exports进行声明，才能在其他js文件中用以下代码引入

var util = require('../../utils/util.js')  

• 1

然后就可以调用该方法。

1.4 app.js、app.json、app.wxss

app.js : 系统的方法处理文件，主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等 
app.json : 系统全局配置文件，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改； 
app.wxss : 全局的界面美化代码

 条件渲染