从零开始把网页打包成桌面EXE应用程序

/ 2评 / 0

介绍

目前,使用前端技术开发桌面应用已经越来越成熟,这使得前端同学也可以参与桌面应用的开发。目前类似的工具有electron,NW.js等。这里我们着重介绍下electron。

electron开发

electron是基于Node.js和Chromium做的一个工具。electron是的可以使用前端技术实现桌面开发,并且支持多平台运行。下面来讲下如何使用electron开发桌面app。

运行环境

首先在Node.js官网下载最新版本安装。
安装完毕后打开命令行,执行下面语句:

//npm官方安装需要fanqiang,建议使用cnpm安装(后面的安装尽量使用cnpm),首先要安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g electron

hello world

一个最简单的electron项目包含三个文件, package.jsonindex.htmlmain.js
首先在项目中创建这三个文件。
package.json是Node.js项目的配置文件,index.html是桌面应用的界面页面,main.js是应用的启动入口文件。其中,核心的文件是inde.htmlmain.js,下面来讲下这两个文件的细节。
index.html是应用的展示界面,代码如下:



  
    
    Hello World!
  
  
    

Hello World!

We are using node , Chrome , and Electron .

main.js是electron应用的入口文件。主要用户启动electron的界面。可以通过以下代码来启动electron界面。

const electron = require('electron');
const { app } = electron;
const { BrowserWindow } = electron;
let win;
function createWindow() {
  // 创建窗口并加载页面
  win = new BrowserWindow({width: 800, height: 600});
  win.loadURL(`file://${__dirname}/index.html`);

  // 打开窗口的调试工具
  win.webContents.openDevTools();
  // 窗口关闭的监听
  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的格式和 Node 的完全一致,并且那个被 main 字段声明的脚本文件是你的应用的启动脚本,它运行在主进程上。你应用里的 package.json 看起来应该像:

{
  "name": "Hello",
  "version": "1.0.0",
  "main": "main.js"
}

应用部署(插件版本)

比较常用的是electron-packagerelectron-builder.

electron-packager

electron-packager可以将项目打包成各平台可直接运行的程序,比如app,exe等。打包出来的程序至少100M,这是跨平台工具无法避免的通病。善用ignore参数,排除程序运行不必要的包。
安装

cnpm install -g electron-packager

用命令行进入项目目录执行(命令中的1.7.5是electron版本,可通过electron -v查询对应的版本)

electron-packager . hello ../ --electronVersion 1.7.5 --overwrite

下面是该命令解释:

electron-packager   --platform=  win32,darwin --arch=all --electronVersion=1.6.10 --out=dist/ --overwrite --ignore=node_modules/electron-* --ignore=node_modules/.bin --ignore=.git --ignore=dist --prune
#* : 项目的位置
#* : 应用名
#*--out  : 指定输出的目录
#*--electronVersion= : 指定编译的 electron-prebuilt 版本,可以使用前面prebuid安装的版本,查看命令  electron -h 
#--platform= : 打包的系统(darwin、win32、linux)
#--arch= : 系统位数(ia32、x64)
# --icon= : 指定应用的图标(Mac 为 .icns 文件,Windows 为 .ico 或 .png)

2 responses to “从零开始把网页打包成桌面EXE应用程序”

  1. owl says:

    你好,想请教个问题。阁下的代码块风格是如何更换的?望赐教。

Leave a Reply

Your email address will not be published. Required fields are marked *