系列文章:

微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之WXML

引用

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="http://1219.www.qixoo.qixoo.com/article/item.wxml"/>
<template is="item" data="http://qkxue.net/article/{{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="http://1219.www.qixoo.qixoo.com/article/a.wxml"/>
<template name="B">
<text> B template </text>
</template>
<!-- C.wxml -->
<import src="http://1219.www.qixoo.qixoo.com/article/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="http://1219.www.qixoo.qixoo.com/article/header.wxml"/>
<view> body </view>
<include src="http://1219.www.qixoo.qixoo.com/article/footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

微信小程序 教程之引用的更多相关文章

  1. 微信小程序之微信登陆 —— 微信小程序教程系列(20)

    简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...

  2. 微信小程序教程系列

    微信小程序教程系列 来源:       https://blog.csdn.net/michael_ouyang/article/details/56846185 相关连接:http://blog.c ...

  3. 微信小程序教程汇总

    目前市面上在内测期间出来的一些实战类教程还是很不错的,主要还是去快速学习小程序开发的整体流程,一个组件一个组件的讲的很可能微信小程序一升级,这个组件就变了,事实本就如此,谁让现在是内测呢.我们不怕,下 ...

  4. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

  5. 微信小程序教程(第三篇)

    小程序的架构及实现机制,信道服务及会话管理 小程序架构及实现机制 小程序并不是 H5 应用,而是更偏向于传统的 CS 架构,它是基于数据驱动的模式,一切皆组件(视图组件).所以建议在开发小程序时不要以 ...

  6. 微信小程序教程(第四篇)

    小程序开发基本框架及其限制与优化 开发基本框架(MINA框架) └─ Project-folder/ ·································· 项目所在目录 ├─ page ...

  7. 微信小程序教程(第二篇)

    如何注册接入小程序及搭建开发环境 小程序接入流程 注册 主要分为注册邮箱与信息登记. 需要重新申请一个新的微信公众帐号,不能使用服务号.订阅号或企业号使用的公众帐号 (微信公众帐号分为四种类型:订阅号 ...

  8. 微信小程序教程(第一篇)

    目录 第一篇小程序概述 第二篇如何注册接入小程序及搭建开发环境 第三篇小程序的架构及实现机制,信道服务及会话管理 第四篇小程序开发基本框架及其限制与优化 第五篇小程序开发项目实例,测试及发布 .... ...

  9. 一个小时快速搭建微信小程序教程

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的 ...

随机推荐

  1. android不需要Socket的跨进程推送消息AIDL!

    上篇介绍了跨进程实时通讯http://www.cnblogs.com/xiaoxiaing/p/5818161.html 但是他有个缺点就是服务端无法推送消息给客户端,今天这篇文章主要说的就是服务器推 ...

  2. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

  3. JAVA编程思想(第四版)学习笔记----11.4 容器的打印

    import static java.lang.System.out; import java.util.ArrayList; import java.util.Collection; import ...

  4. webform(九)——JQuery基础(选择器、事件、DOM操作)

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  5. CSS3:RGBA的使用方法

    1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...

  6. crontab 启动 、运行 和编辑 查看

    cron服务是Linux的内置服务,但它不会开机自动启动.可以用以下命令启动和停止服务: /sbin/service crond start /sbin/service crond stop /sbi ...

  7. Windows下磁盘分配操作

    问题概述:在装系统的时候有时候并不能一下分出完全符合我们使用习惯的分区大小,我们可能需要在后期调整分区大小.以下是有关分区大小调整的操作. 使用工具:Windows磁盘管理工具. 操作步骤: 1.使用 ...

  8. Git权威指南 书摘

    ##$ git add welcome.txtwarning: LF will be replaced by CRLF in welcome.txt.The file will have its or ...

  9. Vmware虚拟机Devstack安装openstack(All in one)

    Vmware虚拟机Devstack安装openstack(All in one) 博客园第一篇博客,先练习一下. 官方文档 环境 Vmware虚拟机 OS : Ubuntu 14.04 Nat网络,D ...

  10. [html/css]清除浮动的相关技巧

    以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...