博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Electron初步【02】--第一个Electron App
阅读量:6197 次
发布时间:2019-06-21

本文共 2628 字,大约阅读时间需要 8 分钟。

目录结构与文件

Electron App的目录结构如下:

your-app/├── package.json├── main.js└── index.html

其中的package.json和Node Modules里表现的一样,而main.js则是启动你App的脚本,它将会开启主进程。package.json的一个例子:

{  "name"    : "your-app",  "version" : "0.1.0",  "main"    : "main.js"}

注:当package.json里不存在main时,Electron将会默认使用index.js

main.js应当创建一个窗口并处理系统事件。一个典型的例子如下:

'use strict';const electron = require('electron');const app = electron.app;  // 控制App生命周期的模块const BrowserWindow = electron.BrowserWindow;  // 创建原生窗口的模块// 保持对窗口对象的全局引用。如果不这么做的话,JavaScript垃圾回收的时候窗口会自动关闭var mainWindow = null;// 当所有的窗口关闭的时候退出应用app.on('window-all-closed', function() {  // 在 OS X 系统里,除非用户按下Cmd + Q,否则应用和它们的menu bar会保持运行  if (process.platform != 'darwin') {    app.quit();  }});// 当应用初始化结束后调用这个方法,并渲染浏览器窗口app.on('ready', function() {  // 创建一个窗口  mainWindow = new BrowserWindow({width: 800, height: 600});  // 加载index.js  mainWindow.loadURL('file://' + __dirname + '/index.html');  // 打开 DevTools  mainWindow.webContents.openDevTools();  // 窗口关闭时触发  mainWindow.on('closed', function() {    // 如果你的应用允许多个屏幕,那么可以把它存在Array里。    // 因此删除的时候可以在这里删掉相应的元素    mainWindow = null;  });});

最后,index.html是你最终要展示的页面

      
Hello World!

Hello World!

We are using node , Chrome , and Electron .

运行&生成应用

通过electron-prebuilt运行

如果你通过npm全局安装了electron-prebuilt,那么在App文件目录下跑这句就可以运行它:

electron .

如果只是在当前项目下安装了,则要跑:

./node_modules/.bin/electron .

通过Electron Binary运行

在这儿下载

打开包内的App按照提示操作,或者在该文件夹下运行:

$ ./Electron.app/Contents/MacOS/Electron your-app/

就可以通过这个包来运行自己的应用了。

生成应用

应用写完以后,可以参照里的指导进行打包:

  1. 项目文件名应该命名为app

  2. 下载Electron资源文件。就是上一步里面的

  3. 把项目目录放在Electron资源文件夹下

Mac OS X:

electron/Electron.app/Contents/Resources/app/├── package.json├── main.js└── index.html

Windows & Linux:

electron/resources/app├── package.json├── main.js└── index.html

之后运行Electron.app就能启动应用

现在,你的应用名称为默认的Electron.app(或Electron.exe),可以通过如下方式修改名称:

Windows

直接修改Electron.exe的名称

OS X

  1. 修改应用Electron.app的名称

  2. 修改文件中的CFBundleDisplayNameCFBundleIdentifier,以及CFBundleName字段。它们的所在位置:

  • Electron.app/Contents/Info.plist

  • `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

    `

应用打包

使用asar库来替代你的app文件夹,这样可以避免暴露你的源码。

生成asar

asar可以把多个文件合并成一个类似于tar的归档文件。

  1. install

$ npm install -g asar
  1. 打包

切换到含有你项目文件夹的父级文件夹

# dev/your-app$ cd dev

打包项目

$ asar pack your-app/ app.asar

将生成的app.asar放在:

// OS Xelectron/Electron.app/Contents/Resources/└── app.asar// Windows & Linuxelectron/resources/└── app.asar

这样你就可以不必放入app文件夹,而且你的代码都是封装压缩过的。

例子

按照下面步骤来运行官方案例:

# Clone the repository$ git clone https://github.com/atom/electron-quick-start# Go into the repository$ cd electron-quick-start# Install dependencies and run the app$ npm install && npm start

转载地址:http://usnca.baihongyu.com/

你可能感兴趣的文章
强制 InnoDB 恢复,启动 MySQL 数据库
查看>>
随笔之GoldFish Kernel启动过程中arm汇编分析
查看>>
将一个十六进制数的字符串参数转换成整数返回
查看>>
Go编程笔记(35)
查看>>
Sublime 下配置vim模式
查看>>
关于handler和线程
查看>>
svn服务器环境搭建个人记录
查看>>
javascript中的box2d使用大全记录
查看>>
Android Matrix类以及ColorMatrix类详解
查看>>
心情小叙
查看>>
高手是怎样炼成的
查看>>
Linux iptables 配置详解
查看>>
RabbitMQ学习笔记(1)——AMQP
查看>>
和 Thrift 的一场美丽邂逅
查看>>
利用paramiko模块批量登录(执行命令/上传文件)
查看>>
关于网页开发webpack基本配置.
查看>>
phper从st到vscode
查看>>
基于容器服务的持续集成与云端交付(一)- 交付之禅
查看>>
我的友情链接
查看>>
02-SCCM2012-站点配置文档
查看>>