Soviby/electron-app-c1-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初版启动器界面

Browse Source
This commit is contained in:
biaosong 2024-10-08 18:38:51 +08:00
parent d14162bf74
commit b0db3bb0e7
11 changed files with 126 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -2,12 +2,25 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/logo.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<title>龙石战争-安卓专用模拟器</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
<style>
html, body #app{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
overflow: hidden;
}
</style>

18
plugins/vite.electron.build.ts
View File

@ -15,6 +15,15 @@ const BuildBackground = ()=>{
target: 'node12',
external:['electron']
})
require('esbuild').buildSync({
entryPoints: ['src/AfterPack.ts'],
bundle: true,
outfile: 'tool/AfterPack.js',
platform: 'node',
target: 'node12',
external:['electron']
})
}
// 打包 需要先等vite打完包之后就有index.html 在执行electron-builder打包
@ -39,18 +48,15 @@ export const ElectronBuildPlugin = (): Plugin => {
appId: 'com.c1.game.launcher',
productName: 'c1-game-launcher',
win: {
icon: path.resolve(process.cwd(), 'src/assets/test-icon.ico'), // 指定图标文件路径
icon: path.resolve(process.cwd(), 'src/assets/app/logo.ico'), // 指定图标文件路径
target: [
{
target: 'nsis', // 安装模式: nsis 单文件启动: portable
target: 'portable', // 安装模式: nsis 单文件启动: portable
arch: ['x64']
}
]
},
nsis: {
oneClick: false,
allowToChangeInstallationDirectory: true
}
afterPack: path.resolve(process.cwd(), 'tool/afterPack.js')
}
})
.then(() => {

18
src/AfterPack.ts Normal file
View File

@ -0,0 +1,18 @@
import * as fs from 'fs';
import * as path from 'path';
import type { AfterPackContext } from 'electron-builder';
export default async function (context: AfterPackContext) {
const localeDir = path.join(context.appOutDir, 'locales');
fs.readdir(localeDir, (err, files) => {
if (err) {
console.error('Error reading locales directory:', err);
return;
}
files.forEach(file => {
if (!file.includes('zh-CN')) {
fs.unlinkSync(path.join(localeDir, file));
}
});
});
}

33
src/App.vue
View File

@ -1,23 +1,40 @@
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<!-- <img alt="Vue logo" class="logo" src="./assets/app/logo.ico" width="125" height="125" /> -->
<!-- <div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</div> -->
<!-- <h1> Test !!!!</h1> -->
</header>
<main>
<TheWelcome />
<img src="./assets/app/ziyuandi2.jpg" class="background"/>
<img src="./assets/app/qidonganniu.png" class="button" onclick="handleButtonClick()">
</main>
</template>
<style scoped>
.background {
position: absolute;
width: 100%;
height: 100%;
object-fit: fill; /* 使背景图片填满窗口，不保持比例 */
}
.button {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
width: 197px; /* 根据需要调整按钮图片的大小 */
height: 50px;
cursor: pointer;
}
</style>
<!-- <style scoped>
header {
line-height: 1.5;
}
@ -44,4 +61,4 @@ header {
flex-wrap: wrap;
}
}
</style>
</style> -->

BIN
src/assets/app/logo.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
src/assets/app/qidonganniu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/app/ziyuandi2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
src/assets/test-icon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 297 KiB

15
src/background.ts
View File

@ -1,9 +1,6 @@
// electron 主进程文件
import { app, BrowserWindow } from 'electron'
import log from './logger'
import AppUpdater from './electron_updater'
let appUpdater: AppUpdater
process.on('unhandledRejection', (reason, promise) => {
log.error('Unhandled Rejection at:', promise, 'reason:', reason);
@ -15,24 +12,24 @@ process.on('uncaughtException', (error) => {
app.whenReady().then(() => {
const win = new BrowserWindow({
height: 600,
width: 800,
height: 550,
width: 852,
webPreferences: {
nodeIntegration: true, // 可以在渲染进程汇总使用node的api，为了安全默认false
contextIsolation: false, // 关闭渲染进程的沙箱
webSecurity: false, // 关闭跨域检测
}
},
autoHideMenuBar: true,
icon: 'src/assets/app/logo.ico'
})
// win.webContents.openDevTools() // 开发环境打开控制台
win.webContents.openDevTools() // 开发环境打开控制台
if (process.argv[2]) // 开发环境
{
win.loadURL(process.argv[2])
}
else // 生产环境
{
// 自动更新
appUpdater = new AppUpdater()
win.loadFile('index.html')
// 这里换成静态html后，即可实现ui热更新
// win.loadURL('http://49.235.154.178:20081/index.html')

23
src/electron_updater.ts
View File

@ -1,23 +0,0 @@
import { NsisUpdater } from "electron-updater"
import { AllPublishOptions } from "builder-util-runtime"
import log from './logger'
// Or MacUpdater, AppImageUpdater
export default class AppUpdater {
constructor() {
const server = 'http://localhost:8080'
const feed = `${server}/updates/${process.platform}`
const options = {
requestHeaders: {
// Any request headers to include here
},
provider: 'generic',
url: feed
} as AllPublishOptions
const autoUpdater = new NsisUpdater(options)
autoUpdater.logger = log
autoUpdater.checkForUpdatesAndNotify()
}
}

50
tool/AfterPack.js Normal file
View File

@ -0,0 +1,50 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/AfterPack.ts
var AfterPack_exports = {};
__export(AfterPack_exports, {
default: () => AfterPack_default
});
module.exports = __toCommonJS(AfterPack_exports);
var fs = __toESM(require("fs"));
var path = __toESM(require("path"));
async function AfterPack_default(context) {
const localeDir = path.join(context.appOutDir, "locales");
fs.readdir(localeDir, (err, files) => {
if (err) {
console.error("Error reading locales directory:", err);
return;
}
files.forEach((file) => {
if (!file.includes("zh-CN")) {
fs.unlinkSync(path.join(localeDir, file));
}
});
});
}