小程序中使用template模板总结

小程序的使用模板具体使用的方法可以参考一下这篇，这篇文章写的挺详细的也很不错

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>