electronjs 入门_2019年2月14日

electronjs 是什么?

可以用javascript写，windows / mac / linux 界面程序的开发框架。

参看:

https://electronjs.org/  

https://electronjs.org/docs  

快速开始

必备的条件: nodejs的安装 git 

 

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install

npm start

 

参看:

https://electronjs.org/docs/tutorial/first-app#trying-this-example

https://electronjs.org/docs/tutorial/first-app

项目结构

 

如何发布项目

下载相应的release软件包： https://github.com/electron/electron/releases

解压到相应目录

 

将项目放入解压的目录

windows下直接双击: electron.exe

 

参看 https://electronjs.org/docs/tutorial/application-distribution

 

项目如何打包（最简单的方式）

安装 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/1190000009253100

https://segmentfault.com/a/1190000011507250