WEB打包为桌面程序_浮叶蓝空的博客

# WEB打包为桌面程序教程

> github上有一个开源使用Electron开发项目nativefier，可以将一个网址封为桌面程序，下面记一下使用方式

### 相关文档
#### 1. Electron文档 [https://www.electronjs.org/docs/latest/tutorial/tray](https://www.electronjs.org/docs/latest/tutorial/tray "https://www.electronjs.org/docs/latest/tutorial/tray")
#### 2. Nativefier文档 [https://github.com/nativefier/nativefier/blob/master/API.md](https://github.com/nativefier/nativefier/blob/master/API.md "https://github.com/nativefier/nativefier/blob/master/API.md")

## 开始打包

## 1. 安装node.js
下载地址：http://nodejs.cn/download/

## 2. 安装nativefier
任意地方打开命令窗口：npm install nativefier -g

## 3.打包命令：
在任意目录中打开命令窗口，执行以下命令，先看下方可选参数！
```
nativefier --name "mynote" "http://www.milinger.com" --icon "E:\mynote.ico" --tray --single-instance --maximize
```
### 命令参数
- [程序名称] --name "mynote"
- [WEB网址] "https://www.milinger.com"
- [图标] --icon "E:\DEV\mynote.ico" 
- [单实例] --single-instance
- [禁用DeV工具] --disable-dev-tools
- [全屏] --full-screen
- [最大化] --maximize
- [隐藏窗口框架] --hide-window-frame
- [忽略Web安全错误] --insecure
- [忽略证书错误] --ignore-certificate
- [显示菜单栏] -m, --show-menu-bar
- [宽度] --width <value>
- [高度] --height <value>
- [最小宽度] --min-width <value>
- [最小高度] --min-height <value>
- [最大宽度] --max-width <value>
- [最大高度] --max-height <value>
- [版本] --app-version <value>
- [禁用上下文菜单] --disable-context-menu
- [开启托盘] --tray
- [启动时只在托盘显示] --tray start-in-tray
- [总是在上面] --always-on-top
- [文件下载选项] --file-download-options '{\"saveAs\": true}'
- [支持cookie及缓存] --portable
- [禁止外部网站] --internal-urls " .*? "
- [应用程序版权] --app-copyright <value>
- [忽略安全更新提示] --disable-old-build-warning-yesiknowitisinsecure

### 示例
```
nativefier.cmd --name "fuyelk的博客" "https://www.fuyelk.com" --icon "D:/nativefier/icon.ico" --tray --single-instance --disable-dev-tools --ignore-certificate --disable-context-menu --file-download-options '{\"saveAs\":true}' --protable --disable-old-build-warning-yesiknowitisinsecure --internal-urls " .*? " --insecure --app-version 1.0.1
```

## 问题解决
- 类似electron-v5.0.10-win32-x64.zip这个资源下载不动，需要手动下载，放到"C:\当前用户\AppData\Local\electron\Cache\”目录中（该目录默认隐藏了），重新运行打包命令
- 资源库地址：https://npm.taobao.org/mirrors/electron/
- 该资源下载地址：https://npm.taobao.org/mirrors/electron/5.0.10/electron-v5.0.10-win32-x64.zip

## 可能用到的代码
##### 页面内发起系统通知：
```
/**
 * @param title '消息通知'
 * @param content '你有一条新消息，打开软件查看'
 */
function sysNotice(title,content) {
	const notification = {
		title: title,
		body: content,
		href: '/',
		icon: '/static/index/img/navlogo.png',
	};
	const myNotification = new window.Notification(notification.title, notification);

// 当通知被点击时在系统中打开
	myNotification.onclick= function(){
		self.location = notification.href;
	}
}
```
### 题外话：因为Nativefier是用Electron开发的，所以可以按Electron的方式对程序进行自定义，下面举个栗子

####修改系统托盘退出按钮的功能：

主程序文件是`resources/app/lib/main.js`，整个文件是个匿名函数，函数体里面有一个变量 **\_\_webpack\_modules\___** ，该变量的值是一个巨大的数组，每个值又是一个匿名函数，长这个样子

```JS
/* 69 */
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {}),
```
托盘在第69个值，可以搜索  **/\* 69 \*/** ，托盘菜单默认是这样的

```JS
const contextMenu = electron_1.Menu.buildFromTemplate([
    {
        label: options.name,
        click: onClick,
    },
    {
        label: 'Quit',
        click: () => electron_1.app.exit(0),
    },
]);
```

"Quit" 可以改个名字，比如叫 "退出"，click 执行的默认是退出程序，可以改为我们想执行的内容，比如执行 **customQuit**

在这个 **customQuit** 里面让他调用 **Stop.exe** 程序，这里可以学习一下 **/\* 71 \*/** 号值里面的 **run** 方法照抄一下就是

```JS
const customQuit = ()=> {
    let path = __webpack_require__(14);
    let app = (__webpack_require__(17).app);
    var customProgram = path.resolve(path.dirname(process.execPath), '.', 'Stop.exe');
    (__webpack_require__(72).spawn)(customProgram, [''], {detached: true}).on('close', app.quit);
};
const contextMenu = electron_1.Menu.buildFromTemplate([
    {
        label: options.name,
        click: onClick,
    },
    {
        label: '退出程序',
        click: customQuit,
    },
]);
```

### 题外话结束
---

# 封装EXE程序为安装包
## 1. 下载Inno Setup程序
- 官网：http://www.jrsoftware.org/isinfo.php
- 6.0.3版本下载地址：http://files.jrsoftware.org/is/6/innosetup-6.0.3.exe
- 程序图标![1.png](https://www.milinger.com/image/201912/nwjAvVo5jwIP17Kg.png)

## 2. Inno Setup程序安装过程略
## 3. 封装过程很简单，下面是示例
```
; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

#define MyAppName "我的APP"
#define MyAppVersion "1.0.3"
#define MyAppPublisher "fuyelk"
#define MyAppExeName "我的APP.exe"

[Setup]
; NOTE: The value of AppId uniquely identifies this application. Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
; 注意  ↓↓  下面这个AppID需要更换一下  ↓↓ 注意
AppId={{DE55A89E-A4A7-4E17-B225-xxxxxxxxxx}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
DefaultDirName={autopf}\clothing_management
DisableProgramGroupPage=yes
LicenseFile=D:\Projects\release\app\License.txt
InfoBeforeFile=D:\Projects\release\app\before_install.txt
InfoAfterFile=D:\Projects\release\app\after_install.txt
; Remove the following line to run in administrative install mode (install for all users.)
PrivilegesRequired=lowest
OutputDir=D:\Projects\setup\beizhuang
OutputBaseFilename={#MyAppName} v{#MyAppVersion}
SetupIconFile=D:\Projects\release\app\icon.ico
Compression=lzma
SolidCompression=yes
WizardStyle=modern

[Languages]
Name: "chinesesimplified"; MessagesFile: "compiler:Languages\ChineseSimplified.isl"

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked

[Files]
Source: "D:\Projects\release\app\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversion
Source: "D:\Projects\release\app\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
; NOTE: Don not use "Flags: ignoreversion" on any shared system files

[Icons]
Name: "{autoprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
;下面是开机自启，实现了将快捷方式放到 C:\Users\fuyelk\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup目录
Name: "{autostartup}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"

[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent

[UninstallRun]
; 下面是卸载时先执行的程序，非必填项，如有特殊需求可以用
Filename: "{app}\Stop.exe";RunOnceId: "StopService"

[code]
procedure CurUninstallStepChanged(CurUninstallStep: TUninstallStep);
begin
    if CurUninstallStep = usDone then
    begin
       //删除 {app} 文件夹及其中所有文件
    DelTree(ExpandConstant('{app}'), True, True, True);
    end;
end;

```
## 4. 封装完成就得到了exe程序

指定项目目录，提取代码

微信双开

1人点赞