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

news/2024/11/28 15:50:18/

外联的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.ppmy.cn/news/1353692.html

相关文章

C语言-----习题

1.通过这个例题&#xff0c;我们可以知道*p.a是无法打印99的&#xff0c;因为.的优先级比解引用*高&#xff1b; ​ struct S {int a;int b; }; int main() {struct S a, * p &a;//可以分为两部分理解//struct S a;//struct S *p &a;a.a 99;printf("%d\n"…

lazarus:LCL 嵌入 fpwebview 组件,做一个简单浏览器

从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。 先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\lclembed 修改 lclembed.lpr 如下&#xff0c;将 fphttpapp. 注释掉&#xff0c;因为我用不上 a simple…

vscode写MATLAB配置

vscode写MATLAB python下载 官网说明Versions of Python Compatible with MATLAB Products by Release - MATLAB & Simulink 不确定这三列都表示什么意思&#xff0c;尽量安装这三列都有的python版本吧&#xff0c;我安装的 MATLAB R2023b,python选择的是3.11.5 …

Compose 自定义 - 数据转UI的三阶段(组合、布局、绘制)

一、概念 Compose 通过三个阶段把数据转化为UI&#xff1a;组合&#xff08;要显示什么&#xff09;、布局&#xff08;要显示在哪里&#xff09;、绘制&#xff08;如何渲染&#xff09;。 组合阶段 Compisition 界面首次渲染时会将可组合函数转化为一个个布局节点 Layout Nod…

Flutter Android开发 梳理Google Material Design颜色体系

前言 做安卓开发&#xff08;Kotlin语言&#xff09;&#xff0c;Flutter开发的人员应该都听说过谷歌一直推崇的Material Design&#xff0c;而Material Design Color是其推崇的颜色体系&#xff0c;具体来说&#xff0c;Material Design Color是一套旨在帮助设计师和开发者创…

【AIGC】Stable Diffusion的模型微调

为什么要做模型微调 模型微调可以在现有模型的基础上&#xff0c;让AI懂得如何更精确生成/生成特定的风格、概念、角色、姿势、对象。Stable Diffusion 模型的微调方法通常依赖于您要微调的具体任务和数据。 下面是一个通用的微调过程的概述&#xff1a; 准备数据集&#xf…

云计算基础-存储虚拟化(深信服aSAN分布式存储)

什么是存储虚拟化 分布式存储是利用虚拟化技术 “池化”集群存储卷内通用X86服务器中的本地硬盘&#xff0c;实现服务器存储资源的统一整合、管理及调度&#xff0c;最终向上层提供NFS、ISCSI存储接口&#xff0c;供虚拟机根据自身的存储需求自由分配使用资源池中的存储空间。…

python从小白到大师-第一章Python应用(四)应用领域与常见包-数据科学

目录 一.数据科学 1.1 Numpy 1.2 scipy 1.3 pandas 1.4 Kaggle 二.总结 一.数据科学 1.1 Numpy NumPy(Numerical Python)是Python中最受欢迎的数值计算库之一,它提供了高效的多维数组对象和对这些数组进行操作的函数。NumPy的主要优势在于其强大的数据运算能力和广泛…