系列文章:

微信小程序 教程之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. ASP.NET的六大内置对象

    ASP.NET 六大内置对象(System.Web.UI.Page类): 1.Response 2.Request 3.Server 4.Application 5.Session 6.Cooki R ...

  2. 好玩的Handler

    Android提供了Handler和Looper来满足线程间的通信; Handler和Activity的任务栈不同,它是先进先出原则; Handler:你可以构造Handler对象来与Looper沟通 ...

  3. win7 64位下vs不能以管理员身份运行的问题解决

    开发机上安装了VS6.0/2008/2010/2013,之前一直是正常的,突然莫名其妙不能以管理员身份运行(除了VS6),报"application cannot start.", ...

  4. v$session中server为none与shared值解析

    查询V$SESSION,你会看到SERVER可能会有DEDICATED| SHARED| PSEUDO| NONE 四种值,如果SERVER字段的值除了DEDICATED,还有NONE,则说明当前实例 ...

  5. DevExpress Carousel 设置水平滑动列表

    DevExpress中Carousel控件的应用 Carousel,直译为旋转木马,即旋转视图,可以做为数据的展示或者菜单项. 要实现触摸左右滑动的效果,其实是比较容易的,直接在CarouselPan ...

  6. 特殊文件: /dev/null和/dev/tty

    转自:http://www.cnblogs.com/stephen-liu74/archive/2011/11/10/2240461.html Linux系统提供了两个对Shell编程非常有用的特殊文 ...

  7. JS--遍历对象

    var person = { Name:"Frank", Age:23 } Object.keys(person).forEach(function(key){ console.l ...

  8. python学习2

    1.input()返回的是字符串, 如果想读入一个数字,应该用int()转化 2.循环的写法与C不同的地方就是,for while等写完之后在那一行后面要加上一个冒号,这是比较特殊的地方. 还有就是r ...

  9. poj 2352 Stars 数星星 详解

    题目: poj 2352 Stars 数星星 题意:已知n个星星的坐标.每个星星都有一个等级,数值等于坐标系内纵坐标和横坐标皆不大于它的星星的个数.星星的坐标按照纵坐标从小到大的顺序给出,纵坐标相同时 ...

  10. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...