258资源分享网

就是我们预先写好一段代码，供给重复使用。

/page/common/common.wxml

<template name="demo1">

<view>我是模版demo1</view>

</template>

/page/index/index.wxml

<import src=http://www.yiyongtong.com/archives/"../common/common.wxml" />

<view>

<template is="demo1" />

</view>

我们就成功的将模版demo1 导入进来了。

模版中添加数据  以common.wxml为例子

<template name="demo1">

<view>{{userInfo.nickName}}</view>

<view wx:for="data" wx:for-index="index" wx:for-item="item">

{{index}}=>{{item}}

</view>

</template>

这个模版里面有需要数据对象支持，是直接引用的page({data:{}})这个中的data 吗？ 其实不是的。怎么用呢  以index.wxml为例  假设注册中的data为

var initJson = {

data:{

userInfo:{"nickname":"我是勇哥"},

dataInfos : {

"name":"勇哥",

"age" :"22"

}

}

}

Page(initJson);

<import src=http://www.yiyongtong.com/archives/"../common/common.wxml" />

<view>

<!--方法一，自己领悟。其中的userInfo引用的是注册表中data.userInfo-->

<template is="demo1" data="{{userInfo,data:dataInfos }}" />

<!--方法二。 -->

<template is="demo1" data="{{userInfo:{"nickname":"aaaa"},data:[1,2,3,4,5,6,7]}}" />

</view>

模版也支持wxml模版语法，也就是说也可以在里面添加wx:if wx:elseif 等语句。  用好了，减少代码量。降低维护难度。以及提升开发效率。  可以将一个个模版看成一个个封装好的函数，需要的时候直接导入模版文件，直接调用就好了，当然有参数需要的模版还是要将数据对象传入进去的。

import 模式导入的文件只能识别template 标签标记的代码块  还有一个include 模式导入的文件就恰恰和import 的模式对应了。

include模式导入的文件

/page/demo2/demo2.wxml

<view>

include 模式导入文件

</view>

<template name="demo2_tmp">

<view>

我是template2

</view>

</template>

/page/demo1/demo1.wxml

<include src=http://www.yiyongtong.com/archives/"../demo1/demo1.xml" />

<template is="demo2_tmp" />

运行看看效果吧，你会发现这个运行不了而报错，提示你未定义，那是因为include模式导入的文件只导入非template模版标签的组件。其它的不导入。

小注意：<import src=http://www.yiyongtong.com/archives/"" /> 导入的文件也包含<import src=http://www.yiyongtong.com/archives/"" /> 不会进行二次导入的。  也就是 如果A导入B（import），B需要导入C(import)，那么A只会导入B，而不会导入C。