微信小程序 教程之引用


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 location.replace与location.reload的区别
Sep 08 Javascript
js有序数组的连接问题
Oct 01 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 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中去掉字符串首尾空格的方法
2012/05/19 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python的常见命令注入威胁
2013/02/18 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
计算机操作自荐信
2013/12/07 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
人事局接收函
2015/01/30 职场文书
物业工程部岗位职责
2015/02/11 职场文书
毕业实习证明范本
2015/06/16 职场文书
《将心比心》教学反思
2016/02/23 职场文书