微信小程序模块化/组件化开发

将公用组件抽离出来

• 把一些内容抽取到一个公有的页面中
  • 首先我们要知道，在home下可以共用模板
  • 1.在home文件夹下新建个目录(list-tmpl)
    • 模板中只能放两种文件:css、wxml;不支持js和json
    • 模板的标志template标签
    • 模板要给他起个名字，就是我们要调用这个模板的时候要用的名字<template name='name'></template>
    • 可以放多个模板，但每个模板都要有自己的名字
    • 同样css样式也要公有化
  • 2.导入模板(使用相对路径)
    • <import src='list-tmpl/list-tmpl.wxml'/>
    • is->模板名字,data->传入数据;<template is='list' data=''></template>

此时home.wxml文件

<import src='list-tmpl/list-tmpl.wxml'/>
<swiper autoplay='{{true}}' interval='1000' indicator-dots='{{true}}' circular='{{true}}'>
  <swiper-item wx:for='{{imgs}}'>
    <image src='{{item}}'></image>
  </swiper-item>
</swiper>
<block wx:for="{{lists}}">
  <template is='list' data='{{item}}'></template>
</block>

3.引入css样式,此时home.wxss文件

@import 'list-tmpl/list-tmpl.wxss';
swiper{
  height: 400rpx;
}
swiper image{
  width: 100%;
}

点击跳转详情页

• 事件不能直接绑在template标签上，因为在编译的过程中，最终会直接用一个模板将template替换掉。
  • 解决方案:在template标签外面包一层view标签，在view标签上绑定bindtap点击事件