屏幕插件使用

必备技能

前提条件：开发人员需具备，扎实的 HTML、CSS、JavaScript 功底，一定的 VUE 开发基础。

更多 VUE 开发技巧和学习指南可参考VUE 官网 (opens new window)。

使用步骤

插件安装

• 在工程目录执行npm install @aurora/wemax-screen 命令安装屏幕插件依赖, 版本@1.0.13以上

插件注册

• 在工程入口main.js中引入屏幕插件，进行全局注册

  // 引入插件初始化进行全局注册
  import { initBoot } from '@aurora/wemax-screen'
  /**
   * @description initBoot 支持3个参数
   * @param {String} env 环境入参 his-beta/his-prod
   * @param {String} useApig 是否使用apig接口，use/'' 不传默认''， apig接口可用于移动端
   * @param {Object} service 自行封装的$service 不传默认使用屏幕插件封装的$service
   */
  const screenInit = initBoot({
    env: 'his-beta',
    // useApig: '',
    // service: $service
  })
  Vue.use(screenInit)

注意: 如传入自行封装的$service，需要参考以下network封装配置。

// 使用aui service
import AuroraService from '@aurora/service'

/**
 * @description 从cookie中获取指定key的value值
 * @name {String} cookie的key名称
 */
const getCookieValueByName = (name) => {
  return ''
}

/**
 * @description 封装服务请求
 * @param {String} env 环境 his-beta/his-prod
 */
export const initService = function(env) {
  const jalor6Service = new AuroraService()
  // 需要定义currentLanguage 环境判断 zh_CN en_US
  jalor6Service.base.getEnvInfoSync().currentLanguage = 'zh_CN'
  // 请求拦截器
  jalor6Service.network.interceptors.request.use(function(config) {
    if (config.url.includes('datasource/datamodel/v1/sql/execute') {
      // 数据查看权限问题  希望在SQL模型里面能够把当前用户的ID传过去
      config.data.userId = jalor6Service.base.getEnvInfoSync().user.userId
    }

    /*
     * 使用apig接口 需要多传入3个请求头参数
     * wemax请求 header增加 X-HW-ID/X-HW-APPKEY/X-XSRF-TOKEN 入参
     * 注意: X-XSRF-TOKEN来源Cookie
     */
    // config.headers['X-HW-ID'] = 'com.huawei.it.his.wemax'
    // config.headers['X-HW-APPKEY'] = env === 'his-prod' ? 'prod Token' : 'Uat token'
    // config.headers['IAM-Csrf-Token'] = getCookieValueByName('IAM-Csrf-Token')
    return config
  }, function(error) {
    return Promise.reject(error)
  })
  // 响应拦截器
  jalor6Service.network.interceptors.response.use(function(response) {
    return response
  }, function(error) {
    return Promise.reject(error)
  })
  return jalor6Service
}

// 在工程入口main.js引入$service初始化方法
import { initService } from '@/utils/network'
const $service = initService('his-beta') // his-beta/his-prod
// 将$service挂载全局或者传入initBoot
// Vue.prototype.$service = $service

插件使用

• 在vue中引入使用, 引入ScreenPlugin组件使用

// 全局注册成功后引入组件 传入对应屏幕id即可预览
<template>
  <div class="wemax_screen_plugin_use">
    <ScreenPlugin id="E0F796FAEE0945638F526B72F369323B59288"></ScreenPlugin>
  </div>
</template>

<script>
import ScreenPlugin from '@aurora/wemax-screen'
export default {
  components: {
    ScreenPlugin
  }
}
</script>
<style scoped>
.wemax_screen_plugin_use {
  width: 100%;
  height: 100%;
}
</style>