electron 安装使用心酸入门随笔

日期： 2017-08-29 分类：跨站数据 400次阅读

1.配置好Node.js，全局安装
（可以参考菜鸟教程http://www.runoob.com/nodejs/nodejs-install-setup.html）；
验证下node.js版本 ;node -v
npm 版本； npm -v

2.下来就是全局安装electron

npm install electron-prebuilt -g

有些安装可能会很慢直接报错，或者卡在node install.js，
可以用淘宝镜像cnpm https://npm.taobao.org/mirrors/electron
手动下载安装包，放在C:\Users\QI.electron下，就是自己的home目录下，再重新全局安装；因为已经下载好了安装包，所以在执行electron-prebuilt时不需要在下载，出错的可能就小。

安装打包工具

npm install electron-packager -g

3.接下来就是项目，假如你的项目文件夹也叫app，现在你的项目里有你写好的index.html和main.js文件；

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.

</body>
</html>

main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow () {
    mainWindow = new BrowserWindow({width: 800, height: 600});
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, './index.html'),
        protocol: 'file:',
        slashes: true
    }));

    mainWindow.webContents.openDevTools();
    mainWindow.on('closed', function () {
        mainWindow = null
    })
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});
app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
});

然后初始化(cd到你的项目下),执行npm init
现在在你的项目文件夹app下就可以看到 package.json 文件；
在你项目下本地安装electron：

npm install electron-prebuilt --save-dev

本地安装打包工具

npm install electron-packager --save-dev

这时你的package.json是这样的

会多出来你本地装的electron的版本

现在可以在DOS里用. electron 试试你的应用；

DOS下打包：

electron-packager . app --win --out presenterTool --arch=x64

electron-packager . 可执行文件的文件名 –win –out 打包成的文件夹名 –arch=x64位还是32位 –version版本号 –overwrite –ignore=node_modules；上面忽略了版本号等等；

这下可以在..\app\presenterTool\app-win32-x64目录下打开你的.exe应用了。

除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog

标签：electron

上一篇： JS获取当前日期时间

下一篇： 2017JAVA面试题附答案

Young87

So happy to code my life!

electron 安装使用心酸入门随笔