微信小程序的template,本质是wxml层面的可复用模块片段。它的核心意义是：把重复的wxml结构抽出来，通过传入不同的数据来复用，减少重复代码，提升维护效率。
通过官方的文档了解 ：wxml模块<template>用法,
补充一下<template is="{{tomp01}}" data="{{...student01}}"/>，这里的data="{{...student01}}"指的是student01这个对象的参数，如果没有写三个点，写成data="{{student01}}，就会把student01当成参数输进去，不会写入student01这个对象里面的参数。
一、建立工程
建立不使用云开发和模板的新工程，然后建立template文件夹：
miniprogram ├── app.js ├── app.json ├── app.wxss #全局样式 ├── components │ └── navigation-bar │ ├── navigation-bar.js │ ├── navigation-bar.json │ ├── navigation-bar.wxml │ └── navigation-bar.wxss ├── pages │ └── index │ ├── index.js #在这里添加模板的数据 │ ├── index.json │ ├── index.wxml #主页 │ └── index.wxss #本页样式 ├── project.config.json ├── project.private.config.json ├── sitemap.json └── template #新建template文件夹 └── template.wxml #在这里定义模板片段新建template.wxml然后写入定义的模板片段的代码
<!-- /template/template.wxml --> <template name="student"> <view>姓名：{{name}}</view> <view>年龄：{{age}}</view> <view>所学专业：{{major}}</view> </template> <template name="teacher"> <view>姓名：{{name}}</view> <view>年龄：{{age}}</view> <view>讲授课程：{{course}}</view> </template>在index.js添加模板数据
// index.js Page({ data:{ tomp01:'student', tomp02:'teacher', tomp03:'ceatherwin', student01:{ name:'张同学', age:19, major:'软件工程' }, student02:{ name:'李同学', age:20, major:'计算机科学与技术s' }, teacher01:{ name:'张老师', age:40, course:'智能终端开发技术' }, teacher02:{ name:'刘老师', age:42, course:'计算机组成原理' }, } })然后在index.wxml写主页代码，这里用import导入/template/template.wxml
<!--index.wxml--> <navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">模拟的定力和引用</view> <import src="/template/template"/> <template is="{{tomp01}}" data="{{...student01}}"/> --------------------------------------- <template is="student" data="{{...student02}}"/> --------------------------------------- <template is="student" data="{{name:'杨同学',age:21,major:'人工智能'}}"/> --------------------------------------- <template is="{{tomp02}}" data="{{...teacher01}}"/> --------------------------------------- <template is="teacher" data="{{...teacher02}}"/> --------------------------------------- <template is="teacher" data="{{name:'薛老师',age:38,course:'线性代数'}}"/> ---------------------------------------- </view> </scroll-view>然后补全一下样式
/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } /* app.wxss */ .box{ margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title{ font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; } view{ font-size: 30rpx; }运行结果如下：
