使用import和include引用方式的微信小程序开发

微信小程序WXML提供了两种文件引用方式：import和include，方便开发者模块化管理代码。

---

1. 使用import引用template

import可以在当前文件中嵌入目标文件定义的template，使得这个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'}}"/>
  

1.1 import的作用域

import有作用域的概念。即只会import目标文件中定义的template，而不会import目标文件import的template。

例如：C import B，B import 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"/>
    <template name="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"/>
  

2. 使用include引用代码片段

include可以将目标文件（除了<template/>）的整个代码引入到当前位置。这种方式适合在多个页面中使用相同的代码片段，如页面头部和底部布局等。

例如，在header.wxml中定义页面头部布局代码片段：

  
    <!-- header.wxml -->
    <view>header</view>
  

同样，在footer.wxml中定义页面底部布局代码片段：

  
    <!-- footer.wxml -->
    <view>footer</view>
  

在index.wxml中使用include引入头部和底部的代码片段：

  。。。。。。