目录

  • 说明
  • 环境
  • 步骤
  • 1. 安装 nodejs
  • 2.全局安装 electron
  • 3.创建应用程序 （手动）
  • (1) 创建一个空的Static Web工程（本项目名称为eldemo）
  • (2) 在eldemo下创建package.json文件
  • (3) 在eldemo下创建main.js文件
  • (4) 在eldemo下创建index.html文件
  • (5) 在eldemo下创建renderer目录
  • (6) 在renderer下创建index.js文件
  • (7) 在eldemo添加一个项目图标icon.ico
  • 4.运行项目
  • 5.打包项目
  • 6.完成
  • 7.打包时可能遇到的问题
  • (1) npm ERR! A complete log of this run can be found in: npm ERR!
  • (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!


说明

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

环境

  1. windows7 （electron最低要求为window7系统）
  2. Intellij IDEA 2017(一款IDE，没什么要求)
  3. nodejs v10.15.3
  4. electron 8.2.3
  5. 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

运行项目

项目截图

python 将h5打包成apk h5打包成exe_前端

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.完成

打包生成的内容截图

python 将h5打包成apk h5打包成exe_es6_02

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

解决方法

python 将h5打包成apk h5打包成exe_python 将h5打包成apk_03


运行services.msc

python 将h5打包成apk h5打包成exe_前端_04


找到Windows Update,启动

现在可以安装WMF了，安装完成后一定要重启计算机。

重启计算机后安装Powershell，安装完成后就可以执行5.打包项目了