WebApp【公共组件库】@前端(For Git Submodule)
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 = {}) {}
/**
 * 转换静态图片引用
@@ -105,7 +105,7 @@
### 页面能力扩展:跨页面通讯
Taro 的跨页面通讯能力,仅小程序可用,非小城不能跨页通讯非常不方便  
因此,给页面的 Vue 实例,增加了跨页面通讯的方法,兼容所有平台
因此,使用 createOptions 创建合并对象时,给页面的 Vue 实例,增加了跨页面通讯的方法,兼容所有平台
**跨页发送:$poster**
@@ -156,6 +156,35 @@
### 页面能扩展:跨端通讯
当我们进混合 APP 开发时,我们需要与 java 层进行通讯,增加了跨通讯的能力
当我们进混合 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',
        },
    }),
};
```