WebUI开发流程框架讲解：适用于miniblink | CEF | EdgeView

测码奔腾永无BUG

前言

很久没回论坛了，相信大家应该都接触过了WebUI，也都被WebUI所能实现的绚丽界面给触动了吧，这期教程呢主要是讲解WebUI的开发流程框架，属于通用流程（适用于miniblink、CEF、EdgeView）

在此先声明一下：本教程纯粹为个人的理解，总会有不完善的地方，毕竟一千个读者眼中有一千个哈姆雷特，经验教程也一样，不同的人有不同的见解，大家可以在评论区回复更正

现代前端开发 + 易语言作为后端 的开发流程框架如下：

看完框架，下面来解释框架中的每个部分的负责的功能

UI层

在UI层主要有Node.js、包管理器、打包工具、前端基础框架、前端UI框架等。

之所以会出现这么多东西主要是为了解决传统Web开发中的几大痛点：

1. 性能问题：重复加载资源 每个页面独立加载 HTML、CSS、JS导致页面切换慢，用户体验差等问题
2. 代码复用与维护困难：传统开发依赖全局函数或模板片段，难以复用 UI 组件（如导航栏、表单），还有就是css样式冲突等问题，全局 CSS 容易因选择器优先级或命名冲突导致样式污染

而现代化的Web开发则优先采用组件化开发的方式，提高代码复用率，减少代码冲突

例如React中通过虚拟dom以及CSS Modules自动分配class样式名称，避免样式名冲突、样式污染等问题，
编译前代码：

<nav className={styles.Navbar} />

编译后代码：

<nav class="Navbar_随机后缀">
<nav class="Navbar_SA56sd">

Node.js

Node.js 是一个基于Chrome V8引擎的JavaScript运行环境，你可以理解成一个没有界面的浏览器，但这个浏览器比普通浏览器更加强大，它没有各种跨域限制、支持直接调用系统API的浏览器就行，主要用于运行Javascript

包管理器

在传统的Web前端开发中，我们通常需要手动管理各种JS依赖，例如layui依赖jQuery.js，那么在开发时还得手动去找并下载依赖，然后通过script标签引入到页面中，效率非常低，而包管理器的作用就是负责管理这种依赖文件，可以在cmd中通过以下命令快速下载依赖包

# 包管理器：npm
npm install <包名>

# 包管理器：yarn
yarn add <包名>

# 包管理器 pnpm
pnpm add <包名>

然后就可以通过在入口文件中或者是组件文件中用import来进行模块化导入使用

打包工具

打包工具主要有：vite、webpacker等，我常用的主要是vite，因为使用起来更加方便，不用像webpacker那样编写各种配置文件，打包工具的作用主要作用于JS代码的合并、混淆、压缩，将Node.js环境下的代码编译成浏览器环境中可运行的常规JS代码，可以通过以下命令运行前端项目以及编译项目

# 开发模式下运行前端项目
# 主要用于界面调试
npm run dev

# 编译前端项目
# 将前端项目编译成浏览器环境下可运行的常规三件套文件： HTML\CSS\JS

前端UI框架

前端UI框架的作用主要是为了让我们快速使用现成的UI组件去搭建界面，提高开发效率用的

易语言后端

易语言作为后端主要负责系统API调用、数据处理这块，如调用系统API创建EdgeView窗口、创建CEF窗口、创建Miniblink窗口等、获取系统信息、获取注册表信息等这些浏览器本身无法做到的功能（会出现跨域限制的部分），都需要通过易语言来当交互层进行处理并呈现到Web界面中，这样做的优势就是前后端分离，各个部分功能调整时不会相互影响

以上就是我个人的一些经验理解，如有不足可以在评论区补充

antoni

原理解析的很好哦，写详细点就是一份教程了

libaideshi

6666666666666666666666666

魁啊啊

2wEn

一库一库 斯国一