Angular+Electron+VSCode的桌面应用开发入门笔记(1)
第一部分 Electron开发入门笔记
本文学习的主要知识来自 【译】使用 AngularJS 和 Electron 构建桌面应用 http://www.52php.cn/article/p-xxsvevfz-b.html 一、基础环境的搭建为了安装相应的开发环境和运行库,首先需要安装以下两个东西: 本文学习测试的环境为Windows 10。 (一)Nodejs和npm包管理器安装到NodeJs官方网站http://www.nodejs.org,下载相应平台的安装包,我在下windows x64平台的安装包,并按提示安装完毕。NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 通过输入”node -v” 和”npm -v” 来测试是否成功安装。命令如下,出现版本提示表示安装成功: (二)Web开发包管理器Bower的安装按照Bower官方网站的描述: 来自 http://bower.io Bower能够为我们安装和管理Web开发所需要的框架、库、资源和实用工具。Bower的安装方法:
来自 http://bower.io (三)编辑器Visual Studio Code(以下简称:VSCode) 的安装通过https://www.visualstudio.com/下载for Windows版Visual Studio Code。并按提示安装完毕。 二、创建一个Electron应用创建一个Electron应用的所有步骤:
(一)创建项目文件夹创建一个项目文件夹,例如:AE_Sample,并在其下创建一个app目录,app目录主要用于存放你编写的代码,将代码和运行调试相关的环境和第三方包区分开来,便于项目的维护。 需要注意以下两个问题: (二)创建并初始化package.json文件package.json文件是基于NodeJS项目开发和npm包管理的一个配置文件,该配置文件包含了:开发环境的依赖、构建脚本、程序清单、项目入口、项目信息等信息。npm包的安装需要该文件,基于NodeJS的项目同样也需要该文件来运行项目。 可以通过两种方式创建package.json文件: 1. 通过VSCode直接创建并编辑package.json文件。该文件常规至少应该配置以下内容(特别是name和version项是必须的): {
name: "xxxx",//项目名称(名称不能包含大写字母) version: "x.x.x",//项目版本 main: "xxxx.js" //项目入口脚本 }
想了解更多请参考《package.json for NPM 文件详解》。 2. 通过npm init来引导你创建一个package.json文件。通常我们在创建一个NPM程序时,可以使用npm init命令,通过交互式的命令,自动生成一个package.json文件,里面包含了常用的一些字段信息,但远不止这么简单。通过完善package.json文件,我们可以让npm命令更好地为我们服务。 在CMD中运行npm init命令后,它会项提示你输入相应的配置信息,如果你不想输入,可以直接按Enter回车,它会自动采用默认值,默认值在某些项后面的括弧中有提示,可以供你参考,但是如果你的项目文件夹如果采用了大写字符,直接按回车也会出错,提示错误为:Sorry,name can no longer contain capital letters.,因为name项的默认值是你的项目文件夹名称,而name不允许包含大写字母,所以会出现此错误。可以采用下划线“_”来分割名称。
如果该项目不授权给其他人使用,可以在license项输入:UNLICENSED,如果不输入,系统将默认采用 ISC 许可。Package.json的其他配置内容也可以参考官方说明文件。输入完成后,直接按Enter回车,就可以创建package.json文件,生成的文件内容如下: {
"name": "ae_sample","version": "1.0.0","description": "","main": "./app/main.js","scripts": { "test": "echo "Error: no test specified" && exit 1" },"author": "","license": "UNLICENSED" }
3、安装Electron依赖环境Cmd进入项目文件下,运行命令:
安装项目所需的Electron环境,安装完毕后,package.json文件会自动最追依赖选项的配置参数。 以下摘自《加快npm的下载速度》
安装过程出现的 npm WARN package.json 提示,不必管它,这些提示说的是 package.json 文件缺少一些配置项,但这些配置项并不影响你安装Electron环境。 安装完成后,项目文件夹中多了一个 node_modules 文件夹,我的电脑已经在全局或其他项目中安装过Electron,所以安装过程中并没有出现下载过程,这也说明,如果你的电脑已经在全局或其他项目中安装过Electron,将不再需要下载。如果需要更新已安装的包可以使用以下命令:
注意:这里有一个问题,node_modules 文件夹里面的目录层级很深,所以想要删除、复制和移动这个目录,windows 会直接提示无法执行这些操作,因为node_modules 目录内文件的绝对路径名长度超过了 windows 系统规定的长度。一个比较好的办法是,利用WinRAR 软件,压缩该目录时,勾选“压缩后删除原来的文件(D)”选项可以解决这一问题。如果是复制或移动node_modules 目录的话也可以采用这个方法。 好了,基本环境就安装完毕了!!!接下来我们开始创建一个Hello World!的应用程序 4、首先创建一个入口程序 main.js进入 VSCode 环境,在项目的app目录下创建一个 main.js 文件。 代码参考:Github上atom/electron项目的electron/docs/tutorial/quick-start.md 文件 // ./app/main.js
//采用javascript严格模式
'use strict';
// 应用的控制模块
const electron = require('electron');
const app = electron.app;
// 创建原生浏览器窗口的模块
const BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
// 当所有窗口都关闭的时候退出应用
app.on('window-all-closed',function () {
if (process.platform != 'darwin') {
app.quit();
}
});
// 当 Electron 结束的时候,这个方法将会生效
// 初始化并准备创建浏览器窗口
app.on('ready',function () {
// 创建浏览器窗口.
mainWindow = new BrowserWindow({ width: 800,height: 600 });
// 载入应用的 index.html
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// 打开开发工具
// mainWindow.openDevTools();
// 窗口关闭时触发
mainWindow.on('closed',function () {
// 想要取消窗口对象的引用,如果你的应用支持多窗口,
// 通常你需要将所有的窗口对象存储到一个数组中,
// 在这个时候你应该删除相应的元素
mainWindow = null;
});
});
5、接下来我们创建一个HTML页面,所谓应用的第一个窗体。VSCode 中,在项目 app 目录下创建一个 index.html 文件。为什么文件名是index.html ,因为在前面的 main.js 中定义的载入应用页面就是这个名字。index.html 的具体代码如下: <html>
<title>My First Electron App</title>
<body>
<h1>Hello World!</h1>
<h1>你好,世界!</h1>
</body>
</html>
6、运行这个应用怎么运行呢,总共有三种方法: (1)如果全局安装了 Electron,可以在项目根目录下运行:
注意:后面输入空格之后有个“.”,代表当前目录,electron 会根据前面配置的 package.json 文件自动找到程序入口并运行。记住 electron 后面必须是目录名。
虽然你全局安装了 electron,但是建议项目目录中仍然也安装**electron环境。 (2)如果你没有全局安装electron-prebuilt,那么你可以通过如下方法来运行应用:
或
注意:后面有“.”。 (3)可以使用 gulp 工具来运行应用。 为了使用 gulp ,你必须安装它,安装命令如下:
安装过程截图如下: 安装 gulp 完毕后,就可以通过创建 gulpfile.js 文件来创建一个 gulp task ,并且将任务和 Visual Studio Code 编辑器相结合,利用 Visual Studio Code 的快捷键 Ctrl + Shift + b 来运行应用了。 gulpfile.js文件代码如下: // 获取依赖
var gulp = require('gulp'),childProcess = require('child_process'),electron = require('electron-prebuilt');
// 创建 gulp 任务
gulp.task('run',function () {
childProcess.spawn(electron,['.'],{ stdio: 'inherit' });
});
现在我们可以在项目根目录下输入: 此结果出现中文乱码,可以在index.html中加入一行解决这个问题: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
完整代码如下: <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My First Electron App</title>
<body>
<h1>Hello World!</h1>
<h1>你好,世界!</h1>
</body>
</html>
再次运行 gulp run 命令,结果如下:
7、整合VSCode,利用VSCode快捷键执行项目操作。先来检验一下,在上一节 gulp 的配置,是否 VSCode 的 task 能够识别到gulpfile.js 中定义的 run 任务。 VSCode环境中,按下 F1 或 Ctrl+Shift+p 键,可调出VSCode 的命令输入框,这个框内有一个 “>” 提示符,在其后可以输入命令,在这里我们输入run,并在下拉结果列表中找到 Tasks:Run Task 命令点击执行,随后,出现 task 提示,VSCode 开始搜索可执行的 task 任务。
由于前面在 gulpfile.js 中定义了一个名为 “run” 的任务,片刻之后,找到了run,点击 run 即可运行项目,该方法与前面描述的所有项目启动方法等效。
接下来,开始配置项目,让其支持通过 VSCode 环境的 Ctrl+Shift+b 快捷键运行项目。 再次按下 F1 或 Ctrl+Shift+p 键,在命令框中输入 task,并选择Tasks:Configure Task Runner,VSCode 会自动为你建立一个 .vscode 的目录,并自动在其下创建一个 tasks.json 文件。这个文件已经自动完成了一些项目的配置工作,你可按照项目需要修改配置文件。下面是VSCode 自动为你生成 task.json 文件内容: {
"version": "0.1.0","command": "gulp","isShellCommand": true,"args": [ "--no-color" ],"tasks": [ ] }
然后,按需修改为如下代码: {
"version": "0.1.0","tasks": [ { "taskName": "run","args": [ ],"isBuildCommand": true } ] }
保存文件,现在按下 Ctrl+Shift+b 就可以在 VSCode 中直接运行项目了,而不需要你在到CMD 窗口中输入命令了。 8、配置调试环境点击 VSCode 左边的 Debug(Ctrl+Shift+D) 图形按钮,打开调试界面,再点击上当齿轮配置按钮,
并选择 Node.js 调试器,
系统会自动为你在 .vscode 目录下生成一个名为 launch.json 的文件。文件代码如下: {
"version": "0.2.0","configurations": [ { "name": "Launch","type": "node","request": "launch","program": "${workspaceRoot}appmain.js","stopOnEntry": false,"cwd": "${workspaceRoot}","preLaunchTask": null,"runtimeExecutable": null,"runtimeArgs": [ "--nolazy" ],"env": { "NODE_ENV": "development" },"externalConsole": false,"sourceMaps": false,"outDir": null },{ "name": "Attach","request": "attach","port": 5858,"address": "localhost","restart": false,"outDir": null,"localRoot": "${workspaceRoot}","remoteRoot": null } ] }
配置文件定义了两种调试模式:Launch模式和Attach模式。 (1)Launch 模式,顾名思义,直接运行调试模式。 "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe"
修改后的配置文件内容如下: {
"version": "0.2.0","runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe","remoteRoot": null } ] }
然后,在配置下拉列表框中选择“Launch”模式,并点击 Start 按钮或按 F5 即可以调试模式运行项目。 (2)Attach模式 配置文件中,自动生成的 Attach 模式配置信息已经完备,本学习项目无需修改。Attach 模式的工作原理大致是这样的,首先让Node.js 或 Electron 以调试模式运行应用开启端口监听,然后 VSCode 启动Attach 模式,通过端口实现调试信息的交互。因此,我们需要进一步修改前面创建的 gulpfile.js 项目执行配置文件,将electron 的启动模式修改为调试模式,修改后的内容如下: // 获取依赖
var gulp = require('gulp'),childProcess = require('child_process'),electron = require('electron-prebuilt');
// 创建 gulp 任务
gulp.task('run',['--debug-brk=5858','.'],{ stdio: 'inherit' });
});
参数:–debug-brk=5858 以调试模式运行 Electron 应用,并使启动时暂定在项目程序代码的第一行,其调试监听的端口号为5858。如果你的断点没有设置在程序启动阶段的代码上,你可以使用参数:–debug=5858。 注意: 配置完成后,采用如下步骤和方法开启 Attach 模式,进行程序调试: 1)在配置下拉列表框中选择好“Attch”模式; 现在,我们来设置两个断点,一个在应用启动阶段,一个在应用关闭阶段。
分别以 Launch 和 Attch 两种模式运行调试,你会发现 Launch 模式两个断点均可捕获到, 三、通过Git对项目进行版本控制Git 是目前比较流行的分布式版本控制工具,你可以自行搭建Git 服务器,也可以使用互联网上提供的各种 Git 托管服务,
下面以 CSDN 的代码管理平台为例,每一个代码平台都有使用说明文档,下面参考阿里云Code,感觉比CSDN的要写的好一些。 1、在CSDN CODE上新建项目。注册CSDN账号,登录 https://code.csdn.net/ 新建项目 2、安装 Git。如果 Git 下载没有自动开始,您还可以在网站上手动下载。然后按照安装窗口中的指示进行。完成安装之后,打开一个新的 shell,然后再次运行 “git –version” 来验证安装是否正确。选择适用于您操作系统的shell:
3、生成SSH KeysSSH key 可以让你在你的电脑和Code服务器之间建立安全的加密连接。
如果你看到一长串以 ssh-rsa或 ssh-dsa开头的字符串,你可以跳过 ssh-keygen的步骤。 你可以按如下命令来生成ssh key:
这个指令会要求你提供一个位置和文件名去存放键值对和密码,你可以点击Enter键去使用默认值。
复制这个公钥放到你的个人设置中的SSH/My SSH Keys下,请完整拷贝从ssh-开始直到你的用户名和主机名为止的内容。 Windows:
Mac:
GNU/Linux (requires xclip):
4、在CSDN Code上添加你的公钥登录CSDN后,点击右上方“我的CODE”右侧的齿轮配置图标,进入“账户设置”页面,并点击添加公钥按钮, 5、添加Git用户名并设置邮箱您创建的每次Git提交都会使用该信息,所以很重要。
由于使用了“–global”选项,所以您只需要做一次这样的配置。Git会在您系统的任何项目中使用这个信息。 检查您的信息
6、Git的 .gitignore配置.gitignore 配置文件用于配置不需要加入版本管理的文件,配置好该文件可以为我们的版本管理带来很大的便利。
该配置文件语法:
7、上传项目在 shell 中(Windows下打开Git Bash),使用如下命令初始化本地 git,并将项目push 到 CODE 平台
Git SSH 地址 git@code.csdn.Net:xxx/xxx.git,在CSDN CODE的项目页面可以复制。
注意:我上面的操作中就因为直接复制粘贴git commit -m “first commit”语句出现过一次错误。第二次采用手动输入。 在后续的开发过程中,可以不再使用 Git Bash 方式提交代码,可以采用VSCode集成的Git界面进行操作。 点击Git按钮,打开Git界面,在Message框中输入提交说明信息,然后按下Ctrl + Enter 键或点击上方勾 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |