在Shopping开发中用到的模板相关代码。

• 定义一个模板

  <template name="tp-oldPrice">
      <view class="oldPrice">
          <text class="old-price-value"> ¥{{oldPirceValue}}</text>
      </view>
  </template>

  上面的代码定义了一个tp-oldPrice的模板【name属性指定template的名称】，需要一个oldPirceValue参数。对于模板，我的理解是：模板可以将一些常用的代码块提取了出来，方便复用。
  开始的时候，我准备将其提取为一个自定义组件。可实际开发中，折腾了好久。发现使用自定义组件时，外面会套一个<component>标签，导致样式有些乱了，最终放弃了。
  在使用template时，看了很多教程都是在对应页面的wxss中import模板所需的样式文件。而我在开发中，按此操作，发现样式并未生效。我的处理方式是：将组件的样式文件保存到根目录，然后在app.wxss文件中进行import，这样就能显示出对应的样式效果了。

• 模板中使用模板

  <template name="tp-coverItem">
    <view class="{{itemClass}}">
      <image src="{{mainImgUrl}}" class="itemShowImg" mode="heightFix"></image>
      <text class="itemName text-2line-ellipsis" overflow="ellipsis" max-lines="2">{{itemName}}</text>
          <template is="tp-price" data="{{priceValue}}"></template>
          <template is="tp-oldPrice" data="{{oldPirceValue}}"></template>
    </view>
  </template>

• 给模板传参

  <block wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
      <template is="tp-coverItem" data="{{...item}}"></template>
  </block>

  Page({
      data:{
          items:[
              {
                  mainImgUrl:"https://static.wejias.com/wmp/LOGO.png",
                  itemName:"111-->商品名称商品名称商品名称商品名称商品名称商品名称EEEE",
                  priceValue:"52",
                  oldPirceValue:"1111",
                  itemClass:"leftItem"
              },
              {
                  mainImgUrl:"https://static.wejias.com/wmp/LOGO.png",
                  itemName:"222-->商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称EEEE",
                  priceValue:"88888",
                  oldPirceValue:"13000",
                  itemClass:"rightItem"
              }
          ]
      }
  })