用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序-template模版

纸飞机 2018-3-6 16:11

作者:倾听岁月,来自原文地址模版是什么?就是我们预先写好一段代码,供给重复使用。实例/page/common/common.wxml 我是模版demo1/page/index/index.wxml 我们就成功的将模版demo1 导入进来了。模版中添加数 ...

作者:倾听岁月,来自

原文地址

模版是什么?

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

实例

/page/common/common.wxml

  1. name="demo1">
  2. 我是模版demo1
  1. /page/index/index.wxml
  2. <import src="../common/common.wxml" />
  3. <template is="demo1" />
  4. view>

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

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

  1. name="demo1">
  2. {{userInfo.nickName}}
  3. wx:for="data" wx:for-index="index" wx:for-item="item">
  4. {{index}}=>{{item}}

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

  1. var initJson = {
  2. data:{
  3. userInfo:{"nickname":"我是勇哥"},
  4. dataInfos : {
  5. "name":"勇哥",
  6. "age" :"22"
  7. }
  8. }
  9. }
  10. Page(initJson);
  1. src="../common/common.wxml" />
  2. is="demo1" data="{{userInfo,data:dataInfos }}" />
  3. is="demo1" data="{{userInfo:{"nickname":"aaaa"},data:[1,2,3,4,5,6,7]}}" />

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

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

include模式导入的文件

/page/demo2/demo2.wxml

  1. include 模式导入文件
  2. name="demo2_tmp">
  3. 我是template2

/page/demo1/demo1.wxml

  1. src="../demo1/demo1.xml" />
  2. is="demo2_tmp" />

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

小注意: 导入的文件也包含 不会进行二次导入的。
也就是 如果A导入B(import),B需要导入C(import),那么A只会导入B,而不会导入C。

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏