原生微信小程序详解
原生微信小程序详解通信模型
微信小程序的通信模型基于事件驱动机制,通过事件来传递数据和触发逻辑。小程序中的组件可以通过事件来与其他组件进行通信。
事件类型1. 自定义事件: 小程序中可以注册自定义事件,例如 `myEvent`,并在其他组件中监听该事件。
2. 系统事件: 微信小程序提供了一些系统事件,如 `pageShow`、`pageHide` 等,可以在这些事件中进行处理。
事件绑定和解绑1. 绑定事件:通过 `bindEvent` 方法可以将事件与组件的方法关联起来。
2. 解绑事件:通过 `unbindEvent` 方法可以解除事件与组件的方法之间的关联。
事件传递事件传递是指事件从一个组件传递到另一个组件。小程序中支持以下几种事件传递方式:
1. 冒泡: 当事件在一个组件中触发时,会向上冒泡到父组件。
2. 捕获: 当事件在一个组件中触发时,会向下捕获到子组件。
事件监听小程序中的组件可以通过 `listen` 方法监听事件。例如:
```javascriptthis.listen('myEvent', (data) => {
console.log(data);
});
```
组件API
微信小程序的组件API提供了一系列方法和属性来支持组件的创建、更新和销毁。
组件生命周期1. created: 当组件被创建时触发。
2. attached: 当组件被附加到页面中时触发。
3. ready: 当组件准备就绪时触发。
4. detached: 当组件从页面中脱离时触发。
5. destroyed: 当组件被销毁时触发。
组件方法1. setData: 将数据设置到组件的属性中。
2. selectComponent:选择一个子组件。
3. createSelectorQuery: 创建一个选择器查询对象。
样式
微信小程序中的样式分为两种:全局样式和组件样式。
全局样式全局样式是指在 `app.wxss` 文件中定义的样式。这些样式会应用到整个小程序中。
组件样式组件样式是指在组件内部定义的样式。这些样式只会应用到该组件及其子组件中。
样式隔离
微信小程序中的样式隔离机制保证了不同组件之间的样式不会冲突。
class选择器class选择器是唯一支持样式隔离的选择器类型。例如:
```css.my-class {
color: red;
}
```
id、属性、标签选择器id、属性和标签选择器不支持样式隔离。例如:
```cssmy-id {
color: blue;
}
[my-attr] {
font-size:20px;
}
.my-tag {
background-color: yellow;
}
```
在组件内部引用其他组件时,应使用class选择器,而不是id、属性或标签选择器。
app.wxss中的全局样式
全局样式是指在 `app.wxss` 文件中定义的样式。这些样式会应用到整个小程序中。
例如:
```cssbody {
background-color: f7f7f7;
}
```
这些样式不会影响组件内部的样式隔离机制。
注意事项
在组件内部引用其他组件时,应使用class选择器,而不是id、属性或标签选择器。例如:
```html
```
而不是:
```html
```
这样可以确保样式隔离机制的正确工作。