快应用

Appearance

集成 ​

快应用提供了各种功能及组件等依赖库，开发时要根据需求选择依赖库进行安装

查看 SDK 历史版本

第1步：package.json配置 ​

点击查看源码
 "dependencies": {
    "@huantv/vue": "1.1.6",
    "@extscreen/es-router": "3.0.0",
    "@extscreen/es-log": "3.0.0",
    "@extscreen/es-core": "3.0.2",
    "@extscreen/es-component": "3.0.1",
}

根目录命令行下执行yarn install命令安装依赖包

第2步：main-native.js配置 ​

  • 注册组件
点击查看源码
js
import {ESComponent} from "@extscreen/es-component";
Vue.use(ESComponent)
  • 注册路由组件
点击查看源码
js
import ESRouter from "@extscreen/es-router";
import routes from './routes';

Vue.use(ESRouter);
const router = new ESRouter(routes);
  • 创建ESApp实例
点击查看源码
js
import App from './App.vue';

const app = new Vue({
    appName: 'EsApp',
    rootView: '#root',
    render: h => h(App),
    router,//上个步骤的ESRouter对象
});

app.$start(() => {
});
  • 注册ESApp实例
点击查看源码
js
import {setESApp} from "@extscreen/es-core";

setESApp(app);

完整代码实例： ​

点击查看源码
js
import Vue from 'vue';

Vue.config.productionTip = false;

//-------------------ES Component---------------------
import {ESComponent} from "@extscreen/es-component";

Vue.use(ESComponent)

//-------------------Config ESRouter---------------------
import ESRouter from "@extscreen/es-router";
import routes from './routes';

Vue.use(ESRouter);
const router = new ESRouter(routes);

//-------------------New Application Instance---------------------
import App from './App.vue';

const app = new Vue({
    appName: 'EsApp',
    rootView: '#root',
    render: h => h(App),
    router,
});

app.$start(() => {
});
//-------------------Register Application Instance---------------------
import {setESApp} from "@extscreen/es-core";

setESApp(app);

第3步：App.vue配置 ​

  • 配置<es-router-view/>
点击查看源码
vue

<template>
  <div id="root">
    <es-router-view/>
  </div>
</template>
  • mixin ESApplication
点击查看源码
js
export default {
  name: 'ESApp',
  /**
   * 集成ESApplication
   */
  mixins: [ESApplication],
  data() {
    return {
      pageParams: {},
    };
  },
}
  • 覆写ESApplication生命周期方法
点击查看源码
js
  methods: {
    /**
     * ESApplication 生命周期: onESCreate();
     */
    onESCreate(props) {
    },
}
  • 根据所需初始化基础模块
点击查看源码
js
methods: {
    /**
     * ESApplication 生命周期: onESCreate();
     */
    onESCreate(props) {
      return Promise.resolve();
    },
}

完整代码示例： ​

点击查看源码
vue

<template>
  <div id="root">
    <es-router-view/>
  </div>
</template>

<script>
import {ESLog} from "@extscreen/es-log";
import {
  ESApplication,
} from '@extscreen/es-core';
import BuildConfig from "@/build/BuildConfig";
import RequestManager from "@/request/RequestManager";

export default {
  name: 'ESApp',
  /**
   * 集成ESApplication
   */
  mixins: [ESApplication],
  data() {
    return {
      pageParams: {},
    };
  },
  methods: {
    /**
     * ESApplication 生命周期: onESCreate();
     */
    onESCreate(props) {
      this.initLog();
      return Promise.resolve()
          .then(() => RequestManager.init())
    },
    /**
     * 初始化ESLog
     */
    initLog() {
      if (BuildConfig.DEBUG) {
        ESLog.setMinimumLoggingLevel(ESLog.VERBOSE);
      } else {
        ESLog.setMinimumLoggingLevel(ESLog.ERROR);
      }
    },
  },
};
</script>

<style scoped>
#root {
  width: 1920px;
  height: 1080px;
}
</style>

第4步：编写入口页面index ​

  • 项目根目录建src/views目录
  • src/views创建index.vue

完整代码示例： ​

点击查看源码
vue

<template>
  <div class="index-root-view-css">
    <span class="index-root-text-view-css">{{ text }}</span>
  </div>
</template>
<script>
import {ESPage} from "@extscreen/es-core";

export default {
  name: 'index',
  mixins: [ESPage],
  data() {
    return {
      text: 'Hello ES!'
    };
  },
  mounted() {
  },
  methods: {},
  components: {}
};
</script>

<style scoped>

.index-root-view-css {
  width: 1920px;
  height: 1080px;
  background-color: darkgray;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.index-root-text-view-css {
  font-size: 50px;
  color: black;
}

</style>

第5步：routes.js页面路由配置 ​

  • 配置index页面路由
点击查看源码
js
import index from "@/views/index";

{
    path: '/index',
    name: 'index',
    component: index
}
  • 配置应用入口为index页面
点击查看源码
js
export default {
    main: 'index',
    routes: [
        {
            path: '/index',
            name: 'index',
            component: index
        },
    ],
};

完整代码示例： ​

点击查看源码
js
import index from "@/views/index";

export default {
    limit: 5,
    main: 'index',
    routes: [
        {
            path: '/index',
            name: 'index',
            component: index
        },
    ],
};

第6步：完结 ​

以index为首页的ES App项目搭建完成。

运行项目显示Hello ES!

HelloWorld