第一部分 Electron开发入门笔记

GitHub 的 Electron 框架（以前叫做 Atom Shell）允许你使用 HTML,CSS 和 JavaScript 编写跨平台的桌面应用。它是 io.js 运行时的衍生，专注于桌面应用而不是 web 服务端。Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容。

本文学习的主要知识来自【译】使用 AngularJS 和 Electron 构建桌面应用 http://www.jb51.cc/article/p-xxsvevfz-b.html

一、基础环境的搭建

为了安装相应的开发环境和运行库，首先需要安装以下两个东西：
1、安装Nodejs和npm包管理器
2、安装Bower（Web开发包管理器）
3、代码编辑器（Visual Studio Code）

本文学习测试的环境为Windows 10。

（一）Nodejs和npm包管理器安装

到NodeJs官方网站http://www.nodejs.org，下载相应平台的安装包，我在下windows x64平台的安装包，并按提示安装完毕。NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。

通过输入”node -v” 和”npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

（二）Web开发包管理器Bower的安装

按照Bower官方网站的描述：
Web sites are made of lots of things — frameworks,libraries,assets,and utilities. Bower manages all these things for you.

来自 http://bower.io

Bower能够为我们安装和管理Web开发所需要的框架、库、资源和实用工具。Bower的安装方法：
利用npm来全局安装bower，npm的全局安装参数为 “-g”；

$ npm install -g bower

来自 http://bower.io

（三）编辑器Visual Studio Code（以下简称：VSCode）的安装

通过https://www.visualstudio.com/下载for Windows版Visual Studio Code。并按提示安装完毕。

二、创建一个Electron应用

创建一个Electron应用的所有步骤：

创建一个项目文件夹；
在CMD命令行窗口中，进入该项目文件夹，通过npm init命令创建Electron应用所需的package.json文件；
在项目文件夹下，通过npm install –save-dev electron-prebuilt命令安装项目所需的Electron环境；
在VSCode中创建启动 JS 脚本文件；
在VSCode中创建一个入口HTML页面；
运行该项目，查看效果；
将项目的运行命令与VSCode编辑器整合。
配置调试环境

（一）创建项目文件夹

创建一个项目文件夹，例如：AE_Sample，并在其下创建一个app目录，app目录主要用于存放你编写的代码，将代码和运行调试相关的环境和第三方包区分开来，便于项目的维护。

需要注意以下两个问题：
1. 尽量不要使用中文目录。由于许多国外软件对中文的支持问题，使用中文经常会导致意想不到的问题；
2. 尽量不要在Windows系统保护的目录中（例如：windows、program files文件夹等）创建项目文件夹，避免因windows用户权限问题带来程序异常。

@L_403_15@（二）创建并初始化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进入项目文件下，运行命令：

npm install –save-dev electron-prebuilt

安装项目所需的Electron环境，安装完毕后，package.json文件会自动最追依赖选项的配置参数。
这里注意一下：npm install下载有时很困难，经常在下载环节卡住，无法完成包安装进程，因此建议采用以下方法加快npm的下载速度：

以下摘自《加快npm的下载速度》

首先，我们的npm包无所谓安全性，所以不要使用性能和效率更慢的https，转而使用http，相关命令如下：

(1)、关闭npm的https

npm config set strict-ssl false

(2)、设置npm的获取地址

npm config set registry “http://registry.npmjs.org/”

一般这样运气的好的话，速度就会快许多，可能会安装成功。如果你还脸黑，这样设置还是一直卡住无法下载依赖，那就只能使用proxy代理方式来解决了，命令如下：

(3)、设置npm获取的代理服务器地址：

npm config set proxy=http://代理服务器ip:代理服务器端口

清除npm的代理命令如下：

**npm config delete http-proxy
npm config delete https-proxy **

也可以单独为这次npm下载定义代理

npm install -g pomelo –proxy http://代理服务器ip:代理服务器端口

安装过程出现的 npm WARN package.json 提示，不必管它，这些提示说的是 package.json 文件缺少一些配置项，但这些配置项并不影响你安装Electron环境。

安装完成后，项目文件夹中多了一个 node_modules 文件夹，我的电脑已经在全局或其他项目中安装过Electron，所以安装过程中并没有出现下载过程，这也说明，如果你的电脑已经在全局或其他项目中安装过Electron，将不再需要下载。如果需要更新已安装的包可以使用以下命令：

npm update electron-prebuilt

注意：这里有一个问题，node_modules 文件夹里面的目录层级很深，所以想要删除、复制和移动这个目录，windows 会直接提示无法执行这些操作，因为node_modules 目录内文件的绝对路径名长度超过了 windows 系统规定的长度。一个比较好的办法是，利用WinRAR 软件，压缩该目录时，勾选“压缩后删除原来的文件(D)”选项可以解决这一问题。如果是复制或移动node_modules 目录的话也可以采用这个方法。

好了，基本环境就安装完毕了！！！

接下来我们开始创建一个Hello World！的应用程序

4、首先创建一个入口程序 main.js

进入 VSCode 环境，在项目的app目录下创建一个 main.js 文件。
main.js 是应用的入口。它负责创建主窗口和处理系统事件。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 .

注意：后面输入空格之后有个“.”，代表当前目录，electron 会根据前面配置的 package.json 文件自动找到程序入口并运行。记住 electron 后面必须是目录名。
全局安装命令如下：

npm install -g electron-prebuilt

虽然你全局安装了 electron，但是建议项目目录中仍然也安装**electron环境。

（2）如果你没有全局安装electron-prebuilt，那么你可以通过如下方法来运行应用：

“node_modules/.bin/electron” .

或

“node_modules/.bin/electron” “.”

注意：后面有“.”。

（3）可以使用 gulp 工具来运行应用。

为了使用 gulp ，你必须安装它，安装命令如下：
以下摘自《前端构建工具gulpjs的使用介绍及技巧》

首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

npm install -g gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp

如果想在安装的时候把 gulp 写进项目 package.json 文件的依赖中，则可以加上–save-dev：

npm install –save-dev gulp

这样就完成了 gulp 的安装。至于为什么在全局安装 gulp 后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow 上有人做出的回答：why-do-we-need-to-install-gulp-globally-and-locally、what-is-the-point-of-double-install-in-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' }); 
});

现在我们可以在项目根目录下输入：
gulp run
来运行应用。运行结果如下：

此结果出现中文乱码，可以在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}\\app\\main.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 模式，顾名思义，直接运行调试模式。
这种模式下，系统自动生成的配置文件不完整，需要你进一步完善以后，才能以调试模式运行程序。即，将Launch配置中的runtimeExecutable指定实际的运行环境绝对路径。

"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。

注意：
- 请务必保证 gulpfile.js 中使用的端口号与 launch.json 文件中 Attach 配置的端口号一致，
这里我采用了 5858 端口。
- –debug-brk 暂停的第一行代码一般不是你编写的程序，多半是环境和第三方包的代码。

配置完成后，采用如下步骤和方法开启 Attach 模式，进行程序调试：

1）在配置下拉列表框中选择好“Attch”模式；
2）按下 Ctrl+Shift+b，以调试监听模式运行应用；
3）点击 Start 按钮或按 F5 即可以调试模式运行项目；

现在，我们来设置两个断点，一个在应用启动阶段，一个在应用关闭阶段。

分别以 Launch 和 Attch 两种模式运行调试，你会发现 Launch 模式两个断点均可捕获到，
而 Attch 模式只能捕获到第二断点（应用关闭断点）。

三、通过Git对项目进行版本控制

Git 是目前比较流行的分布式版本控制工具，你可以自行搭建Git 服务器，也可以使用互联网上提供的各种 Git 托管服务，
有的 Git 托管服务只对开源项目免费，有的则可以对开源和闭源项目都免费，例如：

开源中国 https://git.oschina.net/
CSDN https://code.csdn.net/
阿里云Code https://code.aliyun.com/ （提供持续交互平台）

下面以 CSDN 的代码管理平台为例，每一个代码平台都有使用说明文档，下面参考阿里云Code，感觉比CSDN的要写的好一些。

1、在CSDN CODE上新建项目。

注册CSDN账号，登录 https://code.csdn.net/ 新建项目
新建时，记住要把默认勾选的使用README.md文件初始化选项去掉，因为你是上传已有项目。

2、安装 Git。

如果 Git 下载没有自动开始，您还可以在网站上手动下载。然后按照安装窗口中的指示进行。完成安装之后，打开一个新的 shell，然后再次运行 “git –version” 来验证安装是否正确。选择适用于您操作系统的shell：

Mac OSX的Terminal
Windows上的GitBash
Linux上的Linux Terminal

3、生成SSH Keys

SSH key 可以让你在你的电脑和Code服务器之间建立安全的加密连接。
在您的shell中（Windows下打开Git Bash），先执行以下语句来判断是否已经存在本地公钥：

cat ~/.ssh/id_rsa.pub

如果你看到一长串以 ssh-rsa或 ssh-dsa开头的字符串,你可以跳过 ssh-keygen的步骤。
提示: 最好的情况是一个密码对应一个ssh key，但是那不是必须的。你完全可以跳过创建密码这个步骤。
请记住设置的密码并不能被修改或获取。

你可以按如下命令来生成ssh key：

ssh-keygen -t rsa -C “你的Email地址”

这个指令会要求你提供一个位置和文件名去存放键值对和密码，你可以点击Enter键去使用默认值。
用以下命令获取你生成的公钥：

cat ~/.ssh/id_rsa.pub

复制这个公钥放到你的个人设置中的SSH/My SSH Keys下，请完整拷贝从ssh-开始直到你的用户名和主机名为止的内容。
如果打算拷贝你的公钥到你的粘贴板下，请参考你的操作系统使用以下的命令：

Windows:

clip < ~/.ssh/id_rsa.pub

Mac:

pbcopy < ~/.ssh/id_rsa.pub

GNU/Linux (requires xclip):

xclip -sel clip < ~/.ssh/id_rsa.pub

4、在CSDN Code上添加你的公钥

登录CSDN后，点击右上方“我的CODE”右侧的齿轮配置图标，进入“账户设置”页面，并点击添加公钥按钮，
输入名称和上一节复制到剪贴板的公钥，点击“保存”，即可完成公钥添加操作。

5、添加Git用户名并设置邮箱

您创建的每次Git提交都会使用该信息，所以很重要。
在您的shell中（Windows下打开Git Bash），运行如下命令来添加用户名：

git config –global user.name 您的名字
然后验证该配置是否正确：
git config –global user.name
使用如下命令设置邮箱地址：
git config –global user.email 您的邮箱地址
使用如下命令验证邮箱设置是否正确：
git config –global user.email

由于使用了“–global”选项，所以您只需要做一次这样的配置。Git会在您系统的任何项目中使用这个信息。
如果您希望在某个特定的项目中使用不同的用户名和邮箱地址，可以在那个项目中重新运行该命令，但不加“–global”选项。

检查您的信息
使用如下命令来验证前面做的那些配置：

git config –global –list

6、Git的 .gitignore配置

.gitignore 配置文件用于配置不需要加入版本管理的文件，配置好该文件可以为我们的版本管理带来很大的便利。
VSCode 中，在项目根目录下，添加一个名为 “.gitignore” 的文件（当然，也可以
在 Git Bash 中使用 vim .gitignore 命令直接编辑添加 .gitignore 文件）。
并逐行你不希望加入版本控制的文件或文件夹输入：

/node_modules

该配置文件语法：

以斜杠“/”开头表示目录；
以星号“*”通配多个字符；
以问号“?”通配单个字符
以方括号“[]”包含单个字符的匹配列表；
以叹号“!”表示不忽略(跟踪)匹配到的文件或目录；

7、上传项目

在 shell 中（Windows下打开Git Bash），使用如下命令初始化本地 git，并将项目push 到 CODE 平台

cd <项目所在文件夹>
git init
git add .
git commit -m “first commit”
git remote add origin <项目url,如git@code.csdn.NET:xxx/xxx.git>
git push -u origin master

Git SSH 地址 git@code.csdn.Net:xxx/xxx.git，在CSDN CODE的项目页面可以复制。
如果你复制粘贴上面的命令执行失败，请手动输入以上命令，因为可能粘贴的内容可能有Git Bash无法识别的字符。

注意：我上面的操作中就因为直接复制粘贴git commit -m “first commit”语句出现过一次错误。第二次采用手动输入。

在后续的开发过程中，可以不再使用 Git Bash 方式提交代码，可以采用VSCode集成的Git界面进行操作。
例如，当我修改index.html文件后，在VSCode右侧的Git按钮上会显示有一个修改未提交。

点击Git按钮，打开Git界面，在Message框中输入提交说明信息，然后按下Ctrl + Enter 键或点击上方勾
按钮，提交修改。然后点上方的“…”菜单按钮，并点击“Push”完成上传操作。

Angular+Electron+VSCode的桌面应用开发入门笔记（1）

第一部分 Electron开发入门笔记

一、基础环境的搭建

（一）Nodejs和npm包管理器安装

（二）Web开发包管理器Bower的安装

（三）编辑器Visual Studio Code（以下简称：VSCode）的安装

二、创建一个Electron应用

（一）创建项目文件夹

@L_403_15@（二）创建并初始化package.json文件

1. 通过VSCode直接创建并编辑package.json文件。

2. 通过npm init来引导你创建一个package.json文件。

3、安装Electron依赖环境

好了，基本环境就安装完毕了！！！

4、首先创建一个入口程序 main.js

5、接下来我们创建一个HTML页面，所谓应用的第一个窗体。

6、运行这个应用

7、整合VSCode，利用VSCode快捷键执行项目操作。

8、配置调试环境

三、通过Git对项目进行版本控制

1、在CSDN CODE上新建项目。

2、安装 Git。

3、生成SSH Keys

4、在CSDN Code上添加你的公钥

5、添加Git用户名并设置邮箱

6、Git的 .gitignore配置

7、上传项目

猜你在找的Angularjs相关文章

Angular+Electron+VSCode的桌面应用开发入门笔记（1）

第一部分 Electron开发入门笔记

一、基础环境的搭建

（一）Nodejs和npm包管理器安装

（二）Web开发包管理器Bower的安装

（三）编辑器Visual Studio Code（以下简称：VSCode） 的安装

二、创建一个Electron应用

（一）创建项目文件夹

@L_403_15@（二）创建并初始化package.json文件

1. 通过VSCode直接创建并编辑package.json文件。

2. 通过npm init来引导你创建一个package.json文件。

3、安装Electron依赖环境

好了，基本环境就安装完毕了！！！

4、首先创建一个入口程序 main.js

5、接下来我们创建一个HTML页面，所谓应用的第一个窗体。

6、运行这个应用

7、整合VSCode，利用VSCode快捷键执行项目操作。

8、配置调试环境

三、通过Git对项目进行版本控制

1、在CSDN CODE上新建项目。

2、安装 Git。

3、生成SSH Keys

4、在CSDN Code上添加你的公钥

5、添加Git用户名并设置邮箱

6、Git的 .gitignore配置

7、上传项目

猜你在找的Angularjs相关文章

（三）编辑器Visual Studio Code（以下简称：VSCode）的安装