electronjs 入門_2019年2月14日

electronjs 是什麼?
能夠用javascript寫，windows / mac / linux 界面程序的開發框架。
參看:
https://electronjs.org/
https://electronjs.org/docs

快速開始
必備的條件: nodejs的安裝 git

git clone https://github.com/electron/e...
cd electron-quick-start
npm install
npm start

參看:
https://electronjs.org/docs/t...
https://electronjs.org/docs/t...

項目結構

如何發佈項目
下載相應的release軟件包： https://github.com/electron/e...
解壓到相應目錄

將項目放入解壓的目錄

windows下直接雙擊: electron.exe

參看 https://electronjs.org/docs/t...

項目如何打包（最簡單的方式）

安裝 asar

npm install -g asar

使用 asar 打包

asar pack your-app app.asar

將 app.asar 替換上一步的目錄

集成Jquery

安裝jquery
npm install --save-dev jquery

index.html 加入兼容性代碼

<script type="text/javascript">window.$ = window.jQuery = require('jquery');</script>

html 中加入： <button id="bnt_test1" onclick="bnt_test1()" >test1 button</button>

javascript中加入：

$(function(){
    $("#bnt_test1").click(function(){
        alert("test1")
    });
});

主進程與渲染進程通信

渲染器進程

const ipc = require('electron').ipcRenderer const asyncMsgBtn =
document.getElementById('async-msg') $("#bnt_test1").click(function(){
ipc.send('asynchronous-message', 'ping') })

主進程

const ipc = require('electron').ipcMain ipc.on('asynchronous-message',
function (event, arg) { event.sender.send('asynchronous-reply',
'pong') //或者啓動對話框等 })

參看：
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...