30分钟Electron入门

互联网编程 09-24 1773

前言：

现在小伙伴们对“electron 淘宝镜像”大体比较着重，我们都需要学习一些“electron 淘宝镜像”的相关内容。那么小编同时在网络上汇集了一些有关“electron 淘宝镜像””的相关知识，希望朋友们能喜欢，小伙伴们快快来学习一下吧！

互联网移动化以后，催生了手机端各种app，两大手机系统上需要分别开发一个app。我一直在想，本来网页就是最便捷的跨平台方式，只要手机上有浏览器，打开对应网址就可以了，只需要开发一次，什么系统都通用。为什么不是有一个可以安装到不同系统中的容器，里面可以跑网页呢？为什么要分开开发两个app呢？

更进一步的想法是，以后所有的操作系统，都将是一个浏览器，我们所有的文件不储存在本地，而是储存在云端。所以将来我们的系统里面看见的，其实全都是使用web前端技术写的UI，网页浏览器的概念将不复存在，因为我们从一开始，就是在上网。

2015年逐渐出现一些实现前一种想法的桌面应用，gitHub团队开发的Atom编辑器和大牌Adobe开发的Brackets编辑器就是其中代表。而React-Native的出现，更加是让开发人员雀跃不已。Electron其实就是gitHub团队开发Atom时的框架，之前叫Atom-Shell。

React-Native和Electron异曲同工的地方，就是提供出一个公共的容器，以及能够调用对应系统事件的API。只是React-Native主打移动端，而Electron目前只针对桌面端而已。

下面的示例写于2016年1月，如果日后Electron的API有更新导致报错的话，请自行查询官方最新的文档。

创建文件夹并安装开发依赖包

创建文件夹electron-get-started，或命名为其它自己喜爱的名字。在文件夹下创建下列文件，全部留空即可。

.├── index.html└── main.js

执行npm init命令，生成package.json文件。其中scripts部分设置为"start": "electron main.js"。

接下来安装所需的依赖包（npm默认源链接缓慢的，请使用淘宝国内镜像）：

npm install --save-dev electron-prebuilt

完成后package.json文件如下：

1234567891011121314

{"name": "electron-get-started","version": "0.0.1","description": "","main": "main.js","scripts": {"start": "electron main.js"},"author": "","license": "ISC","devDependencies": {"electron-prebuilt": "^0.36.2"}}

完成以上步骤之后文件夹目录结构如下：

.├── index.html├── main.js└── package.json

开玩

既然是个桌面程序，第一步自然是程序启动后要打开个窗口吧。在main.js中添加下面的代码：

123456789

var electron = require('electron');var app = electron.app;var BrowserWindow = electron.BrowserWindow;app.on('ready', function () {var mainWindow = new BrowserWindow({width: 800,height: 600});});

很明显electron为开发者提供了方便好用的API可供调用。app控制整个程序的生命周期，BrowserWindow可以打开一个浏览器窗口。

注：Electron引入了两个新的概念Main Process和Renderer Process。以目前浅显的理解，Main Process指的就是浏览器窗口，Renderer Process指的就是网页。具体解释请参考官网作出的详细解释。

在main.js中添加好上面的代码后保存，在命令行运行npm start，应该就会打开一个800*600像素的空白窗口。从而也证明程序可以正常跑起来了。

加载网页或本地文件

既然打开了一个浏览器窗口，第一个想法自然就是，咱们开个网页吧。在main.js里面使用一个简单的方法，就可以达到目的啦。

12345678

app.on('ready', function () {var mainWindow = new BrowserWindow({width: 800,height: 600})mainWindow.loadURL('')})

重新启动程序之后就可以见到效果。

可是我们在建一个桌面程序呢，肯定是要加载自己写的文件吧。loadURL同样可以为我们做到。把传入的参数改为本地文件路径就可以啦。

首先在index.html里面加点简单的内容，好让渲染成功之后能看到点东西。

123456789

<html><head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main">hello world</div> </body></html>

main.js里面修改成加载本地文件：

12345678

app.on('ready', function () {var mainWindow = new BrowserWindow({width: 800,height: 600})mainWindow.loadURL('file://' + __dirname + '/index.html')})

重启程序应该就可以看见页面渲染出hello world字符串了。

引入额外的js文件

打开html文件成功的话，下一步自然就是引入一下jquery和其它的js吧。下面在文件夹根目录放入jquery-2.1.4.min.js（当然也可以是另外的版本，引入的时候文件名对应就可以了），再创建一张app.js。并在index.html里面引入：

1234567891011

<html><head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> </body> <script>require('./jquery-2.1.4.min.js')</script> <script>require('./app.js')</script></html>

不要问我为什么可以直接require，因为我也没有深究。Electron就是支持哟。

有了jquery，下面的步骤自然就是操作一下dom了。我们在app.js里面简单地搞一下：

$('.main').text('hello kitty world')

重启程序。

嗯，如果一切步骤正确的话，你应该是得到一个空白的窗口。哈哈哈。

打开开发者工具

好了，这应该是哪里出错了吧。是不是开始怀念chrome dev tool了？

既然我们是打开了一个浏览器窗口，那应该也能打开dev tool才是。Bingo！Electron可以为你做到！

1234567891011121314

app.on('ready', function () {var mainWindow = new BrowserWindow({width: 800,height: 600})mainWindow.loadURL('file://' + __dirname + '/index.html')/* 不加任何参数，可以在本窗口内打开dev tool *//* mainWindow.webContents.openDevTools() *//* 加上参数，可以在新窗口中打开dev tool */mainWindow.webContents.openDevTools({detach: true})})

重启程序就可以在dev tool中看到报错了。

Uncaught ReferenceError: $ is not defined

查到正确的引入方法应该是：

1234567891011

<html><head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> </body> <script>window.$ = require('./jquery-2.1.4.min.js')</script> <script>require('./app.js')</script></html>

原因：

看一下jquery源码：

if ( typeof module === "object" && typeof module.exports === "object" ) {/* 把jQuery挂到`module`对象下 */} else {/* 把jQuery挂到`window`对象下 */}

在app.js里面简单console.log一下可以知道，module和module.exports都已经定义，所以jQuery挂到了module对象下，而不是全局的window.$或window.jQuery。

参考资料如下：

First encounter with Atom-Shell

electron的github issue: jQuery isn’t set globally because “module” is defined

读取本地文件内容

之前loadURL方法可以帮我们直接在浏览器中打开本地html文件。由于有nodeJS的加持，我们还能直接读取本地文件的内容。

html中加一个fileContent

123456789101112

<html><head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> <div class="fileContent"></div> </body> <script>window.$ = require('./jquery-2.1.4.min.js')</script> <script>require('./app.js')</script></html>

app.js中使用nodeJS的API，读取package.json文件内容：

var fs = require('fs')var pckJson = fs.readFileSync('./package.json', 'utf8')$('.fileContent').text(pckJson)

能做到这一点，就代表我们可以在app本地写一些数据来使用了。

本文地址：http://www.longkongtuishu.com/caa6aDWsGAVMCAQ.html

标签： #electron 淘宝镜像