快应用

Appearance

使用初探 ​

编写页面es-first-page.vue和es-second-page.vue演示以下场景：

  • 启动同一个ES运行环境中的新页面

  • 启动新创建的ES运行环境中的新页面

  • 关闭当前页面

第1步：es-first-page.vue和es-second-page.vue ​

es-first-page.vue示例代码 ​

点击查看源码
js
<template>
  <div class="es-first-page">
    <span class="es-first-page-title-text">第一个页面</span>
    <div class="es-first-page-button"
         :focusable="true"
         :enableFocusBorder="true"
         :focusScale="1.1"
         @click="onLaunchESPage">
      <span class="es-first-page-text">启动同一个ES运行环境中的第二个页面</span>
    </div>
    <div class="es-first-page-button"
         :focusable="true"
         :enableFocusBorder="true"
         :focusScale="1.1"
         @click="onLaunchNativePage">
      <span class="es-first-page-text">启动新创建的ES运行环境中的第二个页面</span>
    </div>
  </div>
</template>

<script>

import {ESLaunchManager, ESPage} from "@extscreen/es-core";

export default {
  name: "es-first-page",
  mixins: [ESPage],
  methods: {
    onLaunchESPage(e) {
      ESLaunchManager.launchESPage({
        url: 'es_second_page',
        params: {
          from: '来自第一个页面',
          message: '来自第一个页面的消息',
          xxx: '自定义参数',
        }
      })
    },
    onLaunchNativePage() {
      ESLaunchManager.launchNativePage({
        url: 'es_second_page',
        params: {
          from: '来自第一个页面',
          message: '来自第一个页面的消息',
          xxx: '自定义参数',
        }
      })
    },
    onBackPressed() {
      ESLaunchManager.finishESPage();
    }
  },
}
</script>

<style scoped>
.es-first-page {
  width: 1920px;
  height: 1080px;
  background-color: grey;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.es-first-page-button {
  width: 550px;
  height: 80px;
  background-color: #42b983;
  margin: 20px;
  border-radius: 8px;
}

.es-first-page-text {
  width: 550px;
  height: 80px;
  font-size: 20px;
  text-align: center;
  color: white;
}

.es-first-page-title-text {
  width: 550px;
  height: 80px;
  font-size: 30px;
  text-align: center;
  color: #42b983;
  margin-bottom: 100px;
}
</style>

es-second-page.vue示例代码 ​

点击查看源码
js
<template>
  <div class="es-second-page">
    <span class="es-second-page-title-text">第二个页面</span>
    <div class="es-second-page-button"
         :focusable="true"
         :enableFocusBorder="true"
         :focusScale="1.1"
         @click="onClick">
      <span class="es-second-page-text">关闭页面</span>
    </div>
  </div>
</template>

<script>
import {ESLaunchManager, ESPage, ESToast} from "@extscreen/es-core";

export default {
  name: "es_second_page",
  mixins: [ESPage],
  methods: {
    onESCreate(params) {
      ESToast.showToast("参数:" + JSON.stringify(params))
    },
    onClick(e) {
      ESLaunchManager.finishESPage();
    },
    onBackPressed() {
      ESLaunchManager.finishESPage();
    }
  },
}
</script>

<style scoped>
.es-second-page {
  width: 1920px;
  height: 1080px;
  background-color: grey;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.es-second-page-button {
  width: 550px;
  height: 80px;
  background-color: #42b983;
  margin: 20px;
  border-radius: 8px;
}

.es-second-page-text {
  width: 550px;
  height: 80px;
  font-size: 20px;
  text-align: center;
  color: white;
  margin-bottom: 100px;
}

.es-second-page-title-text {
  width: 550px;
  height: 80px;
  font-size: 30px;
  text-align: center;
  color: #42b983;
  margin-bottom: 100px;
}
</style>

第2步：routes.js中添加页面路由 ​

点击查看源码
js

const es_first_page = () => import('./views/page/es-first-page')
const es_second_page = () => import('./views/page/es-second-page')

export default {
    limit: 5,
    routes: [
        {
            path: '/es_first_page',
            name: 'es_first_page',
            component: es_first_page,
            launchMode: 'standard',
        },
        {
            path: '/es_second_page',
            name: 'es_second_page',
            component: es_second_page,
            launchMode: 'standard',
        },
    ],
};

第3步：routes.js中设置主入口页面 ​

点击查看源码
js

const es_first_page = () => import('./views/page/es-first-page')
const es_second_page = () => import('./views/page/es-second-page')

export default {
    limit: 5,
    main: 'es_first_page',
    routes: [
        {
            path: '/es_first_page',
            name: 'es_first_page',
            component: es_first_page,
            launchMode: 'standard',
        },
        {
            path: '/es_second_page',
            name: 'es_second_page',
            component: es_second_page,
            launchMode: 'standard',
        },
    ],
};

第4步：app.vue中配置ESApplication ​

点击查看源码
js
<template>
  <div id="root">
    <router-view/>
  </div>
</template>

<script>
import {
  ESApplication,
} from '@extscreen/es-core';

const TAG = 'ESApp'

export default {
  name: 'ESApp',
  mixins: [
    ESApplication
  ],
};
</script>

<style scoped>
#root {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

</style>

第5步：运行，查看示例效果 ​