小程序中import与include

最新推荐文章于 2024-04-20 11:08:19 发布

原创最新推荐文章于 2024-04-20 11:08:19 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

文章标签：

2 篇文章

订阅专栏

本文详细解析了在微信小程序中如何使用WXML的import和include指令来导入模板和非模板代码，包括在同一页面及跨页面调用模板的方法，并展示了如何在不同页面间复用代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用import导入模板代码.

用include导入除模板定义之外的代码.相当于是复制到include位置.

注意 import有作用域的概念,即只会import目标文件中定义template,而不会import目标文件import的template

一.在wxml自己中调用自己的模板

<template name="mytext">
  <view>
    <text>这是自己写的</text>
  </view>
</template>

<!-- 引用自己页面的模板 -->
 <template is="mytext"/>

logs.wxml中的结果

二.在其他页面调用模板(logs.wxml调用index.wxml里的模板)

index.wxml中的模板

<template name="firsttemplate">
  <view>
    <text>logs调用index中的模板</text>
  </view>
</template>

logs.wxml中引用

<import src ="../index/index.wxml"/>
<template is="firsttemplate"/>

logs.wxml中的结果

三.logs.wxml引用index.wxml中模板以外的代码(只要不是模板都行)

index.wxml

<view>eeeee</view>
<view>55555</view>
<view>3333</view>

logs.wxml

<!-- 引用模板以外的代码 -->
<include src="../index/index.wxml"/>

logs.wxml中的结果

三.index.wxml引用text.wxml中的模板然后logs.wxml引用index.wxml

text.wxml

<template name="loop">
  <view>text里的内容</view>
</template>

index.wxml

<import src="../text/text.wxml"/>
<template is="loop"/>

logs.wxml

<!-- 引用模板以外的代码 -->
<include src="../index/index.wxml"/>

logs.wxml中的结果