学习微信小程序WXML之模板、引用

此贴为学习9 小时搞定微信小程序开发 的笔记
文档：模板 · 小程序、引用 · 小程序

1.模板：使用template标签可以模板中定义自己的代码片段

<!-- index.wxml -->
<template name="tempItem">
    <view>
        <view>收件人：{
   
   {name}}</view>
        <view>联系方式：{
   
   {phone}}</view>
        <view>地址：{
   
   {address}}</view>
    </view>
</template>

<template is="tempItem" data="{
     
     {...item}}"></template>

name属性是template的名称，is属性来声明我们使用的是哪个模板。{ {...item}}中前面的三个点是es6语法中的扩展运算符，可以将对象或数组进行解构赋值。

//index.js
Page({
    data:{
        item:{
            name:"张三",
            phone:"18888888888",
            address:"中国"
        }
    }
})

此外is属性也可以做一些动态的数据绑定。

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{
     
     {[1, 2, 3, 4, 5]}}">
    <template is="{
     
     {item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

2.文件引用：import和include

两种引用模板的方式：include和import
区别：include只会引用文件内除template内容外的内容，import只会引用文件内template内的的内容，动态的传入数据，is表示引用的模板名称，data表示传入模板的数据。

import

<!--index.wxml -->
<import src="a.wxml"></import>
<template is="a"></template>

<!-- a.wxml -->
<view>Hello,world</view>
<template name="a">
    Hello,World!
</template>

import 的作用域
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

这是为了避免引用模板死循环的问题。

<!--index.wxml-->
<import src="a.wxml"></import>
<template is="a"></template>

<!--a.wxml-->
<import src="b.wxml"/>
<template name="a">
    This is a.wxml
</template>

<!--b.wxml-->
<template name="b">
    This is b.wxml
</template>

include

<!--index.wxml-->
<include src="a.wxml" />
<template is="a">
</template>

<!--a.wxml-->
<template name="a">
    <view>
        This is a.wxml
    </view>
</template>
<view>Hello,world</view>