新手怎样迅速入手html打包桌面利用？有用工具介绍-百分百源码网

新手怎样迅速入手html打包桌面利用？有用工具介绍

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于新手怎样快速入手html打包桌面利用？有用工具介绍，有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

打包桌面利用有两款工具可以打包，一种是 Electron，另一种是nw.js ，本篇幅采纳的Electron工具讲解。

第一步：安置Electron

cnpm install electron -g (全局安置electron)

第二步：安置electron-packager

cnpm install electron-packager -g （打包）

第三步：安置electron-prebuilt [安置之后命令 electron . 就可以运转程序]

cnpm install electron-prebuilt -g

安置此命令之后最好在项目下安置 cnpm install electron-prebuilt --save-dev]

第四步：在npm init项目后的项目下的package.json的文件中的配置

微信截图_20181017133508.png

配置命令的说明

electron . 施行命令当前工程名目下生成exe文件

HelloWorld 生成exe文件名

--win 生成在window系统中运转（也可以施行命令 --all 代表所有的）

./OutApp 生成的HelloWorld.exe在OutApp文件夹下，而OutApp文件夹在当前项目工程的名目下生成

--version 对应electron-prebuilt的版本号

--ignore=node_modiles （可以改为施行当前exe文件的图标 --icon=./img/xxx.ico）

第五步 main.js文件

// var app = require('app');  // 操纵利用生命周期的模块。
// var BrowserWindow = require('browser-window');  // 创立原生阅读器窗口的模块

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

// 保持一个关于 window 对象的全局援用，不然，当 JavaScript 被 GC，
// window 会被主动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
    // 在 OS X 上，平常会员在明白地按下 Cmd + Q 此前
    // 利用会保持活动状态
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// 当 Electron 完成了初始化并且预备创立阅读器窗口的时候
// 这个办法就被调取
app.on('ready', function() {
    // 创立阅读器窗口。
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // 加载利用的 index.html
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // 翻开开发工具
    mainWindow.openDevTools();

    // 当 window 被关闭，这个事件会被发出
    mainWindow.on('closed', function() {
        // 取消援用 window 对象，假如你的利用支撑多窗口的话，
        // 平常会把多个 window 对象存置在一个数组里面，
        // 但这次不是。
        mainWindow = null;
    });
});

第六步施行命令

cnpm run-script packager

那么接下来就看一下我工程的名目构造图与打包后的结果吧

微信截图_20181017133324.png