示例:
创建目录和文件:
mytemp.wxml:
<!-- 第一层必须是template标签,且name必须 --> <template name="mytemp"> <view> <view class="title">这是我自定的模板内容</view> <view class="userInfo"> <view class="userName">用户名: {{username}}</view> <view class="age">年龄: {{age}}</view> </view> </view> </template>
mytemp.wxss:
.title { font-size: 40rpx; color: greenyellow; }
到这里模板已经创建好了。
开始导入使用:
<!-- 引入模板代码 --> <import src="/template/mytemp/mytemp.wxml"></import> <view> <!-- 测试模板 --> <view class="otherTitle">测试使用模板</view> <!-- is需要的就是需要模板定义时的name --> <template is="mytemp" data="{{...person}}"/> </view>
使用ES6...展开运算符,...person可以自动展开对象属性,这里的person对象在js里自己定义,:
data: { person: { username: 'curry', age: 33 } },
需要注意wxss里也需要导入,否则样式不会生效:
/* 引入模板样式 */ @import "/template/mytemp/mytemp.wxss"; .otherTitle { font-size: 50rpx; font-weight: bold; color: red; }
实现效果如下:
最后需要注意的是如果模板里的类名和当前页面有相同类名,样式会被覆盖!!!