uniapp Electron打包生成桌面应用exe文件

1.uniapp Electron打包生成桌面应用exe文件

随着跨平台开发的需求日益增长，UniApp 成为了开发者们的首选之一。通过 UniApp，你可以使用 Vue.js 的语法结构和组件系统来构建原生应用、Web 应用甚至是桌面应用。本文将详细介绍如何使用 UniApp 将你的项目打包成 Windows 桌面端的 exe 文件。

1.1. 前言

1.1.1. Electron

Electron文档：https://www.electronjs.org/zh/docs/latest/tutorial/keyboard-shortcuts
Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架，它使开发人员能够使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它已经被众多知名公司使用，例如 GitHub、Slack、Microsoft 等等。本文将介绍如何使用 Electron 开发桌面应用程序。
Electron 使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。
在桌面程序中，使用C#语言可以创建winform和WPF程序，他们2个在Windows中都非常的优秀，还有就是使用QT开发桌面，可以跨平台开发，这三种都是比较“正规”的，而Electron是使用框架开发桌面程序的，还有其他的框架也可以开发桌面程序等。

1.1.2. 前提条件

（1）已安装 Node.js (建议使用 LTS 版本)
（2）已安装 Git (可选)
（3）已安装 HBuilderX 或其他支持 UniApp 的 IDE
（4）已安装 uni-app CLI (npm install -g @dcloudio/uni-app)
在这里插入图片描述

1.1.3. 安装node.js，

安装node.js，在https://nodejs.org/en/download/ 网页上下载安装即可。
按照网址安装配置即可https://www.cnblogs.com/liuqiyun/p/8133904.html
在这里插入图片描述
npm版本如下

npm -v

在这里插入图片描述
npm版本如下

npm -v

node版本如下

node -v

在这里插入图片描述

1.1.4. 安装Electron相关插件

（1）安装electron（主程序）

npm install electron -g

[或者使用淘宝镜像

cnpm install electron -g

（2）安装electron（打包）

npm install electron-packager -g

或者使用淘宝镜像

cnpm install electron-packager -g

（3）判断electron
检查electron是否安装成功，

electron -v

显示版本号则安装成功。
在这里插入图片描述

1.1.5. 解决npm下载过慢问题

安装淘宝的cnpm：
#在任意目录执行都可以
--global意思为安装到全局
npm install --global cnp

如果不想安装cnpm又想使用淘宝的服务器来下载包

npm install jquery --registry=https://registry.npm.taobao.org

但是每一次手动这样加参数很麻烦，所以我们可以把这个选项加入配置文件中：

npm config set registry https://registry.npm.taobao.org

1.1.6. 在安装electron时出现以下报错：

connect ETIMEDOUT 20.205.243.166:443
解决办法：

ping GitHub.com

如果能ping通，继续以下操作
更改electron安装源。

npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

安装成功

1.1.4. 解决npm下载过慢问题

1.2. 安装步骤

1.2.1. 创建或准备 UniApp 项目

如果你还没有 UniApp 项目，可以使用 HBuilderX 或者命令行创建一个新的项目；如果你已经有了一个 UniApp 项目，确保它已经包含了你需要的所有功能。
在这里插入图片描述

1.2.2. 安装 Electron 相关插件

在项目根目录下打开终端，安装 uni-app 的 Electron 插件：

npm install --save-dev @dcloudio/uni-electron

cnpm install electron -g // 安装electron（主程序）
cnpm install electron-packager -g // 安装electron-packager（打包用）

在这里插入图片描述

1.2.3. 修改manifest.json

（1）运行的基础路径修改为：./ 不然打包出来会出现白屏，读取不到，因为打包出来的h5默认加载地址为/static/
（2）去掉启用https协议: 不然会出现网络无法加载，去掉https不影响你请求后端的https协议。
在这里插入图片描述

1.2.4. H5打包

发行-网站-PC Web或手机H5(仅适用于uni-app)(H)
在这里插入图片描述

H5文件夹下新建package.json

npm init

在这里插入图片描述

1.4.6. H5文件夹下新建main.js

如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 ‘index.html’ 修改为你的网页首页名。
在这里插入图片描述
（1）方法一：加菜单

const {
   app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
 
function createWindow () {
   
  // Create the browser window.
  win = new BrowserWindow({
   width: 400, height: 700})
 
  // and load the index.html of the app.
  win.loadURL(url.format({
   
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 
  // Open the DevTools.
  // win.webContents.openDevTools()
 
  // Emitted when the window is closed.
  win.on('closed'