微信小程序使用模板Template

第一步：创建模板tel.wxml

<template name="paymentWin"><!--name是必须的-->
  <view class="paymentPopup">
    <view class="payment_content">
        <view class="payment_type">
          <view wx:for="{{recommend}}" wx:key="key" wx:for-item="item" class="payement_item" bindtap="changeGrade">
            <text class="recommend" wx:if="{{item.id==295}}">推荐购买</text>
            <view class="tit">{{item.name}}</view>
            <view class="price"><text>￥</text>{{item.pay_price}}<text>元/年</text></view>
            <view class="desc">{{item_tip}}</view>
          </view>
        </view>
    </view>
  </view>
</template>

第二步：在index.wxml中引用模板

<import src="./tel.wxml"/>
<block >
    <template is="paymentWin" data="{{...payData}}"/>
</block>

第三步：在index.wxss中引入模板的css,tel.wxss

@import "./tel.wxss";

第四步：找index.js中处理模板的数据和方法

data: {
    payData:{
      recommend:[
        {name:'超级会员',pay_price:'3880.00',id:295,tip:'全站创业课程免费学！'},
      ],
    },
},

changeGrade:()=>{
　　console.log('我是在模板中被执行的方法')
}