微信小程序中 @import 与 <include> 的区别及使用场景

微信小程序中 @import 与 的区别及使用场景

在小程序开发中，为了提高代码的可维护性和复用性，合理使用模块导入机制至关重要。虽然 import 和 include 听起来相似，但它们分别作用于不同的层面，理解这一点能有效避免样式冲突或结构错乱。

WXSS 中的 @import

在样式文件（.wxss）中，我们使用 @import 指令来引入其他样式文件。这类似于 CSS 中的标准用法，但需要注意小程序的编译机制。

/* base.wxss */
@import "common.wxss";

当页面加载时，被引入文件的样式会合并到当前文件中。这种方式适合定义全局变量、基础配色或通用布局组件。由于它是样式层面的合并，被引入的内容会直接生效于当前页面的 DOM 节点。

WXML 中的

而在页面结构（.wxml）中，复用逻辑是通过 <include> 标签实现的。它允许将另一个 WXML 文件的内容直接插入到当前位置。

<!-- index.wxml -->
<include src="header.wxml" />

这对于头部导航、底部菜单等重复出现的 UI 结构非常有用。与 @import 不同，<include> 处理的是模板片段，它会将源文件中的节点树展开到调用处，而不是简单的样式叠加。

最佳实践建议

在实际项目中，建议遵循以下原则：

1. 样式层：公共样式统一放在 .wxss 中使用 @import 引用，保持样式表整洁。
2. 结构层：复杂的重复 UI 块拆分为独立的 .wxml 文件，通过 <include> 按需加载。
3. 作用域注意：@import 是全局样式合并，而 <include> 是局部结构插入，不要混淆两者的用途。

明确区分这两者，能让你的小程序项目结构更清晰，减少冗余代码，也方便后续维护。