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...