微信的模板就是谢公共代码,在主页面直接引入就行
1.模板的定义
首先在新建一个good文件夹,文件夹中新建一个good.wxml文件,在当前目录下还可以定义css,组件当中对应的js事件和data数据可以在主页面的js当中定义,这样就能保证每一个引入它的页面数据不同但是页面结构式一样的
<template name='good'>
<view class='good' bindtap='goodDetail'>
<image src="{{good.url}}" mode="aspectFill"></image>
<view class='mask'></view>
<view class='info'>
<view class='title'>
<text>{{good.name}}</text>
</view>
<view class='detail'>
<view class='timeinfo'>
<text>{{good.address}}</text>
</view>
<view class='address' >
<text>{{good.km}}</text>
</view>
</view>
</view>
<view class='bottom'>
<view class='price'>¥{{good.price}}</view>
<view class='oldprice'>¥{{good.oldprice}}</view>
<view class='selled'>已售{{good.sell}}</view>
</view>
</view>
</template>
2.模板的使用
1.在主页面的最上方先引入模板+
引入HTML:
<import src="../../components/good/good.wxml"/>
引入css:
@import '../../components/mystar/mystar.wxss';
2.使用template渲染模板
<block wx:for="{{goods}}" wx:for-item='good' wx:key='*this' >
<template is="good" data="{{good:good}}"/>
</block>
is=“good"表示调用模板的name
data=”{{good:good}}的意思是把把当前的wx:for-item的good赋值给模板template当中的good
(第一个good就是template当中的good,第二个good就是当前主页面的good),如果就单独一个数据就直接使用这种形式引入js当中的数据,多个数据就需要使用循环来插入数据
注意点:
注意:
(1)主页的template 标签的is属性与good.wxml中good标签的name属性值相同
(2)主页文件中要通过import标签声明需要使用的模板文件