本内容包括
- 环境搭建
- 官方的HelloWorld
- 自己重头写一个HelloWorld
本内容参考了
环境为Mac
环境搭建以及官方的HelloWorld
- 安装node.js，直接官网NodeJS，下载最新版安装即可
- 下载官方的demo
- git clone https://github.com/electron/electron-quick-start
- cd electron-quick-start
- 安装cnpm(原因在于npm在下载electron依赖时实在是龟速，我试过无数次都失败了)
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm install
- npm start
到了这一步，应该已经可以看到demo在跑了
打包
在这件事之前，再安装几个依赖。
+ sudo npm install electron-packager --global
+ sudo npm install asar --global
修改package.json文件，在script部分添加成如下
"scripts": {
"start": "electron ."，
"build": "electron-packager . hello_electron --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
},
此时已经生成可执行文件，但是源码是暴露的，所以，脚本再修改一下
"scripts": {
"start": "electron ."，
"build": "electron-packager . hello_electron --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
"package":"asar pack hello_electron-darwin-x64/hello_electron.app/Contents/Resources/app hello_electron-darwin-x64/hello_electron.app/Contents/Resources/app.asar"
},
从头再来一次HelloWorld
- 定位到你的工程目录
- 新建文件夹
mkdir test cd test- 执行命令
npm init, 一路点回车就可以了，然后可以看到生成了package.json文件 - 修改package.json文件，将script部分改为
"scripts": {
"start": "electron ."
},
增加DevDependencies部分
"devDependencies": {
"electron": "~1.6.2",
"electron-package": "^0.1.0"
}
- 新建index.html,内容随意，我们暂时写成
<!DOCTYPE html>
<html>
<head>
<title>123</title>
</head>
<body>
Hello, ^.^
</body>
</html>
- 新建index.js，内容如下
var electron = require('electron')
var app = electron.app
var mainWindow
app.on('ready', function() {
mainWindow = new electron.BrowserWindow({
width: 400,
height:200
})
mainWindow.loadURL('file://' + __dirname + '/index.html')
})
- npm install
- npm start即可看到你的窗口了
网友评论