微信小程序 教程之引用


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面向对象之Javascript 继承
May 04 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
vue项目实战总结篇
Feb 11 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 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集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
遗传算法之Python实现代码
2017/10/10 Python
python中的set实现不重复的排序原理
2018/01/24 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
python求前n个阶乘的和实例
2020/04/02 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
python如何写个俄罗斯方块
2020/11/06 Python
python 装饰器的基本使用
2021/01/13 Python
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
代理班主任的自我评价
2014/02/04 职场文书
一体化教学实施方案
2014/05/10 职场文书
体检通知范文
2015/04/21 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang