引用

WXML 提供两种文件引用方式importinclude

import

import可以在该文件中使用目标文件定义的template,如:

在 item.wxml 中定义了一个叫itemtemplate

<!-- 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>

微信小程序-视图视图引用的更多相关文章

  1. 微信小程序 教程之引用

    系列文章: 微信小程序 教程之WXSS微信小程序 教程之引用微信小程序 教程之事件微信小程序 教程之模板微信小程序 教程之列表渲染微信小程序 教程之条件渲染微信小程序 教程之数据绑定微信小程序 教程之 ...

  2. 微信小程序开发系列二:微信小程序的视图设计

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

  3. 微信小程序_(视图)简单的scroll-view容器

    scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...

  4. 微信小程序的视图与渲染

    1.组件的基本使用 <button type="default" > default </button> <button type="pri ...

  5. 微信小程序_(视图)简单的swiper容器

    swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...

  6. 微信小程序之视图容器(swiper)组件创建轮播图

    一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...

  7. 【微信小程序】——wxss引用外部CSS文件及iconfont,图文教程

    小程序引入外部文件的方式是:@import “/.wxss”; 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为bas ...

  8. 【微信小程序】——wxss引用外部CSS文件及iconfont

    小程序引入外部文件的方式是:@import "*/*.wxss"; 因为业务需要,正在开发的小程序中需要使用iconfont,很容易想到了H5的引入方式: ```` @font-f ...

  9. 微信小程序-滑动视图注意事项

    真的得吐槽下微信的开发文档,一点点都不详细的好吗. <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style ...

  10. 微信小程序-组件-视图容器

    1.view 1.作用:类似 html 的 div 用来进行页面布局,具有块级盒子特性. 2.常用属性:设置view盒子点击后的状态,以及控制是否影响父盒子的点击状态 3.eg:<view ho ...

随机推荐

  1. iOS进行Basic认证与NTLM认证

    一.iOS进行Basic认证 只需要在NSMutableURLRequest的Header中添加认证所需的Username和password. NSMutableURLRequest *webReq ...

  2. 樹的DFS和BFS

    菜鸟心得.... 不对请指出....... /*BFS,广度优先搜索树,用最简单的2叉树来举例, 树的结构如下: A B C D E F GH I J K L M N O广度优先搜索树, 顺序应该是A ...

  3. goim 及时消息 集成

    https://github.com/roamdy/goim-oc-sdk goim 及时消息 集成

  4. 安装hadoop集群服务器(hadoop1.2.1)

    摘要:hadoop,一个分布式系统基础架构,可以充分利用集群的威力进行高速运算和存储.本文主要介绍hadoop的安装与集群服务器的配置. 准备文件: ▪ VMware11.0.0      ▪ Cen ...

  5. iptables参数详解

    iptables参数详解 搬运工:尹正杰 注:此片文章来源于linux社区. Iptalbes 是用来设置.维护和检查Linux内核的IP包过滤规则的. 可以定义不同的表,每个表都包含几个内部的链,也 ...

  6. csuoj 1394: Virus Replication

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1394 1394: Virus Replication Time Limit: 1 Sec  Mem ...

  7. linux学习第一天

    linux touch 文件名mkdir -P 路径文件 cat 打开文件 vihostname 主机名ln 复制 ln -s 快捷方式cp 复制-r复制整个目录-p保持源文件属性不变-f强制复制mv ...

  8. 浅析MySQL中exists与in的使用

    exists对外表用loop逐条查询,每次查询都会查看exists的条件语句,当 exists里的条件语句能够返回记录行时(无论记录行是的多少,只要能返回),条件就为真,返回当前loop到的这条记录, ...

  9. 家长-Parents表增加字段Token,Gender,Email,Portrait

    家长-Parents表增加字段Token,Gender,Email,Portrait ) ) ) )

  10. java中包命名常见规则

    做java的都知道java的包.类.接口.枚举.方法.常量.变量等等模型都有一套约定的命名规则! 学习每一种语言都应该学习对应语法和命名规则,以保持一个良好的编码风格.一来显示自己的专业.二来方便阅读 ...