微信小程序 - 模板使用（传递属性和方法使用）

献给小白。。。
模版作用：重用界面代码。
模板结构：仅2个文件，一个.wxml文件和一个.wxss文件。
在template文件夹中创建模板文件，我创建了一个叫atmp的文件夹，里边有index.wxml和index.wxss。

模板文件.png

index.wxml
模板文件获取父页面传递来的 数据 和 方法 。
方法中如果使用父页面的数据则，用data-xxx绑定，此处我用了data-atmpdata。

index.wxml.png

<template name="atmp">
  <view class="atmp_view" catchtap="atmpClick" data-atmpdata="{{atmpdata}}">
    <text class="atmp_title">{{title}}</text>
    <text class="atmp_subtitle">{{subtitle}}</text>
  </view>
</template>

index.wxss

index.wxss.png

.atmp_view {
  width: 100%;
  background: red;
}
.atmp_title {
  background: yellowgreen;
  color: yellow;
}
.atmp_subtitle {
  background: skyblue;
  color: yellow;
}

父页面引入模板文件

首先import

引入模板.png

然后使用模板。is对应模板中的name

使用模板.png

<import src="../../template/atmp/index.wxml"/>
给模板传数据  用 data。 ...语法是展开atmpdata其属性，多个数据用逗号分隔。
<template is="atmp" data="{{...atmpdata, atmpdata}}" />

父页面的js文件

父页面js文件.png

  data: {
    atmpdata: {
      title: "atmp title",
      subtitle: "atmp subtitle"
    }
  },
  atmpClick: function(e) {
    // 获取模板中data-xxx绑定的数据，xxx对应dataset.后边的
    var atmpdata = e.currentTarget.dataset.atmpdata;
    console.log(atmpdata.title);
  },

父页面的式样文件

引入模板式样.png

@import '../../template/atmp/index.wxss';

模板中 {{}}如果想要使用方法，请自建.wxs文件，然后再模板中引入后，即可使用。
utils.wxs

function mypub_cellStatus(s) {
  switch (s) {
    case 1:
      return "未开始";
    case 2:
      return "进行中";
    default:
      return "结束";
  }
}

module.exports = {
  mypub_cellStatus: mypub_cellStatus
};

<wxs module="utils" src="../../utils.wxs"></wxs>

<text class="txt_sub">{{utils.mypub_cellStatus(item.status)}}</text>