electron打包h5应用为exe

最新推荐文章于 2024-08-25 20:51:47 发布

daodfs1

最新推荐文章于 2024-08-25 20:51:47 发布

阅读量793

点赞数

本文链接：https://blog.csdn.net/daodfs111/article/details/105869580

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

说明

应用使用了nodejs来访问本地文件

环境

windows7 （electron最低要求为window7系统）
Intellij IDEA 2017(一款IDE，没什么要求)
nodejs v10.15.3
electron 8.2.3
electron-packager 14.2.1

步骤

1. 安装 nodejs

(略)

2.全局安装 electron

在命令行中执行以下命令
npm install electron -g 或 cnpm install electron -g（国内使用cnpm下载快）

3.创建应用程序（手动）

(1) 创建一个空的Static Web工程（本项目名称为eldemo）

可以在IDE中创建，也可以直接在硬盘目录中新建一个文件夹eldemo

(2) 在eldemo下创建package.json文件

内容为

{
  "name": "eldemo",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager ./ --platform=win32 --arch=x64 --icon=./icon.ico --out=./out --electron-version=8.2.3 --app-version=0.1.0 --overwrite --ignore=node_modules"
  },
  "devDependencies": {
    "electron": "^8.2.3",
    "electron-packager": "^14.2.1"
  }
}

(3) 在eldemo下创建main.js文件

内容为

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

function createWindow () {
    //隐藏菜单栏
    Menu.setApplicationMenu(null);
    // 创建浏览器窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        // fullscreen: true, //默认全屏
        webPreferences: {
            nodeIntegration: true, // 项目中使用node，一定要设置为true,否则下面的index.js运行时会报错，因为使用了node的API
            webSecurity: false // 禁用web安全
        }
    });

    // 并且为你的应用加载index.html
    win.loadFile('index.html')

    // 打开开发者工具
    win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
    app.quit()
}
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
}
})

// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。

(4) 在eldemo下创建index.html文件

内容为普通的业务代码（可根据具体业务编写）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<div><label>请选择文本文件<input id="file-txt" type="file" accept="text/plain"></label></div>
<div><button id="show-txt">显示文本</button></div>
<div><textarea id="area" cols="30" rows="10"></textarea></div>
<hr>
<div><label>请选择图片<input id="file-pic" type="file" accept="image/*"></label></div>
<div><button id="show-pic">显示图片</button></div>
<div style="width: 400px;height: 200px;border: 1px solid #A0A0A0;overflow: auto"><img id="pic"></div>
<hr>
<div><label>文件路径<input id="filename" type="text" value="D:/home/文件.txt"></label></div>
<div><button id="write-txt">写入文件</button></div>
<div><textarea id="file-content" cols="30" rows="10"></textarea></div>
<script src="renderer/index.js"></script>
</body>
</html>

(5) 在eldemo下创建renderer目录

该目录与electron打包无关，仅凭个人爱好。内容为普通的业务代码（可根据具体业务编写）

(6) 在renderer下创建index.js文件

该文件与electron打包无关，仅凭个人爱好。内容为普通的业务代码（可根据具体业务编写）

该文件用到了ES6语法，请在IDE中设置javascript版本为ES6
内容为

const fs = require('fs');

window.onload = function () {
    var showTxt = this.document.querySelector('#show-txt');
    var showPic = this.document.querySelector('#show-pic');
    var area = this.document.querySelector('#area');
    var filePic = this.document.querySelector('#file-pic');
    var fileTxt = this.document.querySelector('#file-txt');
    var picImg = this.document.querySelector('#pic');

    var writeTxt = this.document.querySelector('#write-txt');
    var filename = this.document.querySelector('#filename');
    var fileContent = this.document.querySelector('#file-content');

    showTxt.onclick = function () {
        let files = fileTxt.files;
        if (!files.length) {
            return;
        }
        fs.readFile(files[0].path.replace(/\\/g, '/'), (err, data) => {
            area.innerHTML = data
        })
    };
    showPic.onclick = function () {
        let files = filePic.files;
        if (!files.length) {
            return;
        }
        picImg.src = files[0].path.replace(/\\/g, '/');
    };
    writeTxt.onclick = function () {
        let title = filename.value;
        if (!title) {
            return;
        }
        let content = fileContent.value;
        console.log(43, content);
        fs.writeFile(title, content, function (error) {
            if (error) {
                alert('写入失败')
            } else {
                alert('写入成功了')
            }
        })

    }
};

(7) 在eldemo添加一个项目图标icon.ico

必须为256*256的ico格式的图片，不是简单的改后缀名

4.运行项目

在cmd命令行中(或IDE的命令行中)，进入到项目根目录eldemo目录下，执行命令
npm install 或cnpm install
来安装依赖
完成后执行命令
npm start
运行项目
项目截图
在这里插入图片描述

5.打包项目

在cmd命令行中(或IDE的命令行中)，进入到项目根目录eldemo目录下，执行命令
npm run-script package
打包日志为

> eldemo@0.1.0 package D:\workspace\eldemo
> electron-packager ./ --platform=win32 --arch=x64 --icon=./icon.ico --out=./out --electron-version=8.2.3 --app-version=0.1.0 -
-overwrite --ignore=node_modules

Packaging app for platform win32 x64 using electron v8.2.3
WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron
zip file will hang.
Wrote new app to out\eldemo-win32-x64

D:\workspace\eldemo>

6.完成

打包生成的内容截图
在这里插入图片描述

7.打包时可能遇到的问题

(1) npm ERR! A complete log of this run can be found in: npm ERR!

原因是依赖丢失
解决办法也很简单，删除node_modules（如果在IDE中删不掉，可到硬盘上直接删除）
在cmd命令行中(或IDE的命令行中)，进入到项目根目录eldemo目录下，执行命令
npm install 或cnpm install
重新安装依赖

(2) WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron zip file will hang.npm ERR!npm ERR!

本人就是在这个地方卡了两天，不过最终解决了
首先在控制面板->卸载程序中查看有没有.NET Framework 4.5以上和Powershell 3以上的程序，如果没有就需要下载安装
NET Framework 4.5可以在360软件管理中搜索安装，安装时请先阅读版本说明
也可以在微软官网下载
本人安装的是 NET Framework 4.5.2版本
Powershell 地址：https://docs.microsoft.com/zh-cn/powershell/scripting/install/installing-powershell-core-on-windows?view=powershell-6#prerequisites请一定仔细阅读
本人安装的是Powershell 6.0.0版本

先决条件
Windows 7 SP1、Server 2008 R2 及更高版本支持最新版 PowerShell。
若要通过 WSMan 启用 PowerShell 远程处理，需要满足以下先决条件：
在低于 Windows 10 的 Windows 版本上安装通用 C 运行时。 可以通过直接下载或 Windows 更新来获取它。 完全修补的系统已安装此包。
在 Windows 7 和 Windows Server 2008 R2 上安装 Windows Management Framework (WMF) 4.0 或更高版本。 有关 WMF 的详细信息，请参阅 WMF 概述。

可能还需要下载安装WMF：https://docs.microsoft.com/zh-cn/powershell/scripting/install/installing-powershell-core-on-windows?view=powershell-6#prerequisites
本人安装的是Windows Management Framework (WMF) 5.1版本

都下载下来后，先安装NET Framework，再安装WMF，最后安装Powershell，顺序不能变

安装WMF时可能会报错0x80070422，可能是因为你的电脑禁用了Update
解决方法
在这里插入图片描述
运行services.msc

找到Windows Update,启动
现在可以安装WMF了，安装完成后一定要重启计算机。