消息关闭
    暂无新消息!

       这是《JavaScript:王的语言》系列文章的Electron篇。JavaScript是目前接近完美的跨平台开发语言,从Web前端、到Android、iOS App(React Native),再到微信小程序、公众号、桌面应用(Electron)、服务端(Node.js)、Chrome插件、物联网等,几乎覆盖了目前所有类型的应用。如果大家只想学习一种编程语言,并且想什么都可以做,那么学习JavaScript是最好的选择。

       在Electron篇的系列文章中,将会介绍关于用Electron开发桌面应用的核心技术。本文主要介绍了Electron的开发环境搭建以及如何分发Electron应用。

可能有很多同学还不了解Electron到底是什么?这个东东就是用JavaScript+HTML5+CSS3开发桌面应用(Windows、Mac OS X和Linux)的框架。如果还不太清楚,那么微软的跨平台开发工具Visual Studio Code相信很多人都用过,这个IDE全部是使用Electron开发的。如果还不够惊讶,那么相信微信小程序大家都听说过,那么开发小程序的IDE是使用另外一个类似的框架NW.js开发的,用Electron也完全可以胜任。

一、Electron环境搭建

      现在我们来安装Electron,这个东西实际上是Node.js(用JavaScript开发服务端应用的系统,类似于Java EE)的一个模块,所以只需要使用npm命令(Node.js中的一个命令行工具,类似于Linux的yum、apt-get等命令)就可以安装Electron了。

      由于Electron是基于Node.js的,所以首先需要安装Node.js,到官网(https://nodejs.org)去下载Node.js,然后安装即可。这里就不详细介绍了,大家自己到网上去去查吧!

     如果要将Electron进行全局安装,需要使用下面的命令。

npm install –g electron

     如果只想将Electron安装到当前的工程目录,那么就执行下面的命令。

npm install --save-dev electron

要注意,由于国内的一些原因,在执行node install.js时会卡住,所以需要在~/.npmrc文件中加上下面的景象。

electron_mirror="https://npm.taobao.org/mirrors/electron/"

 这是Linux和Mac OS X中添加镜像的方法,在Windows中,需要打开<Node.js安装目录>\node_modules\npm\npmmrc文件,并添加上面的镜像。

 二、测试Electron开发环境

 现在来Electron测试开发环境,首先编写一个Hello World。Electron最小的应用需要3个文件:index.html、main.js和package.json。这3个文件的代码如下:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

let win

function createWindow () {
  win = new BrowserWindow({width: 800, height: 600})

  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  win.on('closed', () => {
  
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

package.json

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "devDependencies": {
    "electron": "^1.6.11"
  }
}

接下来,在当前目录执行如下的命令。

electron .

执行命令后,会运行桌面应用,效果如下图所示。

无标题

三、发布桌面应用

       OK,现在已经成功运行了我们的Hello World,但是如何发布呢?也就是在没有Node.js和electron的机器上运行我们的Hello World。

为了解决这个问题,官方提供了打包方法,不过比较麻烦。建议用第三方的打包方案。这里推荐使用electron-packager,这是一个开源的打包解决方案。源代码地址如下:

https://github.com/electron-userland/electron-packager

这个工具可以打包Windows、Mac OS和Linux平台。不过在Mac OS X和Linux下打包Windows应用,需要下载Wine。建议在各自的平台下打包。

如果要打包应用,首先要安装electron-package。 

本地安装

npm install electron-packager --save-dev

 

全局安装

npm install electron-packager -g

 

现在进入工程目录,然后执行如下的命令进行打包。

electron-packager .

 

如果在安装electron时使用了全局安装的方式,还需要指定electron的版本。

electron-packager --electron-version=1.6.11 .

还是建议使用本地方式安装electron,这样npm会下载electron到当前工程目录。

成功打包后,会在工程目录生成相应平台的打包目录,对于Mac OS X,就是一个.app目录,直接复制该目录,即可在其他Mac OS X上运行。对与Windows和Linux平台,会带一些.dll和.so文件,最好直接将打包生成的目录一起复制到其他Windows和Linux机器上运行。

另外一个打包工具electron-builder更为强大,可以直接打包成各种安装程序,如dmg、pkg、rpm等。大家可以到下面的页面去了解electron-builder使用方法。

https://github.com/electron-userland/electron-builder




0个评论

暂无评论!