蒙娜丽宁
华为HDE(HUAWEI Developer Experts),UnityMarvel创始人,开放原子基金会银牌讲师,51CTO学堂金牌讲师,IT畅销书作者。从事软件研究和开发超过20年,长期从事编译器、人工智能、Python、Go、JavaScript、Java及跨平台技术的研究和开发工作,曾出版超过40本IT图书。主要著作包括《Python从菜鸟到高手》、《Python爬虫从菜鸟到高手》、《奇妙的Python:神奇代码漫游之旅》。
展开
-
开篇词:“桌面应用”是一顶璀璨的王冠
大家好,我是李宁,网名“银河使者”,IT 图书作者(代表作《Python 从菜鸟到高手》,欧瑞科技创始人,领导和参与了欧瑞科技公众号,小程序(极客题库)的开发。现在正带领团队研发高效全平台开发工具 OriUnity,主要使用的技术包括 Electron 和 Go 语言。课程背景可能有很多读者会有这样的疑问:为什么用 JavaScript 来开发桌面应用?曾经的 JavaScript 脆弱、简...原创 2020-09-22 12:25:27 · 3077 阅读 · 0 评论 -
第01课:Electron 开发的优势
1.1 Node.js,一个让 JavaScript 从丑小鸭变成白天鹅的框架可能很多读者会感到奇怪,本系列课程主要介绍的是 Electron,为什么一开始要提到 Node.js 和 JavaScript 呢?它们是什么关系呢?别急,听我慢慢道来。相信做 JavaScript 开发的读者对 Node.js 不陌生,Node.js 诞生于 2009 年,类似于 ASP.NET,是用来开发服务端程...原创 2020-09-22 12:25:26 · 5292 阅读 · 0 评论 -
第02课:Electron 开发的准备工作
2.1 搭建 Electron 开发环境在使用 Electron 开发应用之前,要先安装 Electron,而 Electron 需要依赖 Node.js,因此在安装之前,要先安装 Node.js。Node.js 允许使用 JavaScript 开发服务端以及命令行程序,读者可以到 Node.js 的官网下载最新版本的安装程序。Node.js 是跨平台的,建议读者下载长期维护版本(LTS),然...原创 2020-09-22 12:25:24 · 1417 阅读 · 0 评论 -
第03课:Electron 桌面应用开发
开发一款功能完整的桌面应用,通常不会使用记事本去完成所有的开发工作,核心的开发工作一般会在 IDE(集成开发环境,Integrated Development Environment)中完成。由于 Electron 应用主要使用 Web 技术(HTML、CSS 和 JavaScript)开发,因此只要支持编辑 JavaScript、HTML、CSS 代码的 IDE,都可以开发 Electron 应...原创 2020-09-22 12:25:23 · 2508 阅读 · 0 评论 -
第04课:Electron 应用代码管理
本课程使用 VS Code 作为编写 Electron 应用的 IDE,主要原因是 VS Code 对 JavaScript 的调试支持得比较好。在开发正式的项目时,不管是开源的还是私有的,通常都需要通过代码库来管理,最流行的是 Git 代码库。VS Code 已经集成了 Git,能够支持 Git 的基本功能。本节将介绍如何使用 VS Code 将本地代码提交到远程 Git 代码仓库,以及从远程代...原创 2020-09-22 12:25:21 · 1165 阅读 · 0 评论 -
第05课:打开对话框的功能效果
Electron 中提供了一个 Dialog 对象,通过该对象的若干个方法,可以显示不同类型的对话框,如打开文件对话框、保存文件对话框、信息对话框、错误对话框等。获取 Dialog 对象的代码如下:const remote = require('electron').remote;const dialog = remote.dialog;或使用下面的代码:const {dialog} ...原创 2020-09-22 12:25:20 · 1406 阅读 · 0 评论 -
第06课:保存对话框和显示对话框消息
6.1 保存对话框使用 showSaveDialog 方法可以显示保存对话框,保存对话框与打开对话框类似,需要自己输入要保存的用户名,当然,也可以选择已经存储的文件名,不过这样一来就会覆盖这个文件。这里要强调一点,保存对话框只是提供了要保存的文件名,至于是否保存文件、以何种文件格式保存,保存对话框并不负责,需要另外编写代码解决。showSaveDialog 方法与 showOpenDialog...原创 2020-09-22 12:25:19 · 1195 阅读 · 0 评论 -
第07课:使用 HTML 5 API 创建子窗口
在 Electron 中还存在一种创建窗口的方式,就是使用 HTML 5 的 API 创建窗口。在 HTML 5 中提供了 window.open 方法用于打开一个子窗口,该方法返回一个 BrowserWindowProxy 对象,并且打开了一个功能受限的窗口。window.open 方法的原型如下。window.open(url[, title] [,attributes)参数的说明如下...原创 2020-09-22 12:25:17 · 1226 阅读 · 0 评论 -
第08课:子窗口交互
用 open 方法打开的子窗口也会面临和其他窗口交互的问题,交互无外乎互相传递数据,并接收其他窗口传递过来的数据。8.1 最简单的传递接收数据向 open 方法创建的子窗口传递数据有多种方法,其中之一就是使用 BrowserWindowProxy.postMessage 方法,该方法可以向指定的窗口传递任意类型的数据和来源(origin),如果不知来源,可以使用星号 '*' 代替,关于来源是什...原创 2020-09-22 12:25:16 · 988 阅读 · 0 评论 -
第09课:在窗口中嵌入 Web 页面
使用 <webview> 标签可以在窗口中创造另外一个页面。不像 iframe,webview 在与应用程序不同的进程中运行,它与你的网页没有相同的权限,应用程序和嵌入内容之间的所有交互都将是异步的。 9.1 在 Web 页面中使用 <webview> 标签<webview> 标签可以直接嵌入到 Web 页面中,代码如下。 <webview id="...原创 2020-09-22 12:25:14 · 1105 阅读 · 0 评论 -
第10课:使用模板创建原生菜单
现在我们介绍如何为桌面应用创建应用菜单,还会介绍在 Mac OS X 和 Windows 下菜单的不同之处;然后会介绍上下文菜单,它会在用户单击应用内的某个元素时,给用户提供一些选项,例如,在文档的某个位置插入新的文本。Electron 桌面应用支持三种菜单:应用菜单、上下文菜单及托盘菜单。我们先来看应用菜单,应用菜单一般在窗口的上面,标准栏的下面,不过在 Mac OS X 系统中会有所不同。...原创 2020-09-22 12:25:13 · 652 阅读 · 0 评论 -
第11课:菜单项的角色和类型
11.1 菜单项的角色(role)常用的菜单项角色菜单项的角色就是菜单的预定义动作,通过菜单对象的 role 属性设置,通用的角色如下:undoredocutcopypastepasteAndMatchStyleselectAlldeleteminimize,最小化当前窗口close,关闭当前窗quit,退出应用程序reload,重新装载当前窗口forceReloa...原创 2020-09-22 12:25:11 · 888 阅读 · 0 评论 -
第12课:动态创建菜单和上下文菜单
12.1 动态创建菜单在很多应用场景需要动态添加菜单项,动态添加菜单项的基本原理就是创建若各个 MenuItem 对象,每一个 MenuItem 对象相当于一个菜单项,然后将 MenuItem 对象逐个添加到 Menu 对象中,Menu 对象相当于带子菜单的菜单项。本节给一个案例,用来完整阐述如何使用 MenuItem 和 Menu 动态创建菜单。这个案例的功能是首先动态创建最初的菜单,然后通...原创 2020-09-22 12:25:10 · 765 阅读 · 0 评论 -
第13课:创建托盘应用
这里的托盘是指操作系统的一个功能区,在这个功能区中有一些图标,每一个图标代表一个应用程序。通常在图标上单击鼠标的左键或右键,会弹出一个菜单或窗口来完成特定的功能。Windows、Mac OS X 和 Linux 的托盘效果有一些差异。Windows 的托盘在任务栏的右侧(屏幕的右下角),如下图所示。Mac OS X 的托盘在菜单栏的右侧(屏幕的右上角),如下图所示。Electron 提...原创 2020-09-22 12:25:08 · 860 阅读 · 0 评论 -
第14课:Electron 应用中的拖拽操作
如果应用程序需要操作外部文件,通常会使用文件打开对话框选择这个文件,然后交由程序做进一步处理,文件打开对话框会返回一个或多个选择的文件路径。不过更友好的方式是将文件拖动到程序的窗口或某一个区域上,然后同样会返回一个或多个文件给应用程序,这种行为称为拖拽操作。本节将会通过两个案例介绍如何实现 Electron 应用的拖拽操作。14.1 拖拽操作:拖放并显示图像本节将通过一个简单的案例演示如何实...原创 2020-09-22 12:25:07 · 1994 阅读 · 0 评论 -
第15课:摄像头的使用
本例利用 webkitGetUserMedia 方法调用本机的摄像头拍照,该方法是基于 Webkit 内核浏览器专用的。下面先看一下效果。点击页面右下角的按钮,会弹出一个保存对话框,可以将摄像头当前的图像保存成一个 png 格式的图像。下面先看一下本例的实现代码。index.html<html> <head> <title>拍照<...原创 2020-09-22 12:25:06 · 640 阅读 · 0 评论 -
第16课:根据当前操作系统定制样式
尽管 Electron 可以开发跨平台桌面应用,但仍然需要考虑不同平台的差异,例如,Mac OS X 的菜单和 Windows、Linux 的菜单有一定的差异,因此需要单独处理 Mac OS X 下的菜单,或者在不同操作系统平台下使用不同的样式文件进行布局或设置 UI 风格,在这些情况下,就需要知道当前运行的操作系统类型。Node.js 本身提供了 os 模块可以用来获取当前操作系统的类型,...原创 2020-09-22 12:25:04 · 689 阅读 · 0 评论 -
第17课:使用 localStorage 读写键值数据
对于大多数桌面应用来说,都绕不开数据存储,我们可以将数据保存在各种类型的文件或数据库中,如纯文本文件、二进制文件、XML 文件、JSON 文件、关系型数据库、文档数据库等。由于 Electron 应用本质上是基于 Web 技术的,因而 Electron 应用的存储方案其实就是 Web 的存储方案。在以前,Web 存储方案非常单一,数据都是依赖于后端数据库的存储,如果用户在前端页面输入一些数据,提...原创 2020-09-22 12:25:03 · 782 阅读 · 0 评论 -
第18课:JavaScript 引擎操作 SQLite 数据库
尽管 Electron 应用可以利用 localStorage API 将数据以键值的形式保存在客户端,但 localStorage 并不适合存储大量的数据,而且 localStorage 是通过键值存储数据的,比较适合保存配置信息,而不是海量的结构化数据,如二维表。因此,要想在 Electron 客户端保存更复杂的数据而且便于检索,就需要使用真正的数据库,如 SQLite、MySQL。由于 E...原创 2020-09-22 12:25:01 · 1873 阅读 · 0 评论 -
第19课:sqlite 3 模块操作 SQLite 数据库
虽然 sql.js 在操作 SQLite 数据库方面没什么问题,但由于 sql.js 是基于 JavaScript 的,因而效率较低,而且操作都是在内存中完成的,如果要保存修改,需要将整个数据库写到文件中,比较费事,而且写数据的效率不高,因此在遇到大量数据的情况下,建议使用 Node.js 中的 sqlite 3 模块操作 SQLite 数据库。19.1 安装 sqlite 3 模块sqlit...原创 2020-09-22 12:25:00 · 1095 阅读 · 0 评论 -
第20课:Electron 直接访问 MySQL 数据库
不管是 localStorage,还是 SQLite,都将数据保存在本地,而且无法多台电脑共享(除非将数据库文件复制到其他的电脑中)。如果想让数据在多台电脑之间共享,而且支持更复杂的操作,如锁定某张表或某条记录、防止脏数据等,可以使用网络关系型数据库,其中 MySQL 是这类数据库的代表,用户基数非常大。本节将会讲解如何直接在 Electron 中连接 MySQL 数据库。几乎所有的 Web 应...原创 2020-09-22 12:24:58 · 3182 阅读 · 0 评论 -
第21课:剪贴板的使用
在 Electron 中通过 clipboard 对象操作剪贴板,目前主要支持如下几种类型的数据:纯文本HTML 代码RTF 文档图像通过 readxxx 和 writexxx 方法,可以分别从剪贴板读取和写入上述 4 个类型的数据,其中 xxx 是 Text、HTML、RTF 和 Image。下面的例子演示了如何在 Electron 应用中操作剪贴板。(1)首先编写主页面 ind...原创 2020-09-22 12:24:57 · 649 阅读 · 0 评论 -
第22课:打包和发布 Electron 应用
到目前为止,我们已经学习了很多 Electron 基础知识,不过还有一个问题没解决,就是我们开发了一款基于 Electron 的应用,自己和团队用肯定是没有任何问题,因为团队每个成员的机器上都有 Node.js 和 Electron 环境,但如何将这款应用分发给用户呢?除了为自己团队开发的应用外,都会面临这个问题。肯定不能要求用户在安装应用之前,先安装 Node.js、Electron 以及其他...原创 2020-09-22 12:24:55 · 709 阅读 · 0 评论 -
第23课:实现自己的打包应用
尽管 electron-packager-interactive 可以完成大多数命令行参数的输入,但仍然需要通过命令行操作,也是比较麻烦,尤其是遇到输入路径的情况下,还需要复制粘贴的过程,因此最好的方法是直接利用 Electron 自己来编写一个可视化的打包工具。使用 Electron 编写可视化打包工具的基本原理就是通过 Node.js 的进程 API 调用 electron-packager...原创 2020-09-22 12:24:54 · 526 阅读 · 0 评论 -
第24课:贪吃蛇游戏
本节课将利用全局快捷键实现一款贪吃蛇的游戏,下面先看下游戏主界面的截图。Mac OS X 的效果如图所示。Windows 的效果如图所示。全局快捷键需要通过 globalShortcut 对象注册,使用下面的代码可以得到 globalShortcut 对象。const {globalShortcut} = require('electron');接下来使用 globalShortc...原创 2020-09-22 12:24:52 · 473 阅读 · 0 评论 -
第25课:MySQL 数据库管理系统
25.1 项目概述本课将结合多种技术实现一款支持以太防网络的 MySQL 数据库管理系统,可以管理本机或远程的 MySQL 数据库。本系统涉及到的技术(包括两类技术)如下所示。(1)JavaScript 语言、Web、Node.js、Electron、MySQLElectron 允许使用 JavaScript、HTML 和 CSS 开发桌面应用的框架,运行依赖于 Node.js,这也是为什...原创 2020-09-22 12:24:51 · 615 阅读 · 0 评论 -
第26课:基于以太坊的云笔记
项目概述在本课中将会结合多种技术实现一款支持以太防网络的云笔记,主要功能是在本地编写富文本格式的笔记,然后可以将云笔记保存到本地(SQLite 数据库),并可以同步到服务端(MySQL)数据库,同时,在服务端会启动一个扫描程序,将新提交的数据同步到以太坊网络上,也就是说,这款云笔记可以将数据同时同步到服务端的 MySQL 数据库和云笔记中,并且在云笔记客户端还可以选择从以太坊恢复云笔记。本系统...原创 2020-09-22 12:24:49 · 534 阅读 · 0 评论 -
附录:如何升级 Electron 版本
在 2019 年 1 月 5 日,Electron 最新的 4.0.1 版发布了,尽管在写作本系列课程内容时,Electron 4.0 稳定版还没有发布,不过经过测试,本课程中的例子在 Electron 4.0 中仍然可以正常使用。Electron 4.0 及以上版本只是修正了一些 bug,同时还加了一些功能(主要增加了事件、一些方法),大的功能并没有增加什么。如果希望升级到 Electron...原创 2020-09-22 12:24:48 · 1464 阅读 · 0 评论 -
第27课:Node.js 模块详解
概述本课主要讲解如何用 C++ 开发 Node.js 和 Electron 本地模块,其中涉及到 3 种技术:Node.js、Electron 和 C++ 语言。Electron 是基于 Node.js 的,允许用 Web 技术(HTML5、JavaScript 和 CSS3)开发桌面应用,也就是说,Node.js 将 JavaScript 从前端转移到了后端,而 Electron 又让 Jav...原创 2020-09-22 12:24:47 · 461 阅读 · 0 评论 -
第28课:用 C++ 开发 Node.js 和 Electron 本地模块
开发前的准备工作在开发本地模块之前,需要先安装必要的软件,如编译器、各种工具等。编译器Windows:Visual Studio 2017Mac OS X:Clang,安装 XCode 就可以node-gyp 是 Node.js 下的 C++ 扩展构建工具,用 Python 编写(必须是 Python 2.7,建议安装 anaconda 环境),是基于 GYP 来进行工作的(Gene...原创 2020-09-22 12:24:45 · 752 阅读 · 0 评论