Electron的教學。
1. 首先安裝軟體：
到官方網站下載Node.js並安裝，
現在的Node.js安裝版已經內建了npm套件管理工具。
https://nodejs.org/en/download/ (node-vx.x.x-x64.msi)
執行『cmd』打開命令提示字元，
輸入NPM語法安裝以下軟體。
安裝electron-prebuilt：
npm install electron-prebuilt --save-dev
npm install electron-prebuilt -g
安裝electron-packager：
npm install electron-packager --save-dev
npm install electron-packager -g
安裝asar：
npm install -g asar
2. 準備好程式與配置檔：
視窗主程式(index.js)
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
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();
}
})
網頁主程式(index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
配置文件檔(package.json)
{
"name": "hello",
"version": "0.0.1",
"description": "hello",
"main": "index.js",
"scripts": {
"start": "electron .",
"build": "electron-packager . hello --ignore=node_modules/electron-* --platform=win32 --arch=x64 --version=1.0.2",
"package": "asar pack hello-win32-x64/resources/app hello-win32-x64/resources/app.asar && rm -rf hello-win32-x64/resources/app"
}
}
hello專案目錄下的檔案：
index.html
index.js
package.json
3. 編譯成執行
執行『cmd』打開命令提示字元，進入hello目錄，執行下面語法：
cd hello
npm run build
npm run package
接著就會在目錄下生成一個『hello-win32-x64』目錄，
執行目錄下的『hello.exe』即可執行程式囉。
源自於
https://qqboxy.blogspot.com/2016/06/electron-javascript-windows.html
沒有留言:
張貼留言