本內(nèi)容包括
- 環(huán)境搭建
- 官方的HelloWorld
- 自己重頭寫一個HelloWorld
本內(nèi)容參考了
環(huán)境為Mac
環(huán)境搭建以及官方的HelloWorld
- 安裝node.js，直接官網(wǎng)NodeJS芒珠，下載最新版安裝即可
- 下載官方的demo
- git clone https://github.com/electron/electron-quick-start
- cd electron-quick-start
- 安裝cnpm(原因在于npm在下載electron依賴時實在是龜速桥狡，我試過無數(shù)次都失敗了)
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm install
- npm start
到了這一步，應(yīng)該已經(jīng)可以看到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-*",
},
此時已經(jīng)生成可執(zhí)行文件嫂易，但是源碼是暴露的，所以掐禁，腳本再修改一下
"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- 執(zhí)行命令
npm init, 一路點回車就可以了，然后可以看到生成了package.json文件 - 修改package.json文件穆桂，將script部分改為
"scripts": {
"start": "electron ."
},
增加DevDependencies部分
"devDependencies": {
"electron": "~1.6.2",
"electron-package": "^0.1.0"
}
- 新建index.html,內(nèi)容隨意宫盔，我們暫時寫成
<!DOCTYPE html>
<html>
<head>
<title>123</title>
</head>
<body>
Hello, ^.^
</body>
</html>
- 新建index.js融虽，內(nèi)容如下
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即可看到你的窗口了
