Vue进阶（幺陆玖）信创终端适配改造_组件和插件怎么适应信创改造(1)

最新推荐文章于 2024-05-23 09:09:20 发布
最新推荐文章于 2024-05-23 09:09:20 发布
阅读量207 收藏 11
点赞数 4
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84412050/article/details/138319445
版权

}


注⚠️：**麒麟桌面操作系统自带麒麟安全浏览器标识为`Kylinbrowser`。**


* 统信UOS自带浏览器：**版本 6.0.7（正式版本） （64 位）| 93.0.4577.63（此浏览器基于Chromium开源项目及其他开源软件。）**

----------------navigator.userAgent------------------
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 UOS

----------------navigator.platform------------------
Linux x86_64


由上述信息可知，可通过判断`navigator.userAgent`中的`UOS`统信浏桌面操作系统标识识别。

function isUOS(){
if (navigator.userAgent.indexOf(“UOS”) > -1)
return true;
else
return false;
}


* 操作系统：**麒麟桌面操作系统**
* 处理器：**长城处理器**
* 浏览器：**奇安信可信浏览器专业版(V1.0.41904.7)**

----------------navigator.userAgent------------------
Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.246 Safari/537.36 Qaxbrowser
----------------navigator.platform------------------
Linux aarch64


**火狐**

----------------navigator.userAgent------------------
Mozilla/5.0 (X11; Ubuntu; Linux aarch64; rv:78.0) Gecko/20100101 Firefox/78.0
----------------navigator.platform------------------
Linux aarch64


由上述信息可知，可通过判断`navigator.userAgent`中的`Qaxbrowser`奇安信浏览器标识识别。

function isQAX(){
if (navigator.userAgent.indexOf(“Qaxbrowser”) > -1)
return true;
else
return false;
}


综上信息可知，判断终端为信创终端且浏览器为奇安信浏览器的识别逻辑如下：

function isXCandQAX(){
if (navigator.userAgent.indexOf(“Linux”) > -1 && navigator.userAgent.indexOf(“Qaxbrowser”) > -1)
return true;
else
return false;
}


#### 2.1 存在的问题


来自 `navigator` 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：


* 基于检测用户代理字符串`agent string`的浏览器识别是比较不可靠的，用户代理字符串是用户可配置的，`navigator` 数据可被浏览器使用者更改；
* 浏览器无法报告晚于浏览器发布的新操作系统；
* 在 `Firefox` 中，可以在 `about:config` 中更改首选项 `general.useragent.override`。一些火狐扩展是这样做的。但是，这只会更改发送并由`navigator.userAgent`返回的HTTP标头。可能还有其他方法利用 `JavaScript` 代码来识别浏览器。
* `Opera 6+` 允许用户通过菜单设置浏览器标识字符串。
* `Microsoft Internet Explorer`使用`Windows`注册表。
* `Safari` 和 `iCab` 允许用户通过菜单将浏览器用户代理字符串更改为预定义的 `Internet Explorer` 或 `Netscape` 字符串。


由于 `navigator` 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。


由于不同的浏览器支持不同的对象，可以使用对象来检测浏览器。例如，由于只有 `Opera` 支持属性 “`window.opera`”，故可以据此识别出 `Opera`。


例子：

if (window.opera) {…some action…}


另外，在 `JavaScript` 中，无法直接获取设备的 MAC 地址或 CPU 号等底层信息。这是因为浏览器和 `Node.js` 运行在**操作系统提供的沙箱中，限制了对底层硬件的访问和操作**。


如果需要获取设备的 MAC 地址或 CPU 号，可以通过在操作系统上运行本地程序或插件来获取，然后将信息传递给 JavaScript 应用。但是这种做法会引入安全风险，不建议在 web 应用中使用。


在一些特定场景下，可以使用浏览器提供的 `WebRTC API`，通过获取网络接口列表来获取设备的 MAC 地址。但是这种方法不是通用的，而且可能会受到一些限制。


#### 2.2 方案优化


以上方案存在以下问题：


1. 在终端识别时，只可区分`Windows`与`Linux`操作系统类型，并不能识别CPU处理器（例如：`Intel CORE i7`）等硬件信息。故存在`Linux`非信创操作系统上运行奇安信信创浏览器无法识别的问题。


要解决以上问题，可借助平台类型+浏览器名称的方式进行确认，例如

function isXCandQAX(){
if (navigator.userAgent.indexOf(“Linux”) > -1 && navigator.userAgent.indexOf(“Qaxbrowser”) > -1)
return true;
else
return false;
}


#### 2.3 User-Agent 详解


`User-Agent` 是 `Http` 协议中的一部分，属于头域的组成部分，`User Agent`也简称`UA`。用较为简单来说，`UA` 是一种向目标访问网站提供你所使用的**浏览器类型、操作系统及版本、CPU 类型、浏览器渲染引擎、浏览器语言、浏览器插件**等信息的标识。`UA` 字符串在每次浏览器 `HTTP` 请求时都会发送到服务器。


浏览器 `UA` 字串的标准格式为：  
 **浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识 版本信息**


例如，信创终端奇安信浏览器的`User-Agent`：

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 UOS


* `Mozilla/5.0` ：以前用于`Netscape`浏览器，目前大多数浏览器`UA`都会带有。
* `X11; Linux x86_64`：代表Linux系统。
* `AppleWebKit/537.36`：浏览器内核。
* `KHTML`：HTML排版引擎。
* `like Gecko`：这不是Geckeo 浏览器，但是运行起来像Geckeo浏览器。
* `Chrome/93.0.4577.63`：Chrome版本号。
* `Safari/537.36`：宣称自己是Safari。
* `UOS`: 统信桌面操作系统。


有关各字段的明细信息如下：  
 **操作系统标识**


**FreeBSD**


* X11; FreeBSD (version no.) i386
* X11; FreeBSD (version no.) AMD64


**Linux**


* X11; Linux ppc
* X11; Linux ppc64
* X11; Linux i686
* X11; Linux x86\_64


**Mac**


* Macintosh; PPC Mac OS X
* Macintosh; Intel Mac OS X


**Solaris**


* X11; SunOS i86pc
* X11; SunOS sun4u


**Windows**


* `Windows NT 6.1`： 对应操作系统 windows 7
* `Windows NT 6.0`： 对应操作系统 windows vista
* `Windows NT 5.2`： 对应操作系统 windows 2003
* `Windows NT 5.1`： 对应操作系统 windows xp
* `Windows NT 5.0` ： 对应操作系统 windows 2000


**加密等级标识**


* N: 表示无安全加密
* I: 表示弱安全加密
* U: 表示强安全加密


**浏览器语言**


在首选项 > 常规 > 语言中指定的语言


**渲染引擎**


浏览器 使用 Presto 渲染引擎，格式为： Presto/版本号


**版本信息**


显示 浏览器 真实版本信息，格式为： Version/版本号


首先，需要能够识别到当前系统用户所用操作系统类型。可应用如下方法实现：


### 性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）  

2.如何优化webpack构建的性能  

3.移动端的性能优化  

4.Vue的SPA 如何优化加载速度  

5.移动端300ms延迟  

6.页面的重构

**所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/20210323221732119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)

![](https://img-blog.csdnimg.cn/20210323221747467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)
2401_84412050
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue进阶（幺陆玖）信创终端适配改造
IT全栈 华强工作室
09-18 1268
随着外部监管对国产化的要求越来越高，所在产品团队信创专项改造工作开始实施，需求如下：信创平台控件只能使用在信创终端使用，不能应用在Windows上，存量系统运行过程中需要能够识别业务人员当前使用的终端操作系统，若终端操作系统为Windows，则使用旧版本Windows控制，若信创平台为麒麟ARM64、通信UOS中的其中一个，则切换为信创平台。
VUE2.0的浏览器兼容情况汇总
热门推荐
洪飞的博客
05-03 4万+
Web前端最全Vue进阶（幺柒贰）：信创浏览器兼容性探讨_vue浏览器兼容性(1)，2024年最新字节跳动最爱考的前端面试题
2401_84411433的博客
05-16 385
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
主流的浏览器与其内核
青山不改，绿水长流。
09-21 3872
microsoft edge”是由微软开发的基于Chromium开源项目即其他开源软件的网页浏览器，该浏览器内置与windows10版本中，支持内置Cortana语音功能，内置了阅读器、笔记和分享功能。，它开源了浏览器的源码，也提供了很多插件，方便了用户的使用，支持Windows平台、Llnux平台和Mac平台。大部分国产的浏览器（qq浏览器，uc浏览器，猎豹浏览器，360浏览器）基本上是在IE浏览器的内核上进行的二次开发。现在国内市场上有许多双内核的浏览器，使用的是trident,webkit内核。
信创操作系统--统信UOS桌面版（文件与目录管理：浏览、管理、查找、共享、解压缩等）
正月十六工作室
10-26 1万+
文件与目录管理 文章目录文件与目录管理1. 浏览目录和文件2. 新建、删除、复制以及移动文件2.1 新建文件2.2 删除文件2.3 复制文件2.4 移动文件3. 查找文件与配置文件权限3.1 查找文件3.2 配置文件权限4. 文件共享4.1 共享本地文件4.2 访问共享文件5. 文件的压缩与解压缩5.1 使用归档管理器5.2 使用命令行5.3 使用图形file-roller解压缩工具 1. 浏览目录和文件 单击任务栏中的文件管理器图标即可打开文件管理器，也可双击桌面的【计算机】图标进入文件管理器，进入之后即
vuejs 前端ui_终端UI模拟器VueJS组件
cuk5340的博客
07-28 789
vuejs 前端ui Vue.js终端UI模拟器 (Vuejs terminal UI emulator) Vuejs component for displaying UI element that acts as console terminal. Actual terminal logic code forked from Ptty. Vuejs组件，用于显示充当控制台终端的UI元素。 从...
基于Vue和Javascript的多端适配轮播组件设计源码
最新发布
05-25
本源码为基于Vue和Javascript的多端适配轮播组件设计，包含196个JavaScript文件、119个Vue文件等，共543个文件。该项目旨在为用户提供一个全面、便捷的轮播组件解决方案，通过Javascript、Vue、CSS、TypeScript、...
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...
vue 进阶之实现父子组件间的传值
10-17
在Vue.js中，组件是构建应用的基本单元，它们可以独立工作并进行数据交换。本篇文章主要探讨了如何在父子组件之间传递值，这是Vue开发中常见的需求。在Vue中，父子组件之间的通信主要通过props（属性）从父组件向子...
vue分页插件_vue.js分页插件下载
07-16
Vue.js 提供了多种实现分页功能的方法，包括自定义组件和使用现成的分页插件。 一、Vue分页插件的基本原理 Vue分页插件的核心思想是通过计算当前页、总页数、每页显示数量等参数，动态生成分页条目，并监听用户的...
Vue命令行终端插件使用——vue-web-terminal
beifengtz
02-18 8916
分享一个Vue网页命令行插件，模拟原生命令行终端，支持普通文本、表格、Json、代码/多文本显示，大多功能可自定义实现。
信创操作系统--统信UOS桌面版（登录与激活统信：直接登录、远程登录、锁屏、电源管理、激活）
正月十六工作室
10-20 2万+
统信UOS操作系统（项目四 登录与激活统信UOS操作系统） 目录前言1 启动1.1 GRUB简介2 登录2.1 直接登录2.2 远程登陆2.4 电源管理3 激活 前言 1 启动 按开机键后，计算机首先由BIOS/UEFI将整个控制权交给启动项引导器来加载操作系统。在统信UOS中由“Grand Unified Bootloader“(GRUB)来启动内核和操作系统。 1.1 GRUB简介 GRUB（Grand Unified Bootloader）是统一资源引导Grand Unified Bootloa.
低代码信创开发核心技术（二）：手撕灵活好用的Vue拖拉拽布局系统
杨若瑜的技术博客
05-16 2390
随着信息化时代的到来，软件已经成为企业和个人不可或缺的工具。然而，许多人在开发软件时遇到了各种问题，比如开发周期长、技术门槛高、成本高昂等等。为了解决这些问题，低代码平台应运而生。低代码平台是一种快速开发工具，它可以帮助开发者快速构建应用程序，从而提高开发效率和降低成本。近年来，国产软件市场蓬勃发展，越来越多的企业开始关注自主创新和信息化发展。低代码平台作为信息化创新的重要工具，也逐渐受到了广泛关注。同时，随着Vue.js等前端框架的普及，拖拉拽布局系统也成为了低代码平台的核心技术之一。
信创兼容性适配大解析：国产软硬件如何携手应对挑战？
05-23 1121
信创兼容性适配大解析：国产软硬件如何携手应对挑战？
信创操作系统--统信UOS桌面版（上网：连接有线、无线网络，使用浏览器）
正月十六工作室
10-28 2万+
UOS操作系统-上网 目录前言系统体检病毒查杀防火墙全局设置自启动管理系统安全 前言 安全中心是统信UOS预装的安全辅助应用，主要包括系统体检、病毒查杀、防火墙、自启动管理以及系统安全等功能，可以全面提升系统的安全性。 系统体检 点击屏幕左下角的启动器按钮，进入启动器界面，通过上下滚动鼠标轮浏览或者通过搜索找到安全中心，单击打开安全中心。 进入安全中心首页，在首页中观察到【立即体检】选项，点击该选项即可进行系统体检，如图1-1所示。 图1-1 安全中心首页界面 病毒查杀 在安全中心主界面中，选择左.
vuejs 组件_组件VueJS模拟终端
cuk5340的博客
07-31 976
vuejs 组件 贝壳 (vue-shell) vue-shell is a component vuejs to provides an easy way to create a terminal on your application and then add your own philosophy by adding all the commands you want with their ...
Vue复习（2）：终端创建、基本使用及其生命周期
愤怒的小火柴人
03-13 1103
在终端创建项目，其基本使用、props传递的自定义限制及其生命周期
vue按需引入第三方插件_elementui组件按需引入踩过的坑
05-26
在使用 Vue 开发时，按需引入第三方插件是一个比较常见的需求，这样可以减小打包体积、提高网站性能。而 ElementUI 是一个非常流行的组件库，也支持按需引入。 以下是按需引入 ElementUI 组件的步骤： 1. 安装 babel-plugin-component ```bash npm install babel-plugin-component -D ``` 2. 配置 .babelrc 文件 在 .babelrc 文件中添加以下代码： ```json { "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ``` 这里的 libraryName 表示引入的组件库名称，styleLibraryName 表示引入的主题名称。 3. 按需引入组件 接下来就可以按需引入 ElementUI 组件了，例如： ```javascript import Vue from 'vue' import { Button, Select } from 'element-ui' Vue.use(Button) Vue.use(Select) ``` 需要注意的是，按需引入时必须使用 {} 来包裹需要引入的组件名称，否则会引入整个 ElementUI 库。 另外，如果使用了 babel-loader 进行编译，还需要在 webpack 配置文件中添加以下代码： ```javascript { test: /\.js$/, loader: 'babel-loader', include: [ resolve('src'), resolve('test'), resolve('node_modules/element-ui/src'), resolve('node_modules/element-ui/packages') ] } ``` 这里的 include 表示需要进行 babel-loader 处理的文件路径。 希望这个回答能够帮到你，如果还有问题可以继续提问哦~

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值