爱知识,乐分享!

使用electron将web应用封装为桌面应用

如今前端技术真是无所不能,不仅能做前端网页开发,还涉足后端服务器、移动应用,甚至于桌面应用开发,简直有一统天下的气魄。对于移动端我还能理解,html5具有天然的跨平台优势,开发一些C/S架构的移动应用也属于正常现象,但是,对于桌面应用这方天地,简直想都不敢想。但是,你知道Atom、VScode、wordpress都是用同样的技术开发出来的吗?它们背后的技术就是electron,按照官方的说法,“如果你可以建一个网站,你就可以建一个桌面应用程序。”

1.web3d

从头说起,作为一个3D美术能够将模型发布到网页上,并能够实时交互展示,这得益于webGL技术的进步,现在能实现它的途径有很多,比如Three.js、babylonjs、unity3d、sketchfab,以及像blend4web、verge3d这样的集成工具。在此不详细介绍了,今天要介绍的是,如果你已经开发了一个web应用,那么也就意味着它的桌面版也即将诞生了,只需要使用electron为它打个包。

2.electron

对于electron简单地说(或者对我来说),它就是一个本地版浏览器。官方说法,它是 基于 Chromium 和 Node.js, 可以使用 HTML, CSS 和 JavaScript 来构建应用的技术。经过测试,它非常简单易用,能直接对web3d应用进行封装,打包成一个exe文件,几乎不用写代码,按照官方文档复制代码即可。

如果你不太熟悉程序开发环境搭建,也可以跳过,直接从步骤(3)开始。

(1)环境搭建

vscode:编程首先得有一个IDE。vscode本身就是electron开发出来的,免费开源,背后是微软,官方推荐。地址:https://code.visualstudio.com/

node.js:JS能在各个领域横行这背后黑手就是node.js,node给了js一个运行环境,使js不再局限于浏览器,使它成为一门真正的编程语言。安装node.js同时会安装npm,我们使用npm安装各种依赖。地址:https://nodejs.org/zh-cn/。windows环境搭建见官方文档,地址:https://electronjs.org/docs/tutorial/development-environment。

git:著名的版本控制工具。git和github是不同的,虽然我们经常用git从github上克隆代码库。地址:https://www.git-scm.com/download/

(2)快速上手

从官方提供的快速上手代码库开始比较容易,按照快速上手文档一步步操作。

首先,复制并运行这个库 electron/electron-quick-start,地址:https://github.com/electron/electron-quick-start

# 克隆代码库

$ git clone https://github.com/electron/electron-quick-start

# 进入库

$ cd electron-quick-start

# 安装依赖库

$ npm install

# 运行应用

$ npm start

(3)下载electron

使用npm安装

npm install –save-dev electron

或者从中国镜像下载,地址:https://npm.taobao.org/mirrors/electron

electron-v4.0.0-beta.7-win32-x64.zip

如果是手动下载,解压后,electron文件夹下有一个resources文件夹,将第1步克隆的快速启动库改名为app,然后将这个app文件夹复制到resources文件夹下,双击运行外层的electron.exe,即可启动窗口程序。

简单到不行。这里使用快速上手代码库只是省去了创建程序目录的步骤,如果你是跳过了前两个步骤看到这里的,需要从github上下载快速上手代码库(点击绿色按钮,下载zip文件)。一个基本的electron程序一般会有如下目录:

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

(4)修改入口文件

将你已经开发好的前端文件(例如web3d文件夹)放到app下,在main.js中修改入口文件main.js。

mainWindow.loadFile('web3d/index.html')

最后,程序目录可能是这个样子:

your-app/
├──resources/
├────app/
├──────package.json
├──────main.js
├──────renderer.js
├──────web3d/
├────electron.asar
├──electron.exe
├──...

运行electron.exe,不出意外你的web3d应用就可以在桌面上运行了。

(5)打包生成asar文件

为了避免代码暴露在外面,不让人看到你的前端代码,你可以使用asar将你的前端 代码打包。

$ npm install -g asar

如果安装asar不成功,尝试npm init -y,继续。

$ asar pack your-app app.asar

这样会生成一个app.asar。将打包前的前端文件全部移除,双击electron.exe,程序会正常运行。

(6)定制应用程序,打包

虽然官方提供了很多打包工具,但是如果你不想写代码,下面是一些有可视化界面的小工具。

使用resedit(http://www.resedit.net/)修改electron.exe图标、版本、版权等信息。

使用HM NIS Edit(http://hmne.sourceforge.net/)、NSIS(http://hmne.sourceforge.net/)对应用程序打包,生成安装文件。

最后,提供一个我制作的小游戏——减肥熊,它的线上版在这里:https://zjbcool.com/bear.html

减肥熊桌面版:

链接: https://pan.baidu.com/s/1sIhOJyBbJfY9-AA2vyNBSA

提取码: d9kb

zjbcool

zjbcool
关闭菜单