目的:Electron 入門_創(chuàng)建的桌面可執(zhí)行程序
環(huán)境:Windows 10
步驟:
1. 下載官方demo及安裝環(huán)境十减。
git clone https://github.com/electron/electron-quick-start,或者直接瀏覽器下載該鏈接。
2. CMD打開控制臺舰涌,進(jìn)入到下載的electron-quick-start-master文件夾目錄礁扮。
運(yùn)行cmd: npm install && npm start
運(yùn)行cmd: npm start
效果如下圖
3.electron結(jié)構(gòu)
--index.html ? ? ? ? ? ?//html
--main.js ? ? ? ? ? ? ? ?//窗口配置(高度,寬度补履,入口頁面等)添坊。
--package.json ? ?//項(xiàng)目名稱,版本信息等箫锤。
4. 打包成windows可執(zhí)行exe贬蛙。
1. 安裝打包主要使用的electron-packager, electron-prebuilt.
? 執(zhí)行cmd: npm install electron-prebuilt -g
? 執(zhí)行cmd: npm install electron-packager -g
2. 打包(需要準(zhǔn)備一張ico圖標(biāo)文件,示例放在./images/test.ico)
執(zhí)行cmd: electron-packager ./ --platform=win32 --arch=x64 --version=0.37.2 --icon=./images/test.ico
執(zhí)行完谚攒,在當(dāng)前目錄會生成一個(gè)如下圖所示的文件夾electron-quick-start-win32-x64
阳准,點(diǎn)擊里面的exe就可以執(zhí)行了。
5. 注意事項(xiàng)馏臭。
1. electron主要是提供給web前端工程師用html野蝇,css, javascript等來開發(fā)pc應(yīng)用。不過生成的應(yīng)用大小有些大。
2. linux及macOS請直接參考electron-packager指令打包绕沈。
linux: 執(zhí)行cmd: electron-packager ./ --platform=linux --arch=x64 --version=0.37.2 --icon=./images/test.ico
macOS: 執(zhí)行cmd: electron-packager ./ --platform=mas --arch=x64 --version=0.37.2 --icon=./images/test.ico
效果如下圖: