引用

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. ubuntu-14.04服务器版下搭建apache2+svn+svnmanager服务

    本人linux小白,新进公司,被分配此任务,好崩溃,只能一边百度linux命令一边完成任务.从装系统开始一直到搭建好服务,也快一周了,足见水平之差,以下博文基本靠网络,再加上自己的摸索,直至搭建成功. ...

  2. Error : should use android:showAsAction when not using support library

    我有一个ListActivity,然后一个menu/options.xml android:showAsAction报错: should use android:showAsAction when n ...

  3. SpringMVC源码剖析(三)- DispatcherServlet的初始化流程

    在我们第一次学Servlet编程,学Java Web的时候,还没有那么多框架.我们开发一个简单的功能要做的事情很简单,就是继承HttpServlet,根据需要重写一下doGet,doPost方法,跳转 ...

  4. python脚本生成exe可执行文件

    1.先安装第三方插件: py2exe. Get py2exe from http://www.py2exe.org/ 在download里下载与自己python对应的版本 2.写一个测试python文 ...

  5. leetcode Super Pow

    题目描述: superPow(int a, int[] b),b是一个int数组,每个元素都是正的个位数,组合起来表示一个正整数,例如b=[1,2,3]表示123,求解a^b mod 1337. 思路 ...

  6. [转]Linux/Ubuntu sudo不用输入密码的方法

      通常我们并不以root身份登录,但是当我们执行某些命令 (command)时需要用到root权限,我们通常都是用"sudo command"来执行command.由于使用Ubu ...

  7. 使用pip安装 cx_Oracle 模块

    1. 系统环境,linux, python3.5, pip以下命令的执行均使用root用户. 2. 执行 pip install cx_Oracle出错,提示不能定位Oracle的安装.出现该问题的原 ...

  8. 记一次 IDEA mybatis.generator 自定义扩展插件

    在使用 idea mybatis.generator 生成的代码,遇到 生成的代码很多重复的地方, 虽然代码是生成的,我们也不应该允许重复的代码出现,因为这些代码后期都要来手动维护. 对于生成时间戳注 ...

  9. 用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限

    先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自 ...

  10. C语言 03 项目团队文件合并

    团体项目中 链接把项目中所有相关联的.O目标文件.C语言函数库合并在一起,生成可执行文件. 编写声明文件,用 .h文件封装起来,在其他代码中用include"xxx.h"引用声明 ...