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…