微信小程序 教程之引用


Posted in Javascript onOctober 18, 2016

系列文章:

引用

WXML提供两种文件引用方式import和include。

import

import可以在该文件中使用目标文件定义的template,如:

在item.wxml中定义了一个叫item的template:

<!-- item.wxml -->
<template name="item">
 <text>{{text}}</text>
</template>

在index.wxml中引用了item.wxml,就可以使用item模板:

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import的作用域

import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A">
 <text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
 <text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include可以将目标文件出了<template/>的整个代码引入,相当于是拷贝到include位置,如:

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript函数使用的基本教程
Jun 04 Javascript
谈一谈javascript闭包
Jan 28 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 #Javascript
微信小程序 教程之事件
Oct 18 #Javascript
微信小程序 教程之模板
Oct 18 #Javascript
微信小程序 教程之列表渲染
Oct 18 #Javascript
微信小程序 教程之条件渲染
Oct 18 #Javascript
微信小程序 教程之数据绑定
Oct 18 #Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 #Javascript
You might like
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python list元素为tuple时的排序方法
2018/04/18 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
少先队学雷锋活动月总结
2014/03/09 职场文书
婚礼主持结束词
2014/03/13 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
毕业生评语大全
2015/01/04 职场文书
党员公开承诺书2015
2015/01/21 职场文书
单位工资证明范本
2015/06/12 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书