引用(包含)

把模板定义到外部,然后多个页面间可以共用使用定义的模板WXML结构显示。

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/import.html

WXML 提供两种文件引用方式import和include

5.4.1、import

在 user.wxml 中定义了一个叫item的template:

<template name="user">

<text>{{title}}</text>

</template>

# name template定义的模板名称,一个文件中可以定义多个template但name的名称不能重复

在 index.wxml 中引用了 item.wxml,就可以使用item模板:

<import src="item.wxml"/>

<template is="item" data="{{title: '你好世界'}}"/>

# is 指定定义存在好的模板名称。

# data 向模板中传数据

5.4.2、include

include相当于把引入的文件内容直接复制到目录文件中。

<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

六、wxss样式

WXSS是一套样式语言,用于描述 WXML 的组件样式。

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。

  • 新增了尺寸单位

WXSS 在底层支持新的尺寸单位 rpx  响应式尺寸单位

小程序中全屏尺寸数值是 : 750rpx

  • 提供了全局的样式和局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

  • 此外 WXSS 仅支持部分 CSS 选择器

目前支持的选择器有:

选择器

样例

样例描述

.class

.intro

选择所有拥有 class="intro" 的组件

#id

#firstname

选择拥有 id="firstname" 的组件

element

view

选择所有 view 组件

element, element

view, checkbox

选择所有文档的 view 组件和所有的 checkbox 组件

::after

view::after

在 view 组件后边插入内容

::before

view::before

在 view 组件前边插入内容

引用(包含) import wxss样式的更多相关文章

  1. 「小程序JAVA实战」 小程序wxss样式文件的使用(七)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-07/ 细说下微信小程序的wxss样式文件.源码:https://github.com/liming ...

  2. 微信小程序开发:学习笔记[3]——WXSS样式

    微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...

  3. 关于CSS各种选择器,还有各种引入样式表的区别,import导入样式表,在介绍一些伪类选择器

    (一)CSS选择器: 1.标签选择器:通过HTML的标签名直接选择该标签 2.类选择器:通过.选择器的名称{} 来对添加了class属性的标签进行选中 3.ID选择器:通过#选择器的名称{} 来对添加 ...

  4. 小程序2-基本架构讲解(一)WXSS样式

    项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 WXSS 样 ...

  5. 微信小程序:WXSS 样式

    微信小程序:WXSS 样式 一.WXSS 样式 XSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 1,新增了尺寸单位: 在写 CSS 样式时,开发者需要考虑到手机设备的屏 ...

  6. 微信小程序wxml和wxss样式

    对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...

  7. 微信小程序wxss样式详解

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  8. 微信小程序--代码构成---WXSS 样式

    WXSS 样式 WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 新增了尺寸单位.在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一 ...

  9. Python中循环引用(import)失败的解决方法

    原文链接:http://blog.ihuxu.com/the-solution-to-the-problem-of-circular-import-in-python/ 我是采用方案三 "将 ...

  10. css样式中@import引入样式

    css样式中@import引入样式 学习了:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html

随机推荐

  1. Flink 作为现代数据仓库的统一引擎:Hive 集成生产就绪!

    在2020年,你的数据仓库和基础设施需要满足哪些需求? 我们总结了几下几点: 首先,当下的企业正快速转向更实时化的模式,这要求企业具备对线上流式数据进行低延迟处理的能力,以满足实时(real-time ...

  2. Flink + Iceberg + 对象存储,构建数据湖方案

    ​简介: 上海站 Flink Meetup 分享内容,如何基于Flink.对象存储.Iceberg 来构建数据湖生态. 本文整理自 Dell 科技集团高级软件研发经理孙伟在 4 月 17 日 上海站 ...

  3. GRPC: 如何优雅关闭进程(graceful shutdown)

    ​简介: 本文将介绍优雅关闭 gRPC 微服务.在进程收到关闭信号时,我们需要关闭后台运行的逻辑,比如,MySQL 连接等等. 介绍 本文将介绍优雅关闭 gRPC 微服务. 什么是优雅关闭? 在进程收 ...

  4. [FAQ] docker-ce depends on containerd.io, docker-ce depends on docker-ce-cli

    安装 docker 缺少依赖会提示你安装,一般是以下两个: Package containerd.io is not installed Package docker-ce-cli is not in ...

  5. vue+vant实现省市联动(van-area)组件(包含比较全面的全国省市数组数据)

    组件库太香了,人家nb,自己写的都是** 效果: 1.安装vant库以及main.js的配置 2.一般结合van-popup组件 </template> <van-popup v-m ...

  6. 经验之谈:我为什么选择了这样一个激进的缓存大Key治理方案

    一.引言 本文将结合我的一次Redis大Key的治理经验,来浅谈一下缓存大Key的治理方案选择.文中主要包括缓存大Key基础知识.大Key治理方案选择.大Key治理案例等,适合有一定开发经验的开发者阅 ...

  7. ITIL4 服务价值系统(SVS):一场服务管理的革新之旅

    在这个数字化时代,每一家企业都在追求高效的服务管理和卓越的客户体验.今天,我们就来聊一聊ITIL4中的服务价值系统(Service Value System, SVS)--一个让服务管理变得更加直观和 ...

  8. 4、Linux 网络基础

    1.基础命令 hostname:查看或设置当前主机名 route [-n]:查看或设置主机中路由表信息 netstat:查看系统的网络连接状态.路由表.接口统计等信息 常用选项 -a:显示所有-n:以 ...

  9. 模型压缩与部署-书生浦语大模型实战营学习笔记5&大语言模型11

    大语言模型-11.模型压缩与部署 书生浦语大模型实战营学习笔记4-模型压缩与部署 本文包括第二期实战营的第5课内容,介绍关于模型压缩的相关内容,主要包括.模型量化和模型部署的相关内容. 模型部署 定义 ...

  10. mac常用

    目录 Mac 删除键(Delete) 这三招你会吗?可大幅加快打字速度 Mac软件打开提示:已损坏,无法打开.您应该将它移到废纸娄 怎么解决? 卸载手动安装的软件 如何在Mac上使用Charles进行 ...