上次我分享了HBullderX uniapp项目打包封装成exe电脑PC应用软件的教程,这次来一个更全面且简单的教程,把网址链接封装成win软件并且封装成单独的安装包。我还是用win11来做示例,这次不上图了太麻烦了。
一、配置一些所需的工具
安装nodejs,Electron和electron-packager的教程在这篇文章HBullderX uniapp项目打包封装成exe电脑PC应用软件_雪哥尔 (xulgr.com)看第一至第三步,和第七步的全局安装asar即可,这里不再写一遍了。
安装封包工具Inno Setup Compiler:https://pan.baidu.com/s/1mYvOwhQclldU8gu63706LQ?pwd=xgwo
二、Electron网址封包
新建一个文件夹,在里面新建一个package.json文件,代码如下:(自行修改成你自己的)
{
"name": "雪哥影视",
"appId": "com.xulgr.app",
"version": "1.0.6",
"description": "看你想看,懂你所懂!",
"main": "main.js",
"author": "雪哥动漫(xga.cc)",
"icon": "img/xga.ico",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^22.0.0"
}
}
再新建一个main.js文件,代码如下:(自行修改成你自己的)
// 官方文档:https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,
// window 会被自动地关闭
var mainWindow = null;
// 当所有窗口被关闭了,退出。
app.on('window-all-closed', function () {
// 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前
// 应用会保持活动状态
if (process.platform != 'darwin') {
app.quit();
}
});
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function () {
// 创建浏览器窗口,可自定义默认打开宽高
mainWindow = new BrowserWindow({
width: 1400,
height: 750,
frame: false, //窗口边框,false无边框,true有边框
titleBarStyle: 'hidden', //窗口框样式
titleBarOverlay: {
color: '#fa2c36', //窗口主色调
symbolColor: '#ffffff' //窗口选择色调
}
});
// 加载网址
mainWindow.loadURL("http://app.xulgr.com")
// 打开开发工具
// mainWindow.openDevTools();
// 当 window 被关闭,这个事件会被发出
mainWindow.on('closed', function () {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 但这次不是。
mainWindow = null;
});
});
再新建一个img文件夹,里面放入你的应用图标(必须是ico文件,且大小256*256的),这里我放的xga.ico。
然后在目录空白处右击,选择在终端中打开,执行下面代码:(复制后在终端右击即可粘贴)
electron-packager . 雪哥影视 --win --out 雪哥影视 --arch=x64 --electron-version 22.0.0 --icon=img/xga.ico --asar --overwrite --ignore=node_modules
上面代码的解释:
electron-packager . 你的应用名 –win –out 输入文件夹名 –arch=x64 –electron-version 你的electron版本号 –icon=你的应用图标绝对路径 –asar –overwrite –ignore=node_modules
*你的electron版本号可执行electron -v查看
完成后可在目录新增的雪哥影视
文件夹查看。
三、封装成一个安装文件
运行Inno Setup Compiler程序,过程直接看图,不知道什么意思的自行翻译,打英文太难受了:
封装完成后在你选的输出目录里可查看到。
*我自己测试时发现如果直接发放给用户在浏览器上直接下载会被浏览器拦截报毒删除,看了网上的也找不到误报的原因,可能是ico图标的问题。
四、使用JS判断网址是在浏览器访问还是你封装的win应用访问的进行显示和跳转
var XgaWinExe = navigator.userAgent.toLowerCase(); //electron项目
if (XgaWinExe.indexOf(' electron/') > -1){
//alert('是electron项目')
//正常访问
} else {
//alert('不是electron项目')
window.location.href = "http://xulgr.com/"; //跳转
}