黑龙江省建设教育协会网站,大学生网站设计作品成品代码,给国外网站做流量,国网思路
创建loading页创建loading进程主进程之前加载loading进程loading进程隐藏销毁#xff0c;然后进入主进程 思路AI轻松解决 1. 在index.html同级创建一个loading.html
样式是找AI要的#xff0c;假的进度条#xff0c;按照大概的加载时间给duration #xff0c;最后的…思路
创建loading页创建loading进程主进程之前加载loading进程loading进程隐藏销毁然后进入主进程 思路AI轻松解决 1. 在index.html同级创建一个loading.html
样式是找AI要的假的进度条按照大概的加载时间给duration 最后的加载完成需要从主进程中给消息然后直接到100%。
!doctype html
html langzh-CNheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlexxx软件启动页/titlestylebody {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f5f7fa;font-family: Arial, sans-serif;}.loader-container {width: 600px;height: 400px;background-color: white;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 40px;box-sizing: border-box;}.loader-title {font-size: 24px;color: #333;margin-bottom: 30px;font-weight: 500;}.progress-container {width: 80%;height: 8px;background-color: #e0e5ec;border-radius: 4px;margin-bottom: 30px;overflow: hidden;}.progress-bar {height: 100%;width: 0%;background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);border-radius: 4px;transition: width 0.3s ease;}.percentage {font-size: 36px;font-weight: 300;color: #4facfe;margin-bottom: 20px;}.loading-text {font-size: 16px;color: #888;text-align: center;line-height: 1.5;}.spinner {width: 50px;height: 50px;border: 4px solid rgba(79, 172, 254, 0.2);border-top: 4px solid #4facfe;border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 30px;display: none;}keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}/style/headbodydiv classloader-containerdiv classspinner idspinner/divdiv classloader-title正在加载内容.../divdiv classpercentage idpercentage0%/divdiv classprogress-containerdiv classprogress-bar idprogressBar/div/divdiv classloading-text idloadingText初始化系统资源请稍候.../div/divscriptconst progressBar document.getElementById(progressBar)const percentage document.getElementById(percentage)const loadingText document.getElementById(loadingText)const spinner document.getElementById(spinner)// 显示旋转动画spinner.style.display blockloadingText.textContent 正在加载...// 分阶段加载动画function animateProgress() {let progress 0const targetProgress 100const duration 8000 // 总动画时长2秒const startTime Date.now()function update() {const elapsed Date.now() - startTimeprogress Math.min((elapsed / duration) * 100, targetProgress)progressBar.style.width ${progress}%percentage.textContent ${Math.floor(progress)}%// 更新加载状态文本if (progress 30) {loadingText.textContent 初始化系统资源...} else if (progress 70) {loadingText.textContent 加载核心模块...} else {loadingText.textContent 最终处理中...}if (progress targetProgress) {requestAnimationFrame(update)} else {loadingComplete()}}requestAnimationFrame(update)}animateProgress()function loadingComplete() {loadingText.textContent 加载完成即将进入系统...spinner.style.display none// 添加完成动画progressBar.style.transition all 0.5s easeprogressBar.style.width 100%percentage.textContent 100%}// 监听主进程消息window.api.onLoadingComplete(() {// 当API完成时立即完成剩余动画loadingComplete()})/script/body
/html2. 创建一个同主进程一样的loading进程
需要preload往loading.html传递消息 在这里我需要loading的时候调通一个接口才能进入主进程所以用promise返回主进程窗口
function showLoading(cb: () BrowserWindow): PromiseBrowserWindow {return new Promise((resolve) {let win: BrowserWindow | null nullloadingWindow new BrowserWindow({show: false,frame: false, // 无边框窗口、工具栏等只包含网页内容width: 600,height: 400,resizable: false,transparent: false,icon: join(__dirname, ../../resources/icon.png), // Windows/LinuxwebPreferences: {preload: join(__dirname, ../preload/index.js),sandbox: false}})/*** description 接口调通才创建主进程*/loadingWindow.once(show, async () {try {const response await getHealth()if (response.data.code 200) {// 启动页完成loadingWindow?.webContents.send(loading-complete)win cb()resolve(win)}} catch (error: any) {loadingWindow?.destroy()}})if (!app.isPackaged process.env[ELECTRON_RENDERER_URL]) {loadingWindow.loadURL(${process.env[ELECTRON_RENDERER_URL]}/loading.html)} else {loadingWindow.loadFile(join(__dirname, ../renderer/loading.html))}loadingWindow.show()})
}3. 创建一个消息通信
onLoadingComplete: (callback) ipcRenderer.once(loading-complete, callback)4. 在主进程启动之前调用loading进程进入加载页然后销毁加载页进入主进程
loading进程里面返回主进程 app.whenReady().then(async () {//开发用showLoading(createWindow).then((res: BrowserWindow) {mainWindow res/*** description 修改文件后 检查保存文件*/checkSaveFile(mainWindow)/*** description 直接关闭窗口*/closeWindow(mainWindow)})})先隐藏在销毁然后展示主进程 mainWindow.on(ready-to-show, () {//隐藏启动页if (loadingWindow !loadingWindow?.isDestroyed()) {loadingWindow?.hide()loadingWindow?.removeAllListeners()loadingWindow?.destroy()}mainWindow.show()})实现效果
加载页 进入系统 注意打包时候需要把loading.html打包进去
这里我用的electron-vite
// electron.vite.config.ts
export default defineConfig({main: {},preload: {},renderer: {build: {rollupOptions: {input: {main: resolve(__dirname, src/renderer/index.html),loading: resolve(__dirname, src/renderer/loading.html)}}},}
})
