知识库文档，数据控制层基类，补充部分说明

Tevin

2025-03-03 219fb684a854c63d51fdad6443e65693447b4f26

 _knowledges/202-数据控制层基类Pilot.md

@@ -15,10 +15,10 @@
```js
/**
 * 创建页面选项
 * @param {Object} dataAdd - 需要添加到 vue data 中的额外数据
 * @param {Object} [dataAdd] - 需要添加到 vue data 中的额外数据
 * @returns {Object} 页面选项对象
 */
createOptions(dataAdd) {}
createOptions(dataAdd = {}) {}

/**
 * 转换静态图片引用
@@ -33,7 +33,7 @@

`createOptions` 是类 Pilot 的核心方法，此方法将独立申明的信息合并回原 Vue 对象

### 主要工作
### 主要工作：生成合并对象

* 扫描当前类，以 \$ 开头的属性或方法，去掉 \$ 符后，直接作为 Vue 的属性或方法准备合并
* 扫描当前类，非以 \$ 开头的方法，作为 Vue 对象申明中 methods 的子级方法准备合并
@@ -104,6 +104,87 @@

### 页面能力扩展：跨页面通讯

给实际 Vue 实例增加了
Taro 的跨页面通讯能力，仅小程序可用，非小城不能跨页通讯非常不方便  
因此，使用 createOptions 创建合并对象时，给页面的 Vue 实例，增加了跨页面通讯的方法，兼容所有平台

**跨页发送：$poster**

此方法挂载到 vue 实例的 this 上

```js
this.$poster(direction, action, data);
```

| 参数名 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| direction | String | 是 | 发送去向，有两个值，下一页'nextPage'、上一页'prevPage'） |
| action | String | 是 | 动作名称 |
| data | any | 否 | 携带数据 |

例如：

```js
export class PList extends Pilot {
    onSaveSetting() {
        // 设置保存后，通知上页
        this.$poster('prevPage', 'settingChanged');
    }
}
```

**跨页接收：$onMessage**

此方法的用法，类似生命周期的钩子

```js
$onMessage(action, data) {}
```

例如：

```js
export class PIndex extends Pilot {

    $onMessage(action, data) {
        // 接收消息，设置已变更
        if (action === 'settingChanged') {
            // do something
        }
    }
}
```

### 页面能扩展：跨端通讯

当我们进混合 APP 开发时，我们需要与 java 层进行通讯，使用 createOptions 创建合并对象时，增加了跨通讯的能力

（更多跨端通讯明细待续）

## 转换静态图片引用

在目前项目体系设计下，由于不同项目（公众号、小程序、混合app）图片加载机制的不同，设置了一个统一的图片地址转换入口
* 移动端的图片不能使用背景，只能使用 image 图片元素
* 图片地址需经过静态方法 transAssets 转换而来
* createOptions 的参数 dataAdd 中，如果包含 assets 属性，会自动调用 transAssets 全部转换

例如：

```HTML
<template>
    <image :src="assets.homeNav1" mode="aspectFit" />
</template>
```

```js
export default {
    name: 'index',
    ...new PIndex().createOptions({
        // 首页菜单图片，会全部经过 transAssets 进行路径转换，转换为图片实际发布的地址
        assets: {
            homeNav1: 'assets/img/home-nav-01.png',
            homeNav2: 'assets/img/home-nav-02.png',
            homeNav3: 'assets/img/home-nav-03.png',
        },
    }),
};
```