微信小程序template模板 ，提高效率第二篇

模板的使用，极大的提高了开发效率，把一些展示的共同页面直接用模板调用变更数据即可

案例 1.首页轮播，轮播模板写完之后下次直接再次调用就好

        2.商品列表，商品详情

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

一，定义模板

模板的页面结构和其他页面一样

主需要给你之前的代码加一个Template 以及name属性就可以

<template name="msgItem">
  <view class='container'>
    <view class='wt100 flexct'>
      <view class='among-content clear flexlb'>
        <block wx:key="shoplist" wx:for="{{goodsinfo}}" wx:for-index="index">
          <view class="shop-box" data-id='{{item.id}}' bindtap='detailInto'>
            <view class="shop-img">
                <image class='image-full'  src="{{bannerurl}}{{item.goodsimage}}"></image>  
            </view>
            <view class="shop-detail">
                <view class='shop_info'>{{item.goodsname}}</view>
                <view class='bottom_info'>
                  <view class='price1'>积分：{{item.price}}</view>
                  <!-- <view class='price2'>￥{{item.price}}</view> -->
                </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

二，使用模板

需要把你的模板页面引入到你使用的页面

引入方法

<import src="../../cyclv/cyclv.wxml" />//src你自己文件地址

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<import src="../../cyclv/cyclv.wxml"/>
<view class='container'>
  <template is="msgItem" data="{{goodsinfo}}" /> //data=""对应你要传入的数据
</view>

Page({
  data: {
    goodsinfo: [{ id: "80", goodsname: "西湖龙井（清明前茶一斤2800半斤如下）", price: "1400.00", activityprice: "1.00", goodsimage: '/../imgs/test/good.png' }]
  },
})

模板的作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。

三，模板样式

可以在你的模板内部编写.wxss文件，进行页面布局，在需要应用模板的页面引入模板的css

引入方法

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

@import "../../cyclv/cyclv.wxss";