一般在开发一个小程序的时候，总是会有一些重复的样式，或者不同页中会出现相同的模板样式，如果一个界面或者不同界面都写一样的代码（哪怕复制粘贴代码），代码复用性低，并且不易维护，若pm要改动一点点东西，则需要全部改动，维护性差。
这时候template的作用就出来了，此处，我讲以一个小例子进行简单介绍。
红色部分则是，用引用的商品模板:
模板页代码如下：
template.wxml
!--pages/template/template.wxml--template name='shopTemplate' view class='shopTemplate' view class='shopTemplate_name' view商品名称：{{name}}/view /view view class='shopTemplate_price' view商品价格：{{price}}/view /view view class='shopTemplate_snap' button bindtap='shopBtn'立即抢购/button /view /view/templatetemplate is='shopTemplate' data='{{...item}}'/PS：
1️⃣template最核心的其实就是他的名字，name。通过name进行区分你要的是哪一个模板。
2️⃣取到template要用到“is”
template.wxss
/* pages/template/template.wxss */.shopTemplate{ /* width: 300rpx; */ height: 300rpx; border: 1px solid #ccc; background-color: #c1c1c1; /* margin: 0 auto; */ text-align: center; margin: 50rpx;}.shopTemplate_name{ height: 200rpx; /* display: block; */}.shopTemplate_price{ height: 100rpx; /* display: block */}template.js
// template.jsPage({ /** * 页面的初始数据 */ data: { item:{ name: '玉米', price: '￥90' } }, shopBtn:function(){ wx.showModal({ title: '抢购', content: '确定是否抢购', success:function(res){ if(res.confirm){ console.log('用户点击确定') }else{ console.log('用户点击取消') } } }) },})此处说明一下，template里面的模板数据，一般都是由当前页的数据进行渲染展示。
在index页中我要引入该模板样式。
index.wxml
import src="../template/template"/ template is='shopTemplate' data='{{...item}}'/index.wxss(记得导入模板的wxss)
@import "../template/template.wxss";index.js(渲染出index中的data)
Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), item:{ name:'西瓜', price:'$100' } },}）最终在index展示的效果图
若有不对，可以私信我~~~欢迎交流！！！
