知识库文档，改写控制层基类主要方法列表

Tevin

2025-03-07 a165f3223e9362e5cececdc963dab30e8ca8e657

知识库文档，改写控制层基类主要方法列表

 @framework/201-请求层基类Fetcher.md

@@ -12,7 +12,6 @@
    - [`stringToCamel(str)`](#stringtocamelstr)
    - [`stringToUnderline(str)`](#stringtounderlinestr)
    - [`transKeyName(type, json)`](#transkeynametype-json)
    - [`transImgPath(type, path)`](#transimgpathtype-path)
  - [请求的 options 配置](#请求的-options-配置)
    - [`hostType` 主机类型](#hosttype-主机类型)
    - [`silence` 静音请求](#silence-静音请求)
@@ -160,14 +159,6 @@

---









### `stringToCamel(str)`

**功能**  
@@ -229,40 +220,6 @@

**注意事项**  
- 支持嵌套对象的递归转换

---

### `transImgPath(type, path)`
**功能**  
转换图片路径，支持修复补齐或裁剪多余部分  
适用于处理旧版运营平台的图片路径，确保路径格式统一

**参数**  
| 参数名 | 类型   | 说明                         |
| ------ | ------ | ---------------------------- |
| type   | String | 转换类型：`'fix'` 或 `'cut'` |
| path   | String | 需要转换的图片路径           |

**返回值**  
| 类型   | 说明             |
| ------ | ---------------- |
| String | 转换后的图片路径 |

**示例**  
```js

class FCommon extends Fetcher {

    saveUserInfo() {
        const path = '4/5e56307c489c7.jpg';
        const result = this.transImgPath('fix', path); // 返回 '/upload/4/5e56307c489c7.jpg'
    }
}
```

**注意事项**  
- 支持多路径（逗号分隔）的批量转换，即先分别处理每一项后再（逗号）合并


## 请求的 options 配置


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

@@ -4,12 +4,15 @@
  - [功能说明](#功能说明)
  - [引用方法](#引用方法)
  - [主要方法](#主要方法)
  - [创建页面合并对象](#创建页面合并对象)
    - [主要工作：生成合并对象](#主要工作生成合并对象)
    - [实际合并](#实际合并)
    - [页面能力扩展：跨页面通讯](#页面能力扩展跨页面通讯)
    - [页面能扩展：跨端通讯](#页面能扩展跨端通讯)
  - [转换静态图片引用](#转换静态图片引用)
    - [`createOptions(dataAdd)`](#createoptionsdataadd)
    - [`transAssets(assets)`](#transassetsassets)
      - [静态图片地址转换说明](#静态图片地址转换说明)
  - [页面合并流程](#页面合并流程)
    - [第一步：生成合并对象](#第一步生成合并对象)
    - [第二步：实际合并](#第二步实际合并)
  - [页面能力扩展](#页面能力扩展)
    - [跨页面通讯](#跨页面通讯)
    - [跨端通讯](#跨端通讯)

## 功能说明

@@ -29,28 +32,84 @@

## 主要方法

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

/**
 * 转换静态图片引用
 * @static
 * @param {Object} assets - 静态图片对象
 * @returns {Object} 转换后的静态图片对象
 */
static transAssets(assets = {}) {}
### `createOptions(dataAdd)`
**功能**  
创建页面合并对象，将实例的属性和方法映射到页面合并对象中

**参数**  
| 参数名  | 类型   | 说明                       |
| ------- | ------ | -------------------------- |
| dataAdd | Object | 需要添加到页面中的额外数据 |

**返回值**  
| 类型   | 说明         |
| ------ | ------------ |
| Object | 页面合并对象 |


**注意事项**  
- 如果 `dataAdd` 中包含 `assets` 属性，会自动调用 transAssets 转换其中的图片地址值
- `$` 开头的属性会被直接映射到合并对象中，同时去掉 `$` 前缀
- 非 `$` 开头的属性会被映射到合并对象的 `methods` 属性中


### `transAssets(assets)`
**功能**  
转换静态图片引用的路径，根据运行环境（H5 或小程序）生成图片实际发布的路径

**参数**  
| 参数名 | 类型   | 说明               |
| ------ | ------ | ------------------ |
| assets | Object | 包含图片路径的对象 |

**返回值**  
| 类型   | 说明                 |
| ------ | -------------------- |
| Object | 转换后的图片路径对象 |

#### 静态图片地址转换说明

在目前项目体系设计下，由于不同项目（公众号、小程序、混合app）图片加载机制的不同，设置了一个统一的图片地址转换入口  
经过静态方法 transAssets 转换，可以获得图片实际发布的地址

**示例1**  

```javascript
const assets = { logo: 'assets/images/logo.png' };
const result = Pilot.transAssets(assets); // 输出转换后的图片实际发布地址
```

## 创建页面合并对象
**示例2**  

```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',
        },
    }),
};
```

**注意事项**  
移动端的图片不要使用 css 背景，而是使用 image 图片元素，再填充由 transAssets 生成的实际发布地址

## 页面合并流程

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

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

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

注意：不能在数据控制器中定义 $name、$components、$methods 这三项，因为实际合并时会覆盖

### 实际合并
### 第二步：实际合并

数据控制层和界面层实际的合并，其实是写在界面层上  
由界面层实例化数据控制层，并使用其基类的 createOptions 方法生成选项，再合并进原 Vue 对象
@@ -118,8 +177,9 @@
    ...new PPageName().createOptions(),
};
```
## 页面能力扩展

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

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

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

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

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

## 转换静态图片引用

在目前项目体系设计下，由于不同项目（公众号、小程序、混合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',
        },
    }),
};
```