微信小程序 教程之引用


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 相关文章推荐
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
JS实现一个简单的日历
Feb 22 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
JS eval代码快速解密实例解析
Apr 23 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程序员工具
2008/05/26 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php实现socket推送技术的示例
2017/12/20 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
python使用建议与技巧分享(一)
2020/08/17 Python
火山动力Java笔试题
2014/06/26 面试题
IT工程师岗位职责
2014/07/04 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android