Electron入门之环境搭建_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Electron入门之环境搭建
上传于||暂无简介
阅读已结束，如果下载本文需要使用5下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢Posts - 33,
Articles - 10,
Comments - 29
专注前端技术,所有离开背景谈的性能、功能都是扯淡
11:35 by cczw, ... 阅读,
web前端语言的发展有目共睹, 从原来的pc web, 到后来的mobile SAP, 再到 nodejs,全站工程师应运而生. js快速而且稳健的发展让人不得不重视, 相应的前端开发人员的地位也越来越高, 越来越多的人愿意投入到前端的阵营里去. 而桌面app向来是web前端开发开发人员下意识的避开方向. 但是依然不乏有憧憬的人.于是借助于webkit内核和nodejs,出现了web移动app解决方案和web桌面app的解决方案. 而我们需要做的就是利用熟悉的前端语言借助大拿们的工具,愉悦的开发就好了.
的前身是atom-shell, 是github目前比较出名的Atom编辑器的一个兄弟项目,它是一个借助nodejs和Chromium, 利用HTML/CSS/JavaScript语言创建桌面应用的一个工具. 与之类似的还有一个微软的工程师搞的, 原理基本相同. 但是个人感觉可能Electron更新更好一些,社区发展也更热闹些.
具体的说明,大家可以去参考官方的
下面边操作边摘一些环境安装以及打包的基础:
一旦你创建了最初的 main.js， index.html 和 package.json 这几个文件，你可能会想尝试在本地运行并测试，看看是不是和期望的那样正常运行。
electron-prebuilt
官方安装electron我老遇到问题,建议使用electron-prebuilt 是一个 npm 模块，包含所使用的 Electron 预编译版本。 如果你已经用 npm 全局安装了它，你只需要按照如下方式直接运行你的应用：
electron .
如果你是局部安装，那运行：
./node_modules/.bin/electron .
如果你手工下载了 Electron 的二进制文件，你也可以直接使用其中的二进制文件直接运行你的应用。
$ .\electron\electron.exe your-app\
$ ./electron/electron your-app/
$ ./Electron.app/Contents/MacOS/Electron your-app/
Electron.app 里面是 Electron 发布包，你可以在&&下载到。
web应用结构
大体上，一个 Electron 应用的目录结构如下：
├── package.json
├── main.js
└── index.html
package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 package.json 看起来应该像：
: "your-app",
"version" : "0.1.0",
: "main.js"
注意：如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。由于环境基于node,所以你的js可以使用任何node模块.
main.js 应该用于创建窗口和处理系统事件,具体请参考官方的或者文档.
应用部署(官方版本)
方法一 替换已有应用的资源文件
为了使用 Electron 部署你的应用程序，你存放应用程序的文件夹需要叫做 app 并且需要放在 Electron 的 资源文件夹下（在 macOS 中是指 Electron.app/Contents/Resources/，在 Linux 和 Windows 中是指 resources/） 就像这样：
在 macOS 中:
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 （或者 Linux 中的 electron，Windows 中的 electron.exe）, 接着 Electron 就会以你的应用程序的方式启动。electron 文件夹将被部署并可以分发给最终的使用者。
方法二 asar打包
除了通过拷贝所有的资源文件来分发你的应用程序之外，你可以通过打包你的应用程序为一个 asar 库文件以避免暴露你的源代码。
为了使用一个 asar 库文件代替 app 文件夹，你需要修改这个库文件的名字为 app.asar ， 然后将其放到 Electron 的资源文件夹下，然后 Electron 就会试图读取这个库文件并从中启动.
在 macOS 中:
electron/Electron.app/Contents/Resources/
└── app.asar
在 Windows 和 Linux 中:
electron/resources/
└── app.asar
如何打包呢?
官方提供的打包原理是将web目录打包成一个asar,Electron 可以无需解压，即从其中读取任意文件内容。asar 包中的内容不可更改，所以 Node APIs 里那些可以用来修改文件的方法在对待 asar 包时都无法正常工作。
$ npm install -g asar
用 asar pack 打包
$ asar pack your-app app.asar
使用 asar 包
在 Electron 中有两类 APIs：Node.js 提供的 Node API 和 Chromium 提供的 Web API。 这两种 API 都支持从 asar 包中读取文件。
更详细的说明,请参考
更换名称与下载二进制文件
在使用 Electron 打包你的应用程序之后，你可能需要在分发给用户之前修改打包的名字。
你可以将 electron.exe 改成任意你喜欢的名字，然后可以使用像&&编辑它的 icon 和其他信息。
你可以将 Electron.app 改成任意你喜欢的名字，然后你也需要修改这些文件中的 CFBundleDisplayName， CFBundleIdentifier 以及 CFBundleName 字段。 这些文件如下：
Electron.app/Contents/Info.plist
Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
你也可以重命名帮助应用程序以避免在应用程序监视器中显示 Electron Helper， 但是请确保你已经修改了帮助应用的可执行文件的名字。
一个改过名字的应用程序的构造可能是这样的：
MyApp.app/Contents
├── Info.plist
├── MacOS/
└── MyApp
└── Frameworks/
├── MyApp Helper EH.app
├── Info.plist
└── MacOS/
└── MyApp Helper EH
├── MyApp Helper NP.app
├── Info.plist
└── MacOS/
└── MyApp Helper NP
└── MyApp Helper.app
├── Info.plist
└── MacOS/
└── MyApp Helper
你可以将 electron 改成任意你喜欢的名字。
应用部署(插件版本)
除了使用官方提供的方法外,很多第三方的模块也可以完成该打包过程.并直接生成各系统的安装文件.
比较常用的是&&和&. 通过npm安装后直接可以使用命令生成安装包和运行包, 简直太方便了. 不过可能需要对package.json做一些简单的配置.下面说说 electron-builder.
npm install electron-builder
安装之后,全局的话则可以使用cli命令build(这名起的真让人难受),局部安装则使用node_modules/.bin/build来调用命令生成压缩包,运行包和安装包. 具体的参数可以参考官方文档或者使用&build --help来查看
配置package.json
必须的几项为, name, description, version and author. 同时你要带上electron-builder要求的键值appId和编译针对的系统平台参数详情点击,下面是一个简单的示例:
"name": "helloworld",
"version": "0.1.0",
"author":"awen",
"description":"test",
"main": "main.js",
"build": {
"appId": "com.electron.awen.hello",
"copyright":"awen",
"productName":"测试",
"background":"build/background.png",
"icon":"build/icon.icns",
"window":{
"width":500,
"height":300
"category": "public.app-category.developer-tools",
"squirrelWindows":{
"iconUrl":"/favicon.ico"
"icon": "icon.ico"
图标和背景
在web根目录下建一个build文件夹,里面来放图标和背景图片,当然也可以在package.json中自己配置(官方推荐使用目录,但是个人倾向于配置文件),说明如下:
└──build
├──background.png
(mac的DMG安装文件打开后的背景)
├──icon.icns
(mac的图标文件)
├──icon.ico
(windows的图标文件)
└──icons (linux的图标文件,也可以省略直接继承mac的图标文件)
└──32x32.png
编译多平台的包时,你需要安装一些依赖:
sudo apt-get install
弄好你的环境之后你可以执行以下build --help中的示例生成三平台的程序,初次执行会下载对应平台的electron包.
build -mwlElectron项目实战开发和多窗口应用-js开发桌面应用_绵阳网站建设
&&&&上一周主要是研究了Electron的开发技术，Electronu是一个基于HTML5+css+js然后开发桌面应用的框架，内置了谷歌浏览器内核，并且版本很新，之前自己找过资料，写过C#封装webkit内核的浏览器，采用的C#和Cefglue的配合，虽然通过反射能实现js和C#的通信，但是在js调用C#创建一个新的webkit浏览器窗体的时候总会报错，这个问题现在都没有解决，让我很是无语。（ps:如果有C++基础到是可以改改，可惜我不会c++）&&&&后来在Electron上得到了解决，并且，Electron是运行在nodejs上的，通过网页中的js调用nodejs的方法，还是蛮强大。&&&&不过在做Electron项目的时候也遇到了很多的坑，特别是文档太少，很多官方接口我是硬着头皮去看英文文档才解决的，所以很累。&&&&这篇文档只是介绍下Electron，具体的实战过程小安会写在下一篇文档中，其实这种模式和apiCloud的js开发手机端差不多，都是与网页的双向通信来编程，降低了学习成本，不过，毕竟没有原生用起舒服这点是无可厚非的。&&&&Electron的加载相当快，v8的引擎是优势，我的程序是与网站在线页面交互，而不是本地网页，而打开依然很快哦，就像一般的桌面应用一样。&&&&下面是截图分享：教程会在下一篇文档，看过最好的一篇中文教程是这里，有兴趣的朋友可以看看：/archives/124970.html&&&&实战教程流程地址：/arc-8856.html
绵阳 · 史安平博客 - 锉其锐、解其纷、和其光、同其尘 版权所有 &}