前端Electron户端解决方案

299 阅读2分钟

整体方案,先使用Electorn 打包成免安装版本的客户端软件,再使用Inset up 打包成可安装的window可以安装文件。

Electron 打包

main.js

主文件,网上一大把,就不贴了。

electron Store

electron store 解决方案

const Store = require('electron-store')

electron 启动本地前端静态server

let web = child_process.exec(
    `${process.cwd()}/node/node ${process.cwd()}/src/main/web.js `,
    (err, stdout, stderr) => {
      if (err) {
        stop_web().then(() => {
          start_web(resolve)
        })
      }
    }
  )
  web.stdout.on('data', dat => {
    log.info(dat)
    resolve(1)
  })

web.js

const express = require('express')
// 创建web服务器
const app = express()
// 指定启动服务器到哪个文件夹
app.use(express.static(process.cwd() + '/web/localhost/renderer'))
// 启动服务器监听80端口
app.listen(8888, res => {
  console.log('res')
})

可参考地址:github.com/Ericwyn/ele…

Inset up 打包 electron 变成客户端

打包文件参考

``

; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

#define MyAppName "PHengLEIWeb"
#define MyAppVersion "V1.15.3"
#define MyAppPublisher "PHengLEIWeb, Inc."
#define MyAppExeName "PHengLEIWeb.exe"
#define MyAppAssocName MyAppName + ""
#define MyAppAssocExt ".myp"
#define MyAppAssocKey StringChange(MyAppAssocName, " ", "") + MyAppAssocExt

[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={{C870F4C5-ACFC-41DC-8DB7-CBFCAE115DD0}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
DefaultDirName=C:\PHengLEIWeb
DisableDirPage=yes
ChangesAssociations=yes
DisableProgramGroupPage=yes
; Uncomment the following line to run in non administrative install mode (install for current user only.)
;PrivilegesRequired=lowest
OutputDir=C:\Users\WANGMING\Desktop\Phenglei_electron
OutputBaseFilename=PhengLeiWeb
SetupIconFile=E:\yuansuan_code\phenglei\frontend\public\favicon.ico
Compression=lzma
SolidCompression=yes
WizardStyle=modern


[Registry]
Root: HKLM; Subkey: "SYSTEM\CurrentControlSet\Control\Session Manager\Environment"; \
    ValueType: expandsz; ValueName: "Path"; ValueData: "{olddata};C:\PHengLEIWeb\server"; \
    Check: NeedsAddPath('C:\PHengLEIWeb\server')
Root: HKLM; Subkey: "SYSTEM\CurrentControlSet\Control\Session Manager\Environment"; \
    ValueType: expandsz; ValueName: "Path"; ValueData: "{olddata};C:\PHengLEIWeb\server\solver"; \
    Check: NeedsAddPath('C:\PHengLEIWeb\server\solver')
Root: HKLM; Subkey: "SYSTEM\CurrentControlSet\Control\Session Manager\Environment"; \
    ValueType: expandsz; ValueName: "Path"; ValueData: "{olddata};C:\PHengLEIWeb\node"; \
    Check: NeedsAddPath('C:\PHengLEIWeb\node')
[Languages]
Name: "english"; MessagesFile: "compiler:Default.isl"

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

[Files]
Source: "E:\yuansuan_code\phenglei\frontend\package\win-unpacked\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\yuansuan_code\phenglei\frontend\package\win-unpacked\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
; NOTE: Don't use "Flags: ignoreversion" on any shared system files

[Registry]
Root: HKA; Subkey: "Software\Classes\{#MyAppAssocExt}\OpenWithProgids"; ValueType: string; ValueName: "{#MyAppAssocKey}"; ValueData: ""; Flags: uninsdeletevalue
Root: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}"; ValueType: string; ValueName: ""; ValueData: "{#MyAppAssocName}"; Flags: uninsdeletekey
Root: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}\DefaultIcon"; ValueType: string; ValueName: ""; ValueData: "{app}\{#MyAppExeName},0"
Root: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}\shell\open\command"; ValueType: string; ValueName: ""; ValueData: """{app}\{#MyAppExeName}"" ""%1"""
Root: HKA; Subkey: "Software\Classes\Applications\{#MyAppExeName}\SupportedTypes"; ValueType: string; ValueName: ".myp"; ValueData: ""

[Icons]
Name: "{autoprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon

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

[Code]
function NeedsAddPath(Param: string): boolean;
var
  OrigPath: string;
begin
  if not RegQueryStringValue(HKEY_LOCAL_MACHINE,
    'SYSTEM\CurrentControlSet\Control\Session Manager\Environment',
    'Path', OrigPath)
  then begin
    Result := True;
    exit;
  end;
  { look for the path with leading and trailing semicolon }
  { Pos() returns 0 if not found }
  Result := Pos(';' + Param + ';', ';' + OrigPath + ';') = 0;
end;