迁移指南

迁移分为两种方案，一种是完全复用之间的旧代码，以组件的方式进行集成；一种是源码级别的集成，将之前的源码、依赖资源等迁移至新的开发工程，下面将具体介绍两种方案的实施步骤以及注意事项，优缺点。

源码级迁移

优势：源码级别的迁移有利于以后长期维护，并且可以完整的使用新框架提供的各种api接口，例如消息通告，应用间的事件通信等
缺点：迁移后的代码在原有的框架中只能以应用的方式运行，不能按照之前组件的方式进行集成，显示效果可以达到弹窗等效果，但具体需要额外的配置及处理。无法完全复用之前的配置

步骤：

将源码拷贝至tis_app_frame/src下
在tis_app_frame/src/main.js中初始化您之前main.js中的代码，在mount函数中完成您初始化的绝大部分工作

import tis, { setup } from "./tis";
import App from "./App.vue";
import store from './store'
import * as utils from './utils'
import './assets/font/css/font-awesome.min.css';
// import rjyxjkBox from './components/rjyxjkBox';
// import {registerApps} from './scriptsLoader/index'
// 生命周期函数
function bootstrap(params) {
  console.log(`[SubApp: ${tis.appId}] boostrap`, params, esapp);
}
//完成您大部分的初始化工作
function mount(params) {
  Object.keys(utils).forEach(key => {
    window.esapp.Vue.prototype[key] = utils[key]
  });

  // vue.component('yxjk', () => import( /* webpackChunkName: "yxjk" */ './components/rjyxjkBox'));
  // window.esapp.Vue.component("tis_yxjk_xtyxjk", () => import(/* webpackChunkName: "tis_yxjk_xtyxjk" */ './components/rjyxjkBox'));

  if (window.esapp) {
    window.esapp.add_path("", store.name, store.obj)
  } else {
    console.log('添加路由失败')
  }

  console.log(`[SubApp: ${tis.appId}] mount`, params);

}
function show(params) {
  console.log(`[SubApp: ${tis.appId}] show`, params);
}
function hide(params) {
  console.log(`[SubApp: ${tis.appId}] hide`, params);
}
function unmount(params) {
  console.log(`[SubApp: ${tis.appId}] unmount`, params);
}
// 收到消息
function onMessage(params, message) {
  console.log(`我是子应用[SubApp: ${tis.appId}] onMessage`, params, message);
}
//初始化全局组件
function install(Vue) {

}
// 启动
setup(App, {
  install,
  bootstrap,
  mount,
  hide,
  show,
  unmount,
  onMessage
});
export * from "./tis";

入口组件的引入

您之间的工程应当有一个主入口组件将所有的组件集成为一个大的界面，如果没有需要您在tis_app_frame/src/App.vue文件中引入您的入口组件，或组成界面的组件集。 tis_yxjk_xtyxjk就是一个示例组件，它的引入方式如下

<template>
  <div id="app">
    <tis_yxjk_xtyxjk></tis_yxjk_xtyxjk>
  </div>
</template>
<script>
  export default {
    name: "App",
    components: {
      "tis_yxjk_xtyxjk": () => import(/* webpackChunkName: "tis_yxjk_xtyxjk" */ './components/rjyxjkBox')
    },
  };
</script>

<style lang="scss" scoped>
  #app {
    text-align: center;
    height: 100%;
    position: absolute;
    width: 100%;
    color: yellow;
  }
</style>

静态资源的拷贝您在之前项目的大部分静态资源应当拷贝至tis_app_frame/src/assets目录下，包括之前在static目录下被引用的资源 eg：static/font----->assets/font 引入路径也要相应
修改tis_app_frame为您的段名tis_app_xxxx
下载您缺失的node_modules依赖

集成组件迁移

优点：您的旧代码不需要做任何改动，可以按照组件的形式集成到应用模板，然后在以应用的方式集成到框架当中
缺点：您的旧代码无法使用新框架的API，您可以通过访问window.esapp.tis得到新框架的大部分API，但是仅限于运行态，开发态下，您无法获取到tis对象，无法方便的进行调试工作

步骤

将旧代码build后的产物拷贝至tis_app_frame/sdk目录下
创建tisplatform.json，描述您index.html必须的资源

{
	"TIS_YXJK": {
		"cssFiles": [
			"/TIS_YXJK/css/styles.css",
			"/TIS_YXJK/css/app.css"
		],
		"jsFiles": [
			"/TIS_YXJK/js/styles.js",
			"/TIS_YXJK/js/vendors~app.js",
			"/TIS_YXJK/js/app.js"
		],
		"preload": false
	}
}

在tis_app_frame/pubic/esplug.json文件中进行组件的配置,name component segprefix为必填项

{
  "name": "应用框架示例",
  "components": [
    {
      "name": "kt运行监控",//名称
      "component": "tis_yxjk_xtyxjk",//组件名称
      "segprefix": "TIS_YXJK"//段名（资源存放的文件夹的名字）
    }
  ]
}

配置config.js 如果您想在开发态下预览集成效果，则需要您配置template/config.js，这个文件是一个代理文件，主要解决开发态下的接口、资源访问跨域的问题

module.exports = {
    "/TIS_YXJK": {//sdk目录下的组件存放文件夹名
        target: 'http://localhost:7000',//资源指向您的开发工程域名
        changeOrigin: true,
    },
    "/api/xtpz/xtpz/": {//您组件中需要访问的接口
        target: 'http://10.10.10.89:3806',//后端域名
        changeOrigin: true,
    }
}

tis_app_frame下npm run serve启动项目，即可看到效果

5.2 KiB Raw Blame History

迁移指南

源码级迁移

集成组件迁移

5.2 KiB

Raw Blame History