大前端 - 前端高级进阶

# 整体介绍

Electron的官方网址：https://www.electronjs.org/ (opens new window)

image-20220129171759395

什么是桌面端？

桌面应用可在Windows、macOS 和Linux 操作系统上运行的应用。

桌面应用的特点

  • 需要安装软件，特定平台运行
  • 可自带资源，无需联网，也可以加载
  • 多窗口、系统联动能力（消息、后台任务）

应用场景

  • 离线应用场景（效率工具、教育）
  • 对大资源加载的应用场景（娱乐，比如：游戏、视频）
  • 兼容性要求高的场景（金融、业务系统）

Electron开发桌面端的优势

  • 前端工程化 + 前端的三方库 + 前端生态
  • 熟悉的语言（HTML/JS/CSS） + 环境（Node.js）
  • 跨端可以更偷懒（一次开发三平台通用）

# 学习路径

image-20220129170058312

说明：

  • Vue & React的生态这个部分跟着对应的框架走；
  • 新的内容其实就是Electron部分需要了解与学习的。

可能你已经发现了，Electron即是给前端应用加了一个”壳“，让它变成了桌面端的应用。

# 常见的GUI工具

名称 语言 优点 缺点
QT C++ 跨平台、性能好、生态好 依赖多，程序包大
PyQT Python 底层集成度高、易上手 授权问题
WPF C# 类库丰富、扩展灵活 只支持Windows，程序包大
WinForm C# 性能好，组件丰富，易上手 只支持Windows，UI差
Swing Java 基于AWT，组件丰富 性能差，UI一般
NW.js JS 跨平台性好，界面美观 底层交互差，性能差，包大
Electron JS 相比NW发展更好 底层交互差，性能差，包大
CEF C++ 性能好，灵活集成，UI美观 占用资源多，包大

总结：

  • 底层依赖+调用：CEF，QT，Swing
  • UI美观：Electron（NW.js），PyQT
  • 跨平台：Swing(Java)，PyQT(Python,C++)，Electron(前端)

# 设计与开发要点

UX设计：UX (User Experience)即用户体验，其核心是用户，体验指用户在使用产品以及与产品发生交互时出现的主观感受和需求满足。

UI设计： UI(User Interface)使用者界面，可以说是 UX 设计的一部分，其中重要的图形化或者可视化部分，都是由 UI 设计来完成的。

通用的原则 ：

  • 交互简单 -> 上手就会，一看就懂
  • 风格统一 -> 菜单、导航、按钮反馈、颜色、预知提示
  • 认知一致 -> 名词、友好提示、划分信息、突出展示

桌面端的设计原则：

  • 保持与PC端统一的风格设计与交互设计
  • 加入定制的菜单与专业操控设计
  • 减少资源加载

社区应用桌面端设计：

  • 登录设计？是否需要顶部导航？
  • 响应式设计？快捷操作设计？
  • 功能性扩展：弹出模态框、消息、图片上传等

# 国内加速配置

设置环境变量ELECTRON_MIRROR，macOS上可以如下设置

export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

Windows上设置环境变量即可。

国内安装electron，推荐使用cnpm的方案：

# 全局安装
npm install -g cnpm --registry=https://registry.npmmirror.com

# 不是修改源
# npm config set registry https://registry.npmmirror.com

← 核心概念 →