微信小程序基础加强总结
本篇文章给大家带来了关于微信小程序的相关问题，其中主要介绍了一些基础内容，包括了自定义组件、样式隔离、数据、方法和属性等等内容，下面一起来看一下，希望对大家有帮助。
【相关学习推荐：小程序学习教程】
1、自定义组件
1.1、创建组件
在项目的根目录中，鼠标右键，创建 components -> test 文件夹
新建的 components -> test 文件夹上，鼠标右键，点击新建 Component
键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js、.json、.wxml 和 .wxss
1.2、引用组件
局部引用：组件只能在当前被引用的页面内使用
全局引用：组件可以在每个小程序页面中使用
1.3、局部引用组件
在页面的 .json 配置文件中引用组件的方式，叫做局部引用。示例代码如下：
# 在页面的 .json 文件中，引入组件 { "usingComponents": { "my-test": "/components/test/test" } } 1. 在页面的 .wxml 文件中，使用组件 登录后复制
在 app.json 全局配置文件中引用组件的方式，叫做全局引用。示例代码如下：
# 在 app.json 文件中，引入组件 { "usingComponents": { "my-test": "/components/test/test" } }登录后复制
根据组件的使用频率和范围，来选择合适的引用方式：
如果某组件在多个页面中经常被用到，建议进行全局引用
使用某组件只在特定的页面中被用到，建议进行局部引用
1.6、组件和页面的区别
从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同：
组件的 .json 文件中需要声明 "component": true 属性
组件的 .js 文件中调用的是 Component() 函数
组件的事件处理函数需要定义到 methods 节点中
2、样式隔离
2.1、组件样式隔离
默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构。
防止外界的样式影响组件内部的样式
防止组件的样式破坏外界的样式
2.2、组件样式隔离的注意点
app.wxss 中的全局样式对组件无效
只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离影响
在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器
2.3、修改组件的样式隔离选项
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式。此时，可以通过 stylelsolation 修改组件的样式隔离选项，用法如下：
# 在组件的 .js 文件中新增如下配置 Component({ options: { stylelsolation: 'isolated' } }) 1. 或在组件的 .json 文件中新增如下配置 { "stylelsolation": "isolated" }登录后复制
| 可选值 | 默认值 | 描述 |
| :----------: | :----: | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| isolated | 是 | 表示启用样式隔离 | 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会互相影响 |
| apply-shared | 否 | 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 |
| shared | 否 | 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件 |
3、数据、方法和属性
3.1、data 数据
在小程序组件中，用于组件模板渲染和私有数据，需要定义到 data 节点中，示例如下：
Component({ data: { count: 0 } })登录后复制
在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：
Component({ methods: { addCount() { this.setData({count: this.data.count + 1}); this._showCount() }, _showCount() { wx.showToast({ title: 'count值为：' + this.data.count, icon: 'none' }) } } })登录后复制
在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：
Component({ properties: { max: { type: Number, value: 10 }, max: Number } })登录后复制
在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：
data 更倾向于存储组件的私有数据
properties 更倾向于存储外界传递到组件中的数据
Component({ methods: { showInfo() { console.log(this.data === this.properties) } } })登录后复制
由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值，示例代码如下：
# 在组建的 .wxml 文件中使用 properties 属性的值 max属性的值为：{{max}} Component({ properties: { max: Number }, methods: { addCount() { this.setData({ max: this.properties.max + 1 }) } } })登录后复制
