一个 Android程序员的小程序入门学习笔记『二』（template 模版的使用注意）

注：文章中有些地方会把小程序的内容和 Android 的知识关联起来，以便于 Android 程序员更快的理解小程序。

template 包括 wxml 和 wxss 两个文件的使用。

● wxml ：先是 template 的 xml 文件

    看代码

<template name="templateMain">
    <view>
        <image class='view_item_image' src='{{item.img}}'></image>
        <text class='view_item_text'>{{item.txt}}</text>
    </view>
</template>

    然后是引用这个 template 的 page 页面的 xml 文件，这里经过测试，不用写后缀名也可以。

<import src="template/template_main.wxml"/> //后缀可以不写。
  <block wx:for="{{yy.data}}">
    <!--<view>
        <image class='view_item_image' src='{{item.img}}'></image>
        <text class='view_item_text'>{{item.txt}}</text>
    </view>-->
      <template is="templateMain" data="{{item}}"/>  // 如果此处写为 data="{{...item}}"  
                                                    //template 的 wxss 中可以使用属性时候，可以不写item.xxx，直接写为 xxx
  </block>
</view>

    可以看出， templateMain 对应了wxml中的命名。

    data="{{yyy:xxx, zzz: bbb}}" 如果这么写，是指重新封装了一个对象，传递下去了。

●  template 的 wxss ：

    写法和普通 wxss 一样，关键是如何引用：

    在需要应用模版的页面的 wxss 文件中第一行写入：

@import "template/tmpl_main.wxss";

    经过测试，也可以不用写后缀名。

最后附上文件目录结构：