小程序中使用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>