小程序的使用模板具体使用的方法可以参考一下这篇,这篇文章写的挺详细的也很不错
https://www.jianshu.com/p/cfca91e9a78b
下面来说说具体踩的坑
1.index.html页面中引入组件中的template模板,shareData是index.js中data里的数据
<import src="/components/template/template.wxml"/>
<template is ="templateEnter" data="{{shareData}}"/>
2.template组件的wxml页面(tips:template标签中是不能写wx:for循环的 这样子页面会变空白 但是控制台不会报错)
<template name="templateEnter">
<block wx:for="{{shareData}}" wx:key="{{index}}" >
<bannerPic wx:if="{{item.type == 1}}" attr="{{item.attributeJson}}"></bannerPic>
</block>
</template>
3.引入bannerPic组件
index.json中(tips:要再正在引入template的页面中引用bannerPic组件否则无效)
{
"usingComponents": {
"bannerPic": "/components/banner/banner"
}
}
4.index页面中可以直接这样子写 (tips:把模板单独放在组件中是因为方便其天自定义页面引用时的方便)
<template is ="templateEnter" data="{{shareData}}"/>
<template name="templateEnter">
<block wx:for="{{shareData}}" wx:key="{{index}}">
<bannerPic wx:if="{{item.type == 1}}" attr="{{item.attributeJson}}"></bannerPic>
</block>
</template>