Windows把你的网站封装成一个桌面应用并封装成单独一个exe安装包，附只在封装应用中可访问，浏览器禁止访问代码

上次我分享了HBullderX uniapp项目打包封装成exe电脑PC应用软件的教程，这次来一个更全面且简单的教程，把网址链接封装成win软件并且封装成单独的安装包。我还是用win11来做示例，这次不上图了太麻烦了。

 

一、配置封装环境

安装Node.js：官方下载 | 网盘下载

安装Electron（全局安装）：

1. 先切换为淘宝镜像地址

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

2. 使用cnpm安装

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

3. 全局安装electron

   cnpm install -g electron

4. 查看electron版本

   npx electron -v

5. 全局安装electron-packager

   cnpm install electron-packager -g

6. 注意：windows11如果报错，先看看系统设置>隐私和安全性>开发者选项>开发人员模式 有没有开启，以及最后关掉病毒防护功能先。

 

安装封包工具：Inno Setup Compiler

 

二、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。

 

封装命令：

在你的项目文件夹内执行命令，有以下几种方法：

1. 直接在当前文件夹地址栏内输入cmd回车即可呼出终端并自动cd到当前目录
2. win+R打开运行终端，输入cd 项目完成目录路径回车即可（cd后是有空格的）
3. 如果你是win11系统，直接在项目文件夹内空白处鼠标右击一下，选择在终端中打开即可（需要注意只能用命令提示符来执行下面的命令，不要用PowerShell来执行）

electron-packager . 应用名 --win --out 输出文件夹名 --arch=x64 --electron-version 24.0.0 --icon=img/xga.ico --asar --overwrite --ignore=node_modules

上面封装命令的释义：

–electron-version 你的electron版本号

–icon=你的应用图标绝对路径

完成后可在目录新增的输出文件夹名的文件夹查看。

 

三、封装成一个安装文件

运行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 = "https://xulgr.com/"; //跳转
}