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

以你之姓@ 2022-04-13 12:51 998阅读 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 条评论，998人围观）

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

相关阅读

相关微信小程序阻止小程序返回的两种方法

本次项目为uniapp开发，原生小程序也可以参考这两个方法。 wx.enableAlertBeforeUnload onLoad中声明 wx.enableAler

超、凢脫俗/ 2023年09月27日 20:18/ 0 赞/ 113 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关微信小程序day01_06之wxss 样式文件的使用

文章目录一. 样式导入二. 内联样式三. 选择器本节代码地址 [https://gitee.

迷南。/ 2022年03月15日 15:08/ 0 赞/ 321 阅读

相关微信小程序开发《三》 WXML

定义 WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。数据绑定 < view>\

浅浅的花香味﹌/ 2021年09月19日 10:48/ 0 赞/ 352 阅读

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

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

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

相关 WXML:微信小程序版HTML

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合[基础

╰+哭是因爲堅強的太久メ/ 2021年09月07日 18:48/ 0 赞/ 399 阅读

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

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

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