写在前面:本人技术一般,此文章为本人边学边写而成,难免出现差错与技术方面不完美的情况,仅供参考。如有错误,欢迎指正。
能翻墙就尽量翻墙,国内网络你懂的
本文以Windows开发平台为基础写的,MAC用户仅供参考
(electron中文API下载)
1.首先安装node
安装完成以后在cmd里运行 node -v
检测安装是否成功。
2.安装Electron
使用npm 安装 Electron:
npm install --g electron-prebuilt
安装完成后运行 electron -v
检查是否安装成功
3.一个简单的Electron程序
首先,切换到应用开发根目录,我的在D:\LvAllCode\electron\MC
然后创建Electron简单文件结构
在根目录下使用npm init
命令创建package.json
文件,根据提示填写就行,
执行一次npm install --save-dev electron-prebuilt
最后差不多是这个样子
{
"name": "mclans",
"version": "1.0.0",
"description": "mc_login_app",
"main": "app/main.js",
"dependencies": {
"electron-prebuilt": "^0.37.3"
},
"devDependencies": {
"electron-prebuilt": "^0.37.3"
},
"scripts": {
"test": "hello",
"start": "electron ."
},
"author": "yupeglv",
"license": "ISC"
}
然后在根目录下创建app
文件夹,在app/
下创建main.js,内容如下:
// 应用控制模块
var app = require("app")
// 创建窗口模块
var BrowserWindow = require('browser-window'),
// 主窗口
var mainWindow = null;
// 初始化并准备创建主窗口
app.on('ready', function () {
// 创建一个宽800px 高700px的窗口
mainWindow = new BrowserWindow({
width: 800,
height: 700,
});
// 载入应用的inde.html
mainWindow.loadUrl('file://' + __dirname + '/html/index.html');
// 打开开发工具界面
mainWindow.openDevTools();
// 窗口关闭时触发
mainWindow.on('closed', function(){
// 想要取消窗口对象的引用, 如果你的应用支持多窗口,你需要将所有的窗口对象存储到一个数组中,然后在这里删除想对应的元素
mainWindow = null
});
});
然后在app/html
下创建index.html文件,内容如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>我的世界</title>
</head>
<body>
<span style="color:#fff;">Hello World</span>
</body>
</html>
最后,项目整体文件目录大概是这个样子的:
4.启动你的项目
在根目录下,命令行输入 npm start
(需要在package.json
中配置
"scripts": {"start": "electron ."}
)或者输入 electron .
(注意有个点,并且electron装的是全局的)
5.配置VS Code开发环境
先装全局glup
:npm install gulp -g
再装本地:npm install --save-dev gulp
至于为啥看这
根目录下创建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
任务:gulp run
又看到了熟悉的界面了!!
在VS Code里打开你的工程:
摁下快捷键ctrl+shift+b
,第一次启动的时候会提示你配置task
文件,点击Configure Task Runner
之后VS Code会自动在./.vscode
目录下创建一个tasks.json
配置文件,我们来编辑一下这个文件:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [ {
"taskName": "run",
"args": [],
"isBuildCommand": true
}]
}
保存,之后再摁下ctrl+shift+b
就可以直接运行我们的程序了。
6.使用VS Code调试
(此部分仅供参考,因为我自己没跑成功o(>﹏<)o,如有知道为什么的还请大神告知)
点击DEBUG
界面的设置按钮
VS Code自动在./.vscode
目录下创建了launch.json
我们不需要启动 main.js
的配置 所以移除它,现在launch.json
应该如下所示:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
更改之前创建的 gulpfile.js
文件
gulp.task('run', function () {
childProcess.spawn(electron, ['--debug=5858','.'], {stdio:'inherit'});
});
在调试面板中选择Attach
然后点击RUN
按钮即可开始调试。
至此我们的第一个Electron程序就开发完成了,下一节我们看如何打包成执行程序