直接用域名打包其实没什么卵用(还不如直接在浏览器访问),所以这次琢磨了一下不用域名,利用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文件夹整个删除即可。

发表回复

后才能评论