数据控制层基类Pilot

类 Pilot 是数据控制层的基类，用于将一个 Vue 对象的部分功能拆分出来独立申明后再合并回去，每个数据控制器都需要基础此类

引用方法

import {
    Pilot
} from '@components/bases/Pilot';

主要方法

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

/**
 * 转换静态图片引用
 * @static
 * @param {Object} assets - 静态图片对象
 * @returns {Object} 转换后的静态图片对象
 */
static transAssets(assets = {}) {}

创建页面合并对象

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

主要工作：生成合并对象

• 扫描当前类，以 \$ 开头的属性或方法，去掉 \$ 符后，直接作为 Vue 的属性或方法准备合并
• 扫描当前类，非以 \$ 开头的方法，作为 Vue 对象申明中 methods 的子级方法准备合并
• 生成合并对象，用以进行合并

// 数据控制器中，用 $ 开头的视为 Vue 属性或方法
export class PIndex extends Pilot {
    $data() {
        return {
            a: 1,
        };
    }
    $computed = {
        a2() {},
    };
    $mounted() {}
}

// 合并后的实际效果
const Component = Vue.extend({
    data() {
        return {
            a: 1,
        };
    },
    computed: {
        a2() {},
    },
    mounted() {},
});

// 数据控制器中，非 $ 开头的，转到 methods 中
export class PIndex extends Pilot {
    onOpenSelector() {}
}

// 合并后的实际效果
const Component = Vue.extend({
    methods: {
        onOpenSelector() {},
    },
});

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

实际合并

数据控制层和界面层实际的合并，其实是写在界面层上
由界面层实例化数据控制层，并使用其基类的 createOptions 方法生成选项，再合并进原 Vue 对象

// 引入界面层对应数据控制器
import {
    PPageName
} from '@pilots/pilotGroup/PPageName';

export default {
    name: 'PageName',
    components: {},
    // 示例化数据控制器，由实例生成 Vue 选项，再展开合并到界面 Vue 对象上
    ...new PPageName().createOptions(),
};

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

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

跨页发送：$poster

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

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

例如：

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

跨页接收：$onMessage

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

$onMessage(action, data) {}

例如：

export class PIndex extends Pilot {

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

页面能扩展：跨端通讯

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

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

转换静态图片引用

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

例如：

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

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