2024.2.13日总结(小程序开发6)

外联的wxs脚本

在wxml中引入外联的wxs脚本时,必须为<wxs>标签添加module和src属性

  • module用来指定模块的名称
  • src用来指定要引入的脚本的路径,且必须是相对路径

wxs的特点

与JavaScript 不同

wxs 语言在设计时借大量鉴了JavaScript 的语法。但是本质上为了降低 wxs(WeiXin Script)的学习成本,wxs 和 JavaScript 是完全不同的两种语言。

不能作为组件的事件回调

wxs 典型的应用场景就是“过滤器”经常配合 Mustache 语法进行使用,例如:

隔离性

隔离性指的是 wxs 的运行环境和其他JavaScript 代码是隔离的。体现在如下两方面①wxs 不能调用 js 中定义的函数
wxs 不能调用小程序提供的 API

性能好

在 i0s 设备上,小程序内的 WXS 会比JavaScript 代码快2~20 倍在 android 设备上,二者的运行效率无差异

组件的创建与引用

创建组件

在项目的根目录中,鼠标右键,创建components->test 文件夹

在新建的 components ->test 文件夹上,鼠标右键,点击“新建 Component'

键入组件的名称之后回车,会自动生成组件对应的4个文件,后缀名分别为.js,.json,.wxml和.wxss

引用组件

组件的引用方式分为“局部引用”和“全局引用

局部引用:

组件只能在当前被引用的页面内使用

在页面的.json配置文件中引用组件的方式

全局引用:

组件可以在每个小程序页面中使用

在 app.json 全局配置文件中引用组件的方式

组件和页面的区别

组件和页面都是由.js、json、.wxml和 .wxss 这四个文件组成的。但是,组件和页面的 .js与json 文件有明显的不同:

  • 组件的 .json 文件中需要声明"component":true
  • 属性组件的 .js 文件中调用的是 Component()函数
  • 组件的事件处理函数需要定义到 methods 节点中

样式

组件样式隔离

默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的UI结构,如图所示:

组件样式隔离的注意点

  • app.wxss 中的全局样式对组件无效
  • 只有 class 选择器会有样式隔离效果,id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议:

在组件和引用组件的页面中建议使用 class 选择器不要使用 id、属性、标签选择器!

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

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

相关文章

实验5-9 使用函数输出水仙花数

水仙花数是指一个N位正整数&#xff08;N≥3&#xff09;&#xff0c;它的每个位上的数字的N次幂之和等于它本身。例如&#xff1a;153135333。 本题要求编写两个函数&#xff0c;一个判断给定整数是否水仙花数&#xff0c;另一个按从小到大的顺序打印出给定区间(m,n)内所有的水…

【计算机网络地址转换(NAT)详解】

文章目录 什么是NAT&#xff1f;NAT的工作原理NAT的应用1. 内部网络管理2. 隐藏内部网络结构3. IPv4地址节省 什么是NAT&#xff1f; 网络地址转换&#xff08;NAT&#xff09;允许多个主机共享一个或一组公共IP地址&#xff0c;同时保护内部网络的隐私和安全。NAT通常由路由器…

WEB APIs(2)

应用定时器可以写一个定时轮播图&#xff0c;如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&qu…

基于 InternLM 和 LangChain 搭建你的知识库(三)

基于 InternLM 和 LangChain 搭建你的知识库 大模型开发范式 Finetune 在大型语言模型中&#xff0c;Finetune&#xff08;微调&#xff09;是一种技术&#xff0c;用于调整预训练的模型以提高其在特定任务或数据集上的表现。这种方法通常涉及以下步骤&#xff1a; 预训练模…

【MySQL】:DQL查询

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; MySQL从入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. DQL1.1 基本语法1.2 基础查询1.3 条件查询1.3 聚合函数 &#x1f324;️ 全篇…

【Linux取经路】文件系统之被打开的文件——文件描述符的引入

文章目录 一、明确基本共识二、C语言文件接口回顾2.1 文件的打开操作2.2 文件的读取写入操作2.3 三个标准输入输出流 三、文件有关的系统调用3.1 open3.1.1 比特位级别的标志位传递方式 3.2 write3.2.1 模拟实现 w 选项3.2.2 模拟实现 a 选项 3.3 read 四、访问文件的本质4.1 再…

C#系列-EntityFrameworkCore.SqlServer.NodaTime实例(37)

EntityFrameworkCore.SqlServer.NodaTime 是一个扩展包&#xff0c;它允许你使用 NodaTime 库中的日期和时间类型与 SQL Server 数据库进行交互。NodaTime 是一个流行的.NET 日期和时间库&#xff0c;它提供了比 .NET 内置的 DateTime 和 DateTimeOffset 类型更丰富的功能和更好…

探讨:工业物联网,纯上报设备的数采

事情是这样的&#xff0c;有一台设备是modbus-tcp协议&#xff0c;手工操作测量&#xff0c;自动发送测量结果&#xff0c;就这&#xff0c;没别的了。 开始看起来挺简单&#xff0c;连接上去就等着收数据嘛&#xff0c;多简单&#xff01;后来发现麻烦得很啊&#xff0c;关键的…

【深度学习】S2 数学基础 P4 概率论

目录 基本概率论概率论公理随机变量 多个随机变量联合概率条件概率贝叶斯定理求和法则独立性 期望与方差小结 基本概率论 机器学习本质上&#xff0c;就是做出预测。而概率论提供了一种量化和表达不确定性水平的方法&#xff0c;可以帮助我们量化对某个结果的确定性程度。 在…

状态模式:灵活管理对象状态的设计策略

状态模式&#xff1a;灵活管理对象状态的设计策略 在软件开发的过程中&#xff0c;我们经常会遇到对象根据其内部状态的改变而改变其行为的场景。传统的处理方式可能会使用大量的条件判断语句来处理不同的状态转换以及相应的行为&#xff0c;这不仅使得代码难以维护&#xff0…

【UI自动化测试技术】自动化测试研究:Python+Selenium+Pytest+Allure,详解UI自动化测试,iframe、窗口等控件切换(精)(五)

导言 在上一篇文章里&#xff0c;我们一起学习了键盘事件、鼠标事件以及其它的一些特殊情况的处理。这篇文章我们一起学习Selenium中一些特殊窗口以及iframe&#xff0c;如何处理。 学习目标 了解对浏览器的基本功能操作&#xff08;本节重点&#xff09;学习如何对弹窗进行操…

素数算法(普通求解,埃氏筛,欧拉筛)

素数算法&#xff08;常规求解&#xff0c;埃氏筛&#xff0c;欧拉筛&#xff09; 1. 常规求解1.1 原理解释1.2 算法实现 2 . 埃氏筛2.1 原理解释2.2 算法实现 3. 欧拉筛3.1 原理解释3.2 算法实现 1. 常规求解 1.1 原理解释 枚举法是一种简单的求解素数的方法&#xff0c;其基…

黑马程序员java部分笔记(持续更新)九点五:数组的动态初始化与常见问题

为什么有动态初始化呢? 当 不知道数组里几个元素的具体值时用动态初始化 动态初始化&#xff1a;初始化时只指定数组长度&#xff0c;由系统分配初始值 格式&#xff1a;数据类型[]数组名new 数据类型[数组长度]; 特点&#xff1a;在创建的时候有自己指定数组长度&#xff0c;…

Java的集合框架和泛型

文章目录 集合框架什么是集合框架类和接口总览 集合框架的重要性背后所涉及的数据结构以及算法什么是数据结构容器背后对应的数据结构什么是算法 包装类基本数据类型和对应的包装类装箱和拆箱自动装箱和自动拆箱 泛型什么是泛型引出泛型语法泛型类泛型的上界(没有下界)泛型方法…

心理辅导|高校心理教育辅导系统|基于Springboot的高校心理教育辅导系统设计与实现(源码+数据库+文档)

高校心理教育辅导系统目录 目录 基于Springboot的高校心理教育辅导系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、学生功能模块的实现 &#xff08;1&#xff09;学生登录界面 &#xff08;2&#xff09;留言反馈界面 &#xff08;3&#xff09;试卷列表界…

方式0控制流水灯循环点亮

#include<reg51.h> //包含51单片机寄存器定义的头文件 #include<intrins.h> //包含函数_nop_()定义的头文件 unsigned char code Tab[]={0xFE,0xFD,0xFB,0xF7,0xEF,0xDF,0xBF,0x7F};//流水灯控制码,该数组被定义为全局变量 sbit P17=P1^7; /*****************…

100.网游逆向分析与插件开发-网络通信封包解析-C++还原网络通信系统发送功能

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;数据包组织与发送过程逆向分析 码云地址&#xff08;游戏窗口化助手 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;ec54e9ae1ca0efe96b87d5…

C/C++如何把指针所指向的指针设为空指针?

实践出真知&#xff0c;指针对于初学的友友来说&#xff0c;头都要大了。喵喵一直遵循在实践中学&#xff0c;在学习中实践&#xff0c;相信你也会有所得&#xff01; 以下是该问题的解决方案&#xff1a; int** ptrPtr new int*; // 创建指向指针的指针 int* ptr new int;…

《动手学深度学习(PyTorch版)》笔记8.2

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…

基于Springboot的社区物资交易互助平台(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的社区物资交易互助平台&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…