文章目录
前言
本文包含 微信小程序基础加强 等内容,参考于 黑马PPT 通过自己理解整理,所以这是一篇用于小白新手入门,或者复习使用的笔记,主要包括(自定义组件、使用npm包、全局数据共享MobX、分包等)
如有做的不好的地方,敬请谅解,欢迎指出,持续更新改正
一 自定义组件
1. 组件的创建与引用
1.1 创建组件
- 在项目的根目录中,鼠标右键,创建
components -> test
文件夹 - 在新建的 components -> test 文件夹上,鼠标右键,点击“
新建 Component
” - 键入组件的名称之后回车,会
自动生成
组件对应的 4 个文件,后缀名分别为 .js,.json, .wxml 和 .wxss
注意: 为了保证目录结构的清晰,建议把不同的组件,存放到单独目录中,例如
1.2 引用组件
组件的引用方式分为“局部引用
”和“全局引用
”,顾名思义:
- 局部引用:组件只能在当前被引用的页面内使用
- 全局引用:组件可以在每个小程序页面中使用
1.3 局部引用组件
在页面的 .json 配置文件中引用组件的方式,叫做“局部引用”。示例代码如下:
1.4 全局引用组件
在 app.json 全局配置文件中引用组件的方式,叫做“全局引用”。示例代码如下:
1.5 全局引用 VS 局部引用
根据组件的使用频率
和范围
,来选择合适的引用方式:
- 如果某组件在
多个页面中经常被用到
,建议进行“全局引用
” - 如果某组件只在
特定的页面中被用到
,建议进行“局部引用
”
1.6 组件和页面的区别
从表面来看,组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是,组件和页面的 .js 与.json 文件有明显的不同:
- 组件的 .json 文件中需要声明
"component": true 属性
- 组件的 .js 文件中调用的是
Component() 函数
- 组件的事件处理函数需要定义到
methods
节点中
2. 样式
2.1 组件样式隔离
默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的UI 结构,如图所示:
- 组件 A 的样式不会影响组件 C 的样式
- 组件 A 的样式不会影响小程序页面的样式
- 小程序页面的样式不会影响组件 A 和 C 的样式
好处:
- 防止外界的样式影响组件内部的样式
- 防止组件的样式破坏外界的样式
2.2 组件样式隔离的注意点
- app.wxss 中的全局样式对组件无效
- 只有 class 选择器会有样式隔离效果,id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议: 在组件和引用组件的页面中建议使用 class 选择器
,不要使用 id、属性、标签选择器!
2.3 修改组件的样式隔离选项
默认情况下,自定义组件的样式隔离特性
能够防止组件内外样式互相干扰
的问题。但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过 styleIsolation
修改组件的样式隔离选项,用法如下:
s t y l e I s o l a t i o n 的可选值 styleIsolation 的可选值 styleIsolation的可选值
3. 数据、方法和属性
3.1 data 数据
在小程序组件中,用于组件模板渲染
的私有数据
,需要定义到 data 节点
中,示例如下:
3.2 methods 方法
在小程序组件中,事件处理函数
和自定义方法
需要定义到 methods 节点
中,示例代码如下
3.3 properties 属性
在小程序组件中,properties 是组件的对外属性,用来接收外界传递到组件中的数据
,示例代码如下:
3.4 data 和 properties 的区别
在小程序的组件中,properties 属性和 data 数据的用法相同,它们都是可读可写
的,只不过:
- data 更倾向于
存储组件的私有数据
- properties 更倾向于
存储外界传递到组件中的数据
3.5 使用 setData 修改 properties 的值
由于 data 数据
和 properties 属性
在本质上没有任何区别,因此 properties 属性的值也可以用于页面渲染,或使用 setData 为 properties 中的属性重新赋值,示例代码如下
4. 数据监听器
4.1 什么是数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化
,从而执行特定的操作
。它的作用类似于 vue 中的watch 侦听器
。在小程序组件中,数据监听器的基本语法格式如下:
4.2 数据监听器的基本用法
组件的 U I