微信小程序模板（template）详解：复用UI结构

前言在微信小程序开发中当多个页面或同一页面内有重复的UI结构时可以使用模板template来提高代码复用性。本文通过一个案例演示模板的定义和使用方法。一、案例描述设计一个小程序演示模板的定义和使用方法。小程序运行后能够根据模板格式显示学生和老师的相关信息。在此基础上增加了奥运冠军模板。二、编写模板文件在根目录下新建template文件夹新建template.wxml文件定义三个模板!--template/template.wxml--templatenamestudentviewtext学号{{stuId}}/texttext姓名{{stuName}}/texttext年龄{{stuAge}}/text/view/templatetemplatenameteacherviewtext工号{{teaId}}/texttext姓名{{teaName}}/texttext职称{{teaTitle}}/text/view/templatetemplatenamechampionviewtext姓名{{name}}/texttext项目{{sport}}/texttext届数{{edition}}/text/view/template模板定义说明使用template标签定义模板name属性指定模板名称一个文件中可以定义多个模板使用数据绑定的方式指定模板中的动态数据三、使用模板3.1 引入模板文件在index.wxml中使用import引入模板文件importsrc/template/template.wxml/3.2 使用模板通过template标签及其is属性来引用模板templateisstudentdata{{...student01}}/templatetemplateisteacherdata{{...teacher01}}/templatetemplateischampiondata{{...champion01}}/template3.3 数据传入通过data属性传入模板数据使用...对象名的方式展开对象student01:{stuId:2024001,stuName:张三,stuAge:20}{{...student01}}会将对象的属性展开为模板中的变量。四、import和include的区别方式说明import引入目标文件中定义的template有作用域概念include将目标文件除template和wxs外的整个代码引入相当于拷贝import有作用域的概念只会import目标文件中定义的template而不会import目标文件import的template。五、扩展实践增加奥运冠军模板在原有student和teacher两个模板基础上新增champion模板列出几位中国奥运冠军及其所属项目champion01:{name:全红婵,sport:跳水,edition:2024巴黎奥运会},champion02:{name:潘展乐,sport:游泳,edition:2024巴黎奥运会},champion03:{name:郑钦文,sport:网球,edition:2024巴黎奥运会}在index.wxml中通过template ischampion data{{...champion01}}使用模板。六、总结定义模板使用template标签和name属性引入模板使用import引入模板文件使用模板通过is属性指定模板名data属性传入数据数据展开使用{{...对象名}}展开对象数据模板作用域模板只能使用data传入的数据不能直接访问页面的data多模板一个文件中可以定义多个模板如果觉得本文对你有帮助欢迎点赞收藏有问题可以在评论区交流。