作者:倾听岁月,来自原文地址
模版是什么?
就是我们预先写好一段代码,供给重复使用。
实例
/page/common/common.wxml
-
<template name="demo1">
-
<view>我是模版demo1</view>
-
</template>
-
/page/index/index.wxml
-
-
<import src="../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="../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="../demo1/demo1.xml" />
-
-
<template is="demo2_tmp" />
运行看看效果吧,你会发现这个运行不了而报错,提示你未定义,那是因为include模式导入的文件只导入非template模版标签的组件。其它的不导入。
小注意:<import src="" /> 导入的文件也包含<import src="" /> 不会进行二次导入的。 也就是 如果A导入B(import),B需要导入C(import),那么A只会导入B,而不会导入C。
|