使用Electron开发桌面应用

Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScriptHTML 和 CSS 构建跨平台的桌面应用程序。它是基于io.js 和 Chromium 开源项目,并用于在 Atom 编辑器中。Electron 是开源的,由 GitHub 维护,有一个活跃的社区。最重要的是,Electron 应用服务构建和运行在 Mac,Windows 和 Linux。

安装Electron

npm install electron-prebuilt -g  //cnpm install electron-prebuilt -g

安装完毕后运行

electron -v    //查看electron版本
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies and run the app
npm install && npm start

Electron应用包含三部分:

1、package.json依赖文件

2、index.html应用页面

3、main.js or renderer.js主进程or渲染进程

Electron应用由主进程和渲染进程组成,主进程即main进程,主要负责和系统gui交互,渲染进程即renderer用于页面渲染,主进程和渲染进程通过ipc模块进行通信。

main.js代码:

'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
    mainWindow = new BrowserWindow({width: 800, height: 600});
     //mainWindow.loadURL(`http://www.baidu.com/`);
    mainWindow.loadURL(`file://${__dirname}/index.html`);
    //mainWindow.webContents.openDevTools();
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
}
app.on('ready', createWindow);
app.on('window-all-closed', ()=> {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
app.on('activate', ()=> {
    if (mainWindow === null) {
        createWindow();
    }
});

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的应用</title>
</head>
<body>
we are using nodejs
<script>document.write(process.version)</script>
and Electron
<script>document.write(process.versions['electron'])
require('./renderer.js')
</script>
</body>
</html>

最终效果: 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏哈雷彗星撞地球

iOS下JS与OC互相调用(二)--WKWebView 拦截URL

在上篇文章中讲述了使用UIWebView拦截URL的方式来处理JS与OC交互。 由于UIWebView比较耗内存,性能上不太好,而苹果在iOS 8中推出了WK...

1475
来自专栏朱慕之的博客

WKWebView

我们要通过JS与webview内容交互,就需要到这个类了,它的所有属性及方法说明如下:

881
来自专栏QQ空间开发团队的专栏

WKWebView 那些坑

WKWebView 是苹果在 WWDC 2014上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用,本文主要讲述适配 WKWebView 过...

3.1K2
来自专栏移动开发面面观

iOS的WebView——WKWebView

1592
来自专栏腾讯Bugly的专栏

WKWebView 那些坑

导语 WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用、内存泄漏的 UIWebView。...

73812
来自专栏乐沙弥的世界

Linux 下配置 HugePages

    HugePages是通过使用大页内存来取代传统的4kb内存页面,使得管理虚拟地址数变少,加快了从虚拟地址到物理地址的映射以及通过摒弃内存页面的换入换出以...

854
来自专栏iOS开发攻城狮的集散地

WKWebView的使用

3855
来自专栏iOS Developer

UIWebView的使用与总结

1123
来自专栏编程语言

iOS:WKWebView JS 交互这点事

983
来自专栏移动端开发

Swift 2.0 UIAlertView 和 UIActionSheet 的使用

 在 IOS 9.0 之后, UIAlertView  是 给废弃了的,虽然你要使用的话,暂时还是可以的,但是在 9.0 之后,IOS 推荐大家使用的是  UI...

2109

扫码关注云+社区