1. 什么是小程序模板 template小程序模板 template 是一种用于复用界面结构的代码片段机制。它允许开发者把一段可重复使用的 WXML 结构抽离出来在多个页面中通过 import 或 include 的方式引用从而避免重复编写相同的界面代码。模板本身不包含业务逻辑只负责展示传入的数据。通过 data 属性页面可以向模板传递参数实现同一套模板在不同场景下展示不同内容的效果。2. 模板的定义方式定义一个模板需要使用template标签并通过name属性为模板命名。模板内部可以编写任意 WXML 结构并使用{{ }}插值表达式绑定传入的数据。下面是一个基础模板定义的示例文件名为card.wxmltemplate namecard view classcard view classcard-title{{title}}/view view classcard-content{{content}}/view /view /template在这个示例中模板名为card内部使用了title和content两个数据字段它们将在引用模板时通过 data 属性传入。3. import 引用模板要在页面中使用模板需要通过import标签引入模板文件。import 的特点是它只能引用目标文件中定义的模板不能间接引用目标文件里再 import 的其他模板。在页面的 WXML 文件中引入模板并使用的示例import srccard.wxml / template iscard data{{...item}} /其中src指定模板文件的路径is指定要使用的模板名称data用于传递数据。使用展开运算符...可以将对象的所有属性一次性传递给模板。4. 数据传参的几种方式模板的数据传参主要有以下几种常见方式开发者可以根据实际场景灵活选择。4.1 直接传递对象可以将整个对象作为 data 传入模板内部通过字段名直接访问template iscard data{{item}} /此时模板中可以直接使用{{title}}、{{content}}等字段。4.2 使用展开运算符展开运算符可以将对象的属性平铺传递给模板适合传递多个独立字段的场景template iscard data{{...item}} /4.3 传递单个字段如果只需要传递某一个字段可以直接指定template iscard data{{title: item.title}} /这种方式适合模板只依赖少量数据、且字段名需要映射的场景。5. 模板与 include 的区别除了 import小程序还提供了 include 方式引入 WXML 片段。两者的核心区别在于import 可以传递数据并支持模板的 is 动态选择而 include 只是简单的代码复制不能传递数据。include 的使用方式如下include srcheader.wxml /include 适合引入不依赖数据的静态片段例如公共头部、底部导航等而需要数据驱动的复用结构则应优先使用 template 配合 import。6. 实战示例列表中使用模板下面通过一个完整的列表示例演示模板在实际页面中的使用效果。假设有一个商品列表页面每个商品项使用同一个模板渲染。首先定义商品卡片模板product.wxmltemplate nameproduct view classproduct-item image src{{image}} classproduct-image / view classproduct-name{{name}}/view view classproduct-price{{price}}/view /view /template然后在页面 WXML 中引入模板并通过 wx:for 循环渲染商品列表import srcproduct.wxml / view classproduct-list block wx:for{{products}} wx:keyid template isproduct data{{...item}} / /block /view对应的 JS 数据如下Page({ data: { products: [ { id: 1, image: /images/a.png, name: 商品A, price: 99 }, { id: 2, image: /images/b.png, name: 商品B, price: 199 }, { id: 3, image: /images/c.png, name: 商品C, price: 299 } ] } });运行后页面会循环渲染三个商品卡片每个卡片展示对应的图片、名称和价格实现了界面结构的复用。7. 注意事项与常见问题在使用模板时有几个容易踩坑的地方需要特别注意。模板名称不能重复同一个页面中引入的多个模板文件如果存在同名模板后引入的会覆盖先引入的使用时需注意命名唯一性。import 不能间接引用import 只能引用目标文件中直接定义的模板目标文件里再 import 的其他模板无法被当前页面使用。data 传参是单向的模板内部不能修改传入的数据并同步回页面模板只负责展示。样式需要单独处理模板中的 class 样式需要在页面的 wxss 文件中定义模板文件本身不包含样式。事件绑定模板内部可以绑定事件但事件处理函数需要定义在使用模板的页面中。8. 总结小程序模板 template 是提升开发效率的重要工具通过定义、import 引用和数据传参三个核心步骤可以轻松实现界面结构的复用。合理区分 template 与 include 的使用场景注意命名唯一性和数据单向传递等细节就能在项目中灵活运用模板机制减少重复代码提升代码的可维护性。 
长河君 · 2026/10/8 18:53:40 · 阅读 1.2k 小程序模板 template 一文搞懂：定义、import 引用与数据传参
1. 什么是小程序模板 template小程序模板 template 是一种用于复用界面结构的代码片段机制。它允许开发者把一段可重复使用的 WXML 结构抽离出来在多个页面中通过 import 或 include 的方式引用从而避免重复编写相同的界面代码。模板本身不包含业务逻辑只负责展示传入的数据。通过 data 属性页面可以向模板传递参数实现同一套模板在不同场景下展示不同内容的效果。2. 模板的定义方式定义一个模板需要使用template标签并通过name属性为模板命名。模板内部可以编写任意 WXML 结构并使用{{ }}插值表达式绑定传入的数据。下面是一个基础模板定义的示例文件名为card.wxmltemplate namecard view classcard view classcard-title{{title}}/view view classcard-content{{content}}/view /view /template在这个示例中模板名为card内部使用了title和content两个数据字段它们将在引用模板时通过 data 属性传入。3. import 引用模板要在页面中使用模板需要通过import标签引入模板文件。import 的特点是它只能引用目标文件中定义的模板不能间接引用目标文件里再 import 的其他模板。在页面的 WXML 文件中引入模板并使用的示例import srccard.wxml / template iscard data{{...item}} /其中src指定模板文件的路径is指定要使用的模板名称data用于传递数据。使用展开运算符...可以将对象的所有属性一次性传递给模板。4. 数据传参的几种方式模板的数据传参主要有以下几种常见方式开发者可以根据实际场景灵活选择。4.1 直接传递对象可以将整个对象作为 data 传入模板内部通过字段名直接访问template iscard data{{item}} /此时模板中可以直接使用{{title}}、{{content}}等字段。4.2 使用展开运算符展开运算符可以将对象的属性平铺传递给模板适合传递多个独立字段的场景template iscard data{{...item}} /4.3 传递单个字段如果只需要传递某一个字段可以直接指定template iscard data{{title: item.title}} /这种方式适合模板只依赖少量数据、且字段名需要映射的场景。5. 模板与 include 的区别除了 import小程序还提供了 include 方式引入 WXML 片段。两者的核心区别在于import 可以传递数据并支持模板的 is 动态选择而 include 只是简单的代码复制不能传递数据。include 的使用方式如下include srcheader.wxml /include 适合引入不依赖数据的静态片段例如公共头部、底部导航等而需要数据驱动的复用结构则应优先使用 template 配合 import。6. 实战示例列表中使用模板下面通过一个完整的列表示例演示模板在实际页面中的使用效果。假设有一个商品列表页面每个商品项使用同一个模板渲染。首先定义商品卡片模板product.wxmltemplate nameproduct view classproduct-item image src{{image}} classproduct-image / view classproduct-name{{name}}/view view classproduct-price{{price}}/view /view /template然后在页面 WXML 中引入模板并通过 wx:for 循环渲染商品列表import srcproduct.wxml / view classproduct-list block wx:for{{products}} wx:keyid template isproduct data{{...item}} / /block /view对应的 JS 数据如下Page({ data: { products: [ { id: 1, image: /images/a.png, name: 商品A, price: 99 }, { id: 2, image: /images/b.png, name: 商品B, price: 199 }, { id: 3, image: /images/c.png, name: 商品C, price: 299 } ] } });运行后页面会循环渲染三个商品卡片每个卡片展示对应的图片、名称和价格实现了界面结构的复用。7. 注意事项与常见问题在使用模板时有几个容易踩坑的地方需要特别注意。模板名称不能重复同一个页面中引入的多个模板文件如果存在同名模板后引入的会覆盖先引入的使用时需注意命名唯一性。import 不能间接引用import 只能引用目标文件中直接定义的模板目标文件里再 import 的其他模板无法被当前页面使用。data 传参是单向的模板内部不能修改传入的数据并同步回页面模板只负责展示。样式需要单独处理模板中的 class 样式需要在页面的 wxss 文件中定义模板文件本身不包含样式。事件绑定模板内部可以绑定事件但事件处理函数需要定义在使用模板的页面中。8. 总结小程序模板 template 是提升开发效率的重要工具通过定义、import 引用和数据传参三个核心步骤可以轻松实现界面结构的复用。合理区分 template 与 include 的使用场景注意命名唯一性和数据单向传递等细节就能在项目中灵活运用模板机制减少重复代码提升代码的可维护性。