微信小程序 WXML提供import和include两种引用方式的使用，以及WXSS的导入的使用

以你之姓@ 2022-04-13 12:51 1032阅读 0赞

## 一、学习 ##

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

## 二、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>

1.  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"/>  
    <template is="B"/>

### 3、include ###

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

<include src="header.wxml"/>
    	<view> body </view>
    	<include src="footer.wxml"/>
    	
    	<view> header </view>
    	
    	<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

## 四、总结 ##

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

发表评论取消回复

表情：

评论列表（有 0 条评论，1032人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序wxss使用var变量

开始用:root \{\}发现没有效果，后来查了下需要改成 page\{\} 就可以了： page {--ion-color-:red;} .var

浅浅的花香味﹌/ 2023年07月04日 14:17/ 0 赞/ 36 阅读

相关三.微信小程序 WXML

微信小程序 WXML 文章目录微信小程序 WXML WXML 1.数据绑定 1.1数据绑定

ゝ一纸荒年。/ 2023年07月03日 06:02/ 0 赞/ 61 阅读

相关微信小程序WXML语法之模板和引用

模板 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。定义模板使用 name 属性，作为模板的名字。然后在`<templ

缺乏、安全感/ 2023年07月03日 02:35/ 0 赞/ 63 阅读

相关 6.微信小程序（WXSS样式文件）+微信小程序（WXSS选择器）

微信小程序（WXSS样式文件）+微信小程序（WXSS选择器）微信小程序（WXSS样式文件）：大纲（1）WXSS简介（2）分类（3）尺寸单位rpx

╰半夏微凉°/ 2023年06月15日 07:25/ 0 赞/ 51 阅读

相关微信小程序wxml-to-canvas 的使用以及遇到的坑

1.首先根据官网提示安装即可 npm install --save wxml-to-canvas 2.构建NPM 这一步很关键，在微信开发者工具左上角-》

叁歲伎倆/ 2023年02月22日 12:27/ 0 赞/ 634 阅读

相关微信小程序实现通过js操作wxml的wxss属性示例

微信小程序实现通过js操作wxml的wxss属性示例前言实现思路实现代码前言在web端、手机端、webApp中可

傷城~/ 2022年09月11日 01:15/ 0 赞/ 265 阅读

相关微信小程序之WXMl的学习

WXML的学习包括： WXML语法，WXML数据绑定，属性，WXML列表渲染，条件渲染，WXML模板及引用，响应式像素，样式，选择器 WXML 语法： ![这里写图

客官°小女子只卖身不卖艺/ 2022年05月12日 10:36/ 0 赞/ 362 阅读

相关微信小程序 WXML提供import和include两种引用方式的使用，以及WXSS的导入的使用

一、学习最近在学习微信小程序，遇到文件的引用问题，记下来。二、WXML引用 1、WXML引用方式 import include 2

以你之姓@/ 2022年04月13日 12:51/ 0 赞/ 1033 阅读

相关 (微信小程序 )template模板介绍,以及import和include引用方式

1.定义模板使用\`<template name="tempName"></template>\`标签定义模板，并将模板名称命名为tempName，赋值给属性name。

喜欢ヅ旅行/ 2021年09月16日 02:42/ 0 赞/ 624 阅读

相关微信小程序 template模板引用、include引用

作用:其他wxml文件能直接使用模板定义好的html内容 template模板引用: 1、创建.wxml <template

女爷i/ 2021年07月24日 20:13/ 0 赞/ 664 阅读