关于微信小程序开发的import与include方式引用文件的用法

在写微信小程序时，wxml页面文件中会引用到其它页面文件。可以运用import方式引用文件也可以运用include方式引用文件。然而在现在的微信小程序开发百度中，关于这方面的讲解还不够多太过于一笔带过，我在这通过自身学习，充分的了解到他的用法，来给大家阐述一下个人见解。

如出现以下问题，均可以通过下面的方式解决。

问题1：

wxml文件错误，错误信息：未找到页面 pages/index/index对应的wxml文件

问题2：

VM709:2 ./pages/index/index.wxml
(anonymous) @ VM709:2
VM709:3  Path "template.wxml" not found from "./pages/index/index.wxml".
  20 | <view>页面内容</view>  -->
  21 | 
> 22 | <import src="template.wxml"/>
     |  ^
  23 | <template is="item" data="{{text:'import test'}}"/>
(anonymous) @ VM709:3
VM711:1 Thu Jun 21 2018 22:31:05 GMT+0800 (中国标准时间) WXML Runtime warning
VM711:2 ./pages/index/index.wxml
(anonymous) @ VM711:2
VM711:3  Template "item" not found.
  21 | 
  22 | <import src="template.wxml"/>

> 23 | <template is="item" data="{{text:'import test'}}"/>

问题3：VM789:2 ./pages/index/index.wxml
(anonymous) @ VM789:2

VM789:3 ./pages/index/index.wxml:include:-1:-1: Included path `header.wxml` not found from `./pages/index/index.wxml`.

这些问题均是你所在的wxml想要引用其他wxml时出现的错误。

在下面举个例子

在index.wxml文件中

< include src= "header.wxml" / >

< view >页面内容 </ view >

在header.wxml文件中

< view class= "header">

< image src= "../img/tree.jpg"></ image >

< text >app </ text >

</ view >

运行结果：

这样的话则犯了一个错误，则是路径问题，include的src路径不可以是header而已，它会找不到header这个路径，应该改成

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

运行结果：

同理，若是import出现这个问题也是在路径上出现了问题。

举个例子

在index.wxml文件中

< import src= "template.wxml" / >

< template is= "item" data= "{{text:'import test'}}" / >

在template.wxml文件中

< template name= "item">

< text >{{text}} </ text >

</ template >

运行结果：

我们需要把index.wxml中的路径更改为：

< import src= "../template.wxml" / >

运行结果：

总结出这个东西../是路径的上一个目录，不用加上page/...

PS：在app.json中，要对index事先做定义，而且要把index放在第一位，才可以运行得到。

本人也是小白学习微信小程序开发的，通过摸索的出来的一些经验，希望能够帮助跟我一样学习微信小程序开发的人儿们，减少一些弯路。