文章分类：设计前沿 发布时间:2026-06-17 原文作者：小程序开发 阅读( )
好，咱们今天就聊聊微信小程序里的 template 。它看着不起眼，但用好了能让你的代码省下大半工夫。打开微信小程序开发文档，template 藏在组件那一栏，标签是 ``，用法简单得像搭积木。但真正去翻教程时，要么官方文档写得干巴巴，要么网上例子照搬不解释，导致很多人搞不清它和组件、模板字符串到底有什么区别。我见过不少新手，写完一个页面后，发现另一个页面里有一模一样的卡片布局，就傻乎乎地复制粘贴一份代码，改改数据继续用。结果改一个地方，得翻好几个文件，手忙脚乱，bug 多得像头发一样。这就是 template 派上用场的时候——它是一个被设计好的“壳”，你把数据往里一塞，它就自动渲染出想要的样式。就像包饺子，皮是模板，馅是数据，你只管调好馅，皮一包就完事。
咱们先搞明白 template 的定位：它不是独立的页面，也不是能自己运行逻辑的组件。它只是个“渲染工具”，帮你把重复的 UI 结构抽出来，存成独立的文件。比如在电商小程序里，商品卡片、用户头像、评价列表这些 UI 模块在不同页面反复出现，但每次只有数据不同。你把这些结构写成一个 template，存成 .wxml 文件，然后在需要的地方用 `
说到这，你可能会想：那和组件有什么区别？有，而且区别大了去。组件是微信小程序的核心概念，拥有自己的 js、json、wxml、wxss 文件，能够独立管理生命周期、事件处理，甚至发请求。而 template 就是个“哑巴”，只能展示数据，不能处理点击事件，不能调用函数。比如做一个点赞按钮，用组件的话，按钮的 tap 事件可以直接在组件的 js 里处理，点完发请求、改状态，一气呵成。但用 template，必须在父页面里定义函数，然后把函数名传进去，在 template 里用 `bindtap="{{functionName}}"` 绑定。这样麻烦，因为 template 不支持事件冒泡，需要一层层手动传参。所以，如果需要交互逻辑（点击跳转、发请求、改数据），老老实实用组件；如果只是展示静态内容（商品列表、用户卡片）， template 更轻量，渲染性能也更好。
那什么时候该用 template ？我给你举几个实际场景。第一，列表渲染。比如新闻资讯页，每条新闻的标题、摘要、图片、时间布局完全相同，只是数据不同。写一个 news_item 的 template，页面里用```xml
但 template 也有它的“命门”，那就是数据传递太死板。传数据时必须把对象展开成一个个属性，或者用扩展运算符。例如有一个 user 对象，里面有 name、avatar、age，写成```xmldata="{{name: user.name, avatar: user.avatar, age: user.age}}"```或```xmldata="{{...user}}"```如果不小心传错字段（比如 user 里没有 age），而 template 里引用了 `{{age}}`，就会显示 undefined。更坑的是， template 不支持 slot 插槽。也就是说，不能在模板里预留位置让外部页面塞自定义内容。比如通用卡片模板想放一个按钮，按钮的文案、样式、事件每个页面都不一样，用组件可以通过 slot 实现，而 template 只能写死，或把所有可能的内容都当参数传进去（如 buttonText、buttonStyle、buttonEvent），再用条件判断渲染，实在是自虐。所以，遇到需要高度定制的 UI 模块（如弹窗里放不同表单、卡片里放不同操作按钮），直接用组件更合适。
那 template 是不是一无是处？当然不是。它在某些场景下反而更香。比如做纯静态页面——用户协议、关于我们、帮助中心，这类内容固定、没有交互，用 template 可以省掉一堆组件文件。再比如数据可视化图表，绘图逻辑封装成 template，传入不同数据即可复用。还有性能优化时， template 比组件更轻，因为没有额外的生命周期开销。在渲染大量列表项时（如聊天记录页面有几百条消息），每条消息用 template 渲染比用组件快不少，组件需要创建和销毁实例，而 template 只是纯 DOM 操作。但要注意， template 不支持自定义数据更新，它只会在父页面数据变化时整体重新渲染。如果只改其中一条消息的数据，整个列表会被重新渲染，性能反而下降。这时可以配合 wx:key 使用列表的 diff 算法，或直接使用虚拟列表组件。
实战建议：在小程序开发里， template 适合做“静”的部分，组件适合做“动”的部分。比如商品详情页，商品图片轮播、商品描述、用户评价这些静态展示模块，用 template；购物车按钮、收藏按钮、分享弹窗这些有交互的模块，用组件。这样搭配，代码既清晰又高效。还有一点，千万别把 template 和 wxs 混淆。wxs 是微信的脚本语言，能在 wxml 里写逻辑（如格式化时间、计算价格），但不能操作 DOM，也不能修改数据，只是纯计算工具。把 template 和 wxs 配合使用效果更佳：在 template 里用 wxs 写个格式化函数，传入原始数据，输出格式化后的字符串。比如价格展示，原始数据是 1999，wxs 函数转成 “¥1,999.00”，然后在 template 里直接使用。这样，数据处理逻辑和 UI 展示逻辑彻底分离，维护起来爽到飞起。说到底， template 不是万能药，但用对了地方，它就是一把瑞士军刀。下次写页面时，先想想：这个模块需不需要交互？需不需要定制化？如果不需要，就试试 template，省下的大半时间值得庆祝。
龙图软件是非盈利开源组织团队，专注于互联网软件系统开发的品牌。提供微信公众号开发、APP软件开发、电商直播系统、微信小程序开发、微商管理软件、微信分销系统、及各种热门商业模式软件系统定制开发服务。
北京市海淀区东北旺西路8号
010-56218858
kefu@iztak.com
微信扫一扫
现在联系我们
