引用

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. windows下面配置apache+http

    一.apache安装 下载并安装apache_2.2.9-win32-x86-openssl-0.9.8h-r2.msi(见附件),找到apache安装目录(C:\Program Files (x86 ...

  2. 数据库触发器inserted和deleted详解

    create trigger updateDeleteTime on user for update as begin   update user set UpdateTime=(getdate()) ...

  3. noi 1.5 45:金币

    描述 国王将金币作为工资,发放给忠诚的骑士.第一天,骑士收到一枚金币:之后两天(第二天和第三天)里,每天收到两枚金币:之后三天(第四.五.六天)里,每天收到三枚金币:之后四天(第七.八.九.十天)里, ...

  4. web前端基础知识 - Django进阶

    1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 url(r'^index/(\d*)', views.index), url( ...

  5. Bringing the activity to foreground 将activity切换到前台

    今天遇到这个问题,找了很久,网上一些解决方法不够完全.特做此记录: 经测试以下方法不能将在后台运行的activity切换到前台运行! Intent i = new Intent(); i.setCla ...

  6. html5,视频的兼容

    <video controls="controls" width="500" >        <source src="1.mp4 ...

  7. 详解学习C#的方法和步骤

    如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 掌握一门.NET面向对象语言,C#或VB.NET. 强烈反对在没系统学过一门面向对象语言的前提下去学ASP.NET. ASP.NET是一个 ...

  8. Lucene.net

    模糊查询-〉数据库全文检索-〉Lucene 一元分词(lucene内置) Analyzer analyzer = new CJKAnalyzer(); TokenStream tokenStream ...

  9. Welogic中的JMS

    WebLogic JMS 概述 企业消息传递系统使得应用程序能够通过消息的交换与其他系统之间进行通信.消息是包含协调不同应用程序之间通信所需信息的请求.报告和/或事 件.消息提供了提取级别,使您能够从 ...

  10. Linux_用户级_常用命令(2):cd

    开篇语:懒是人类进步的源动力 本文原创,专为光荣之路公众号所有,欢迎转发,但转发请务必写出处! Linux常用命令第二集包含命令:cd 一.格式: cd directory 使用cd命令在目录层次间移 ...