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

一、学习

• 最近在学习微信小程序，遇到文件的引用问题，记下来。

二、WXML引用

1、WXML引用方式

• import

• include

2、import方式

1. 使用

<import src="../template/foot-menu/foot_menu.wxml"/>
<template is="footMenu"/>

说明: footMenu 就是foot_menu.wxml中的最外层标签

<template name="footMenu">
</template>

2. import的作用域

• 概念：即只会import目标文件中定义的template，而不会import目标文件import的template。

• 如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

<template name="A">
  <text> A template </text>
</template>

<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

3、include

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

    <include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
    <!-- header.wxml -->
    <view> header </view>
    <!-- footer.wxml -->
    <view> footer </view>

• 特此说明，用了include的之后就可以直接不用在wxml中写上 template这个标签啦

三、WXSS引用

1、wxss引用方式

• import

2、import

@import "../template/foot_menu/foot_menu.wxss"

• 特此说明：是在你要被引入的那个文件的所在的对应的wxss中引入
• 例如：就是 index.wxml 引用了foot_menu_wxml，然后在index.wxss中引用foot_men.wxss

四、总结

• 最近在学习做微信小程序，记录一下，小伙伴有什么问题可以随时提出啦哟，大家一起学习进步。