electronjs 入门_2019年2月14日

最新推荐文章于 2024-11-27 11:29:55 发布

weixin_33875839

最新推荐文章于 2024-11-27 11:29:55 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 操作系统 git ViewUI

原文链接：https://segmentfault.com/a/1190000018159332

本文详细介绍了ElectronJS，一种用JavaScript开发跨平台桌面应用的框架。内容涵盖安装配置、项目结构、打包发布及主渲染进程间的通讯。此外，还演示了如何集成Jquery并实现按钮点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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