小程序学习day09-WXS脚本、自定义组件-组件的创建、引用、组件与页面的区别、组件的样式隔离

news2024/11/16 5:27:22

39、WXS脚本(小程序独有的一套脚本语言)

(1)作用:结合WXML,可以构建出页面结构

(2)应用:在小程序中充当过滤器。(wxml无法调用在页面的.js中定义的函数,但是wxml中可以调用wxs中定义的函数)

(3)wxs与js的关系(wxs的语法类似于js)

        1)wxs有自己的数据类型
Number、string、boolean、object、function、array、、date日期类型、regexp正则
        2)wxs不支持类似于ES6及以上的语法形式
                不支持:let、const、解构赋值、展开运算符、箭头函数、对象属性简写
                支持:var定义变量、普通函数类似于ES5的语法
        3)wxs遵循CommonJs规范
Module对象、require()函数、module.exports对象

(4)内嵌wxs脚本

Wxs代码可以写在wxml文件的wxs标签中,类似于js代码可以写在html文件的script标签中一样

1)wxs标签注意事项
        ①必须提供module属性,用来指定当前wxs的模块名称
        ②语法

已知:

(5)外联wxs脚本

Wxs代码还可以编写在以.wxs后缀结尾的文件内,就像js代码可以编写在以.js文件结尾的文件中一样

1)在wxml中引入外联的wxs脚本时的注意事项
        ①在wxml中引入外联的wxs脚本时,必须为<wxs>标签添加module(用来指定模块的名称)和src属性(用来指定要引入的脚本路径)(src必须是相对路径)
        ②语法:

已知:

新建.wxs结尾的文件

新建方法

导出方法

导入

使用

(6)wxs的特点(wxs和js是完全不同的两种语言)

        1)与js不同
为了降低Wxs的学习成本,wxs语言在设计时借鉴了大量的js语法,但是,本质上,wxs和js是完全不同的两种语言
        2)不能作为组件的事件回调
Wxs典型的应用场景就是“过滤器”,经常配合Mustache语法(插值表达式)进行使用,但是,在wxs中定义的函数不能作为组件的事件回调函数(不能用bind:tap绑定其中的方法)
        3)隔离性(wxs的运行环境和其他js代码是隔离的)
                ①wxs不能调用js中定义的函数
                ②wxs不能调用小程序提供的API
        4)性能好
                ①在ios设备上,小程序内的WXS会比js代码快2~20倍
                ②在Android设备上,二者的运行效率无差异

40、自定义组件

(1)组件的创建(为保证目录结构的清晰,建议把不同的组件,存放在单独的目录中)

1)在根目录新建components文件夹

2)在components文件夹下,右键,点击“新建Component”,新建test文件

(2)引用组件

1)分类
        ①局部引用(组件只能在当前被引用的页面内使用)(在页面的json文件中配置组件方式)

在其他页面无效

        ②全局引用(组件可以在小程序的每个页面中使用)(在app.json中配置引用组件的方式)

        3)全局引用与局部引用的区别(从使用频率和范围来看)
                ①如果某组件在多个页面中经常用到,建议进行“全局引用”
                ②如果某个组件只在特定的页面中被用到,建议进行“局部引用”

(3)组件与页面的区别

        1)组件的.json文件中需要声明“component”:true属性

        2)组件的.js文件中调用的是Component()函数

        3)组件的事件处理函数需要定义到methods节点中

(4)组件样式隔离

1)默认情况下,自定义组件的样式支队当前组件生效,不会影响组件之间的UI结构,比如:组件与组件之间、组件与小程序之间、小程序与组件们之间
2)好处:
        ①防止外界样式影响组件内部的样式
        ②防止组件的样式破坏外界的样式
3)注意:
        ①app.wxss中的全局样式对组件无效(具体来讲,是对组件内的标签无效)

        ②只有class选择器会有样式隔离的效果,id选择器、属性选择器、标签选择器不受样式隔离的影响

(5)修改组件样式的隔离选项

默认情况下,自定义组件 的样式隔离性能防止组件内外样式互相干扰的问题,但是有时需要外界能够控制组件内部的样式,可以通过styleIsolation实现

1)styleIsolation的可选值
①isolated(表示启用样式隔离,在自定义组件内外,使用class指定的样式不会相互影响):默认值为是

②apply-shared(表示页面wxss样式将影响到自定义组件,但自定义组件不会影响到页面):默认值为否

③shared(表示页面wxss样式影响到自定义组件,定义组件也影响到页面):默认值为否

2)语法:
①在组件的.json中配置

②在组件的js文件中配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2049973.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DNS in Kubernetes

DNS in Kubernetes 对象分配的名称Service DNS 记录Pod DNS 记录 Cluster DNS参考 DNS for Services and Pods 这里主要讨论集群内不同对象之间的DNS解析 默认情况下&#xff0c;创建集群时&#xff0c;k8s会部署内置的DNS服务器&#xff0c;在集群内&#xff0c;我们不关注…

spring-boot-3.2.6+spring-security-6.2.4+oauth2整合github示例

一、添加依赖 在 pom.xml 中添加如下依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"h…

<数据集>航拍路面病害识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;3151张 标注数量(xml文件个数)&#xff1a;3151 标注数量(txt文件个数)&#xff1a;3151 标注类别数&#xff1a;7 标注类别名称&#xff1a;[Longitudinal crack, Transverse crack, Alligator crack, Oblique cr…

腾讯 图标点选 分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 有相关问题请第一时间头像私信联系我…

Element UI中报dateObject.getTime is not a function解决方法~

1、错误信息。 2、该报错原因是Element UI中日期组件的校验规则是type: "date",而一般我们从后台拿到的数据是字符串型的&#xff0c;不满足预期&#xff0c;就会报错。 3、解决方法。 去掉日子组件中的type: "date"校验规则即可。 rules: {newName: [{…

SOMEIP_ETS_046: echoUTF16FIXED

测试目的&#xff1a; 验证设备&#xff08;DUT&#xff09;是否能够正确处理echoUTF16FIXED方法的参数&#xff0c;并确保发送和接收的参数顺序和值保持一致。 描述 本测试用例旨在检查DUT在接收到一个使用echoUTF16FIXED方法的SOME/IP消息时&#xff0c;是否能够按照请求中…

利用PostgreSQL向量数据库和负责任的AI知识库在亚马逊云科技上构建商品推荐机器人

项目简介&#xff1a; 小李哥将继续每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿AI技术解决方案&#xff0c;帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS AI最佳实践&#xff0c;并应用到自己的日常工作里。 本次介绍的是如何在亚马逊云科技利用Postg…

软件需求规格说明书编写规范(Doc原件)

软件需求规格说明书编写规范&#xff08;Word原件&#xff09; 1.项目背景 2.项目目标 3.系统架构 4.总体流程 5.名称解释 6.功能模块 软件全套资料部分文档清单&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说明…

WPF MvvmLight

关于 停止更新 官网&#xff1a;http://www.mvvmlight.net/ 源码地址&#xff1a;GitHub - lbugnion/mvvmlight: The main purpose of the toolkit is to accelerate the creation and development of MVVM applications in Xamarin.Android, Xamarin.iOS, Xamarin.Forms, Wi…

C++ //练习 17.17 更新你的程序,令它查找输入序列中所有违反“ei“语法规则的单词。

C Primer&#xff08;第5版&#xff09; 练习 17.17 练习 17.17 更新你的程序&#xff0c;令它查找输入序列中所有违反"ei"语法规则的单词。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块&#xff1a; /**********…

定制开发AI智能名片O2O商城小程序:基于限量策略与个性化追求的营销创新

摘要:随着科技的飞速发展和消费者需求的日益多元化&#xff0c;传统商业模式正经历着前所未有的变革。在数字化转型的大潮中&#xff0c;定制开发AI智能名片O2O商城小程序作为一种新兴的商业模式&#xff0c;凭借其独特的个性化定制能力、高效的线上线下融合&#xff08;O2O&am…

居住证申报系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;群众用户管理&#xff0c;警方管理&#xff0c;居住证登记管理&#xff0c;回执单管理&#xff0c;领证信息管理&#xff0c;公告栏管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页…

MySQL数据库专栏(四)数据库操作

1、创建数据库 create database if not exists [数据库名称] character set [字符集] COLLATE [排序规则]; 例如&#xff1a;create database if not exists db_demo character set utf8mb4 COLLATE utf8mb4_general_ci; if not exists&#xff1a;判断数据库是否存在&#x…

Ubuntu20, Windows10 双系统安装

1. 制作启动盘 1.1 下载 Ubuntu 系统镜像 ISO 文件 从 Ubuntu 官网下载 (https://cn.ubuntu.com/download/desktop)。官网访问慢的&#xff0c;从国内镜像点下。 1.2 烧录 Ubuntu ISO 镜像 下载 Rufus&#xff1a;从Rufus官网下载 Rufus 工具。 插入U 盘&#xff1a;将U盘插…

详解语义安全(semantically secure)

目录 一. 引入 二. 密文与明文 2.1 通俗性理解 2.2 定理 2.3 定理理解 三. 语义安全的第一个版本 3.1 基本理解 3.2 定理 3.3 定理理解 四. 语义安全的第二个版本 4.1 直观解释 4.2 小结 一. 引入 密码学中安全加密要求&#xff1a;敌手&#xff08;adversary&…

“百板齐发“ — 一个拥有上百个独特看板的代码

精选100套AXURE可视化数据大屏看板 产品经理高效工具 高保真原型模板 赋能智慧城市 元件库 AXURE9.0版本&#xff0c;所有页面均可编辑&#xff0c;部分地图与实现放大缩小&#xff0c;拖拉拽的功能。 01.水质情况实时监测预警系统 02.全国停车云实时数据监测系统 03.中国移…

【系统分析师】-综合知识-补充知识

1、在软件设计中&#xff0c;通常由着眼于“宏观的”软件架构开始&#xff0c;由着眼于“微观的”构件模块结束。 即测试应该从“微观”开始&#xff0c;逐步转向“宏观”。 2、数据备份是信息系统运行管理时保护数据的重要措施。增量备份可针对上次任何一种备份进行&#xf…

海康VisionMaster使用学习笔记7-Group模块

Group模块的使用 1. 添加图像源&#xff0c;导入图片 2. 添加快速匹配 对匹配框区域进行顶点检测 并循环10次(匹配框个数 从而检测出所有顶点)。 3. 添加Group工具 拖一个Group模块 点击设置 输入设置 添加图像源输入数据 添加快速匹配的匹配框 4. 双击Group工具块进入 添加…

网络原理知识总结

一、网络模型 1.1 osi七层参考模型 物理层&#xff1a;连接通信链路、传输比特流数据链路层&#xff1a;数据封装成帧&#xff0c;在节点与节点间实现可靠物理地址寻址&#xff0c;进行差错校验、流量控制网络层&#xff1a;逻辑地址寻址&#xff0c;路由选择 IP(IPV4IPV6) I…

Oracle start with connect by prior 递归查询

基本语法 select … from tablename where 条件1 start with 条件2 connect by 条件3(PRIOR);条件1&#xff1a;相当于基本的筛选数据 条件2&#xff1a;递归查询起始条件 条件3&#xff1a;连接条件&#xff0c;其中用PRIOR表示上一条记录的结果作为本次查询的条件&#xff0…