HBullderX uniapp项目打包封装成exe电脑PC应用软件

直接用域名打包其实没什么卵用（还不如直接在浏览器访问），所以这次琢磨了一下不用域名，利用uniapp的H5项目打包exe。

 

第一步：安装nodejs

【下载LTS版】

官网下载：Node.js (nodejs.org)

百度网盘：https://pan.baidu.com/s/1nSFfoK47iYB4qWKyey0ZgA?pwd=xgwo

下载后直接运行即可安装。

安装完成后，我们需要确认 Node.js 是不是可以正常工作。可以通过在命令行工具中输入如下命令来检测是否安装成功（win+R输入cmd进入命令窗口）：

node -v
npm -v

 

第二步：安装Electron

首先把npm仓切换到国内淘宝仓库

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后全局安装Electron即可

npm install electron -g

检测是否安装成功，能看到版本即可，记住这个版本号，我的是v22.0.0

electron -v

 

第三步：安装打包工具electron-packager

npm install electron-packager -g

 

第四步：修改uniapp项目WEB运行路径并编译打包

打开HBullder X在你的项目打开manifest.json，打开Web配置，将运行的基础路径修改为./并且勾选启用https协议

然后点击发行，网站-PCWeb或手机H5，填写网站标题，网站域名留空不用填，然后点击发行

编译打包好后可在底部控制台查看导出H5的路径，点击打开进入项目编译打包好的H5目录

 

第五步：配置Electron打包

在编译打包好的H5目录下新建两个文件（在查看-显示中打开文件扩展名功能，再新建文本，命名就可改扩展名）

package.json
main.js

package.json编辑代码：

{
  "name": "雪哥影视", //程序名
  "version": "1.0.0", //程序版本
  "description": "看你想看，懂你所懂！", //程序描述
  "main": "main.js", //main路径
  "author": "xga.cc", //开发者
  "icon": "icon.ico", //ico路径
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^19.0.1" //electron版本号
  }
}

main.js编辑代码：

// 官方文档：https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
const {app, BrowserView, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 保留窗口对象的全局引用，如果没有，当JavaScript对象被垃圾收集时，窗口将自动关闭。
let win

function createWindow () {
	// 创建浏览器窗口，可自定义默认打开宽高
	win = new BrowserWindow({
		width: 500, 
		height: 1200,
		
		//frame: true, //窗口边框，false无边框，true有边框
		titleBarStyle: 'hidden', //窗口框样式
		titleBarOverlay: {
			color: '#161827', //窗口主色调
			symbolColor: '#2b3242' //窗口选择色调
		}
	  
	})
	


  // 并加载应用程序的index.html。
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    //slashes: true
	slashes: false
  }))

  // 打开DevTools
  // win.webContents.openDevTools()

  // 窗口关闭时发出
  win.on('closed', () => {
    // 取消引用窗口对象，如果应用程序支持多窗口，通常会将窗口存储在数组中，此时应该删除相应的元素
    win = null
  })
}

//当Electron完成初始化并准备创建浏览器窗口时，将调用此方法。某些API只能在发生此事件后使用。
app.on('ready', createWindow)

// 关闭窗口完全退出程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

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


//在此文件中，您可以包含应用程序的其他特定主流程代码。您也可以将它们放在单独的文件中，并在此处要求它们

 

第六步：用electron-packager打包项目

在编译打包好的H5目录下右击，点击在终端中打开（我是win11直接鼠标右击即可，其他版本可能是shift+右击，或者在当前路径栏输入cmd回车即可，也可以直接在命令窗口cd你的H5目录路径）

输入打包命令：

electron-packager . 雪哥影视 --win --out 雪哥影视 --arch=x64 --electron-version 18.0.1 --overwrite --ignore=node_modules

上面命令的解释：

. 雪哥影视：打包后exe的文件名
-out 雪哥影视：打包后的输出文件目录名
--arch=x64：你的win系统数位（64位）
--electron-version 18.0.1：electron-version的版本号（参照上面第二步）推荐用低于你的electron-version的版号

打包完成后会新增一个雪哥影视文件夹（上面命令-out 雪哥影视 同名），进入文件夹可找到雪哥影视.exe程序（上面命令. 雪哥影视 同名），双击可正常运行即可。

此时还没完成，因为你会发现在打包好的目录resources/app中是你的H5源码，为了不暴露出来，咱们继续下一步操作。

 

第七步：源码目录使用asar打包

win+R输入cmd打开终端，输入asar全局安装命令

npm i -g asar

然后回到上面electron-packager打包好的目录，进入resources文件夹，打开此目录终端（在当前路径栏输入cmd回车即可），输入asar打包命令

asar pack ./app app.asar

然后就得到一个app.asar文件，最后把app文件夹整个删除即可。