微信小程序 WXML提供了import和include引用方式
作者: --时间: 2025-05-17 19:48:43
阅读量:
使用import和include引用方式的微信小程序开发
微信小程序WXML提供了两种文件引用方式:import
和include
,方便开发者模块化管理代码。
1. 使用import引用template
import
可以在当前文件中嵌入目标文件定义的template
,使得这个template
可以在当前文件内被使用。
以在item.wxml
中定义一个名为item
的template
为例:
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在index.wxml
中引用item.wxml
,可以使用item
模板:
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
1.1 import的作用域
import
有作用域的概念。即只会import目标文件中定义的template
,而不会import目标文件import的template
。
例如:C import B,B import A,在C中可以使用B定义的template
,在B中可以使用A定义的template
,但是C不能使用A定义的template
。
<!--A.wxml-->
<template name="A">
<text>A template</text>
</template>
<!--B.wxml-->
<import src="a.wxml"/>
<template name="B">
<text>B template</text>
</template>
<!--C.wxml-->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
2. 使用include引用代码片段
include
可以将目标文件(除了<template/>
)的整个代码引入到当前位置。这种方式适合在多个页面中使用相同的代码片段,如页面头部和底部布局等。
header.wxml
中定义页面头部布局代码片段:
<!-- header.wxml -->
<view>header</view>
同样,在footer.wxml
中定义页面底部布局代码片段:
<!-- footer.wxml -->
<view>footer</view>
在index.wxml
中使用include
引入头部和底部的代码片段:。。。。。。
-
B2B2C多用户商城系统支持企业自营与商户入驻模式共存 会员一站式精细化营销工具 多用户分销,带来爆发式增长
系统支持平台自营+供应商店铺共存的经营模式(类天猫&京东模式),帮助企业打造生态级商业平台为目的的电子商务系统。
免费试用系统 -
B2B2B电商交易系统优化供应链协作 授信及账期支付 商品按照数量阶梯设价
全渠道订货/采购及经销商管理数字化系统,实现供应链整合和交易便捷化。
免费试用系统 -
S2B2B电商交易系统供销一体化,提高市场集中度 集团管控一体化,有效实现供需匹配 移动应用一体化,提高运营综合效率
上下游资源整合数字化解决方案,赋能产业供应链,构建产业互联网生态体系。
免费试用系统

更多产品任你选