系列文章:

微信小程序 教程之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. MAC OS X El CAPITAN 搭建SPRING MVC (1)- 目录、包名、创建web.xml

    一. 下载STS(Spring Tool Suite) 官方地址:http://spring.io/tools/sts 下载spring tool suite for mac 最新版本.这个IDE是很 ...

  2. 使用vscode访问和修改远程计算机文件

    使用vscode访问和修改远程文件,分三步实现:在远程linux机器上安装rmate:在本地windows上安装openssh:在vscode中安装扩展remote vscode. 1. 在远程lin ...

  3. CSS3:linear-gradient,线性渐变的使用方法

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现.此外,渐变效果 ...

  4. Eclipse创建Maven工程报错

    问题 用Eclipse创建maven工程的时候,总是会报错,例如提示: Unable to create project from archetype [org.apache.maven.archet ...

  5. 使用InstallAnywhere工具打包Java_Web程序

      一.准备工作 1.    下载InstallAnywhere,并安装: 2.    下载解压版jdk1.7(示例为jdk1.7.0_75): 3.    下载解压版tomcat7.0以上版本(示例 ...

  6. Fedora javac 命令提示 [javac: 未找到命令...]

    [joy@localhost ~]$ java -version openjdk version "1.8.0_91" OpenJDK Runtime Environment (b ...

  7. 5-2 bash 脚本编程之一 变量、变量类型等

    1. bash变量类型 1. 环境变量 2. 本地变量(局部变量) 3. 位置变量 4. 特殊变量 2. 本地变量 VARNAME=VALUE, 整个bash进程 3. 环境变量 作用域为当前shel ...

  8. 复选框checkbox选中个数限制

    今天遇到一个问题:就是项目里有用到限制 checkbox框选中个数,看起来很简单,但是确实花了点时间才弄清楚,废话不多说,上代码 <!DOCTYPE html> <html lang ...

  9. BZOJ 3529: [Sdoi2014]数表 [莫比乌斯反演 树状数组]

    3529: [Sdoi2014]数表 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1399  Solved: 694[Submit][Status] ...

  10. half extents

    blue line is hypotenuse From there you can simply linearly add Pi/4 to the angle (45 degrees), then ...