原生微信小程序详解

13

原生微信小程序详解

原生微信小程序详解通信模型

微信小程序的通信模型基于事件驱动机制,通过事件来传递数据和触发逻辑。小程序中的组件可以通过事件来与其他组件进行通信。

事件类型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...

...

...

```

这样可以确保样式隔离机制的正确工作。

小程序微信小程序小程序笔记学习前端

版权声明:除非特别标注,否则均为网络文章,侵权请联系站长删除。

上一篇 微信小程序入门讲解【超详细】

下一篇 【微信小程序】基础篇 -- 分包 - 独立分包 & 分包预下载(四十五)