Electron启动页加载及断网检测提示

最新推荐文章于 2025-03-05 13:47:45 发布

louisking111

最新推荐文章于 2025-03-05 13:47:45 发布

阅读量2.5k

点赞数 1

分类专栏： Electron

本文链接：https://blog.youkuaiyun.com/louisking111/article/details/108242933

版权

本文介绍了一个 Electron 应用在面临移动热点数据下加载缓慢的问题时，如何添加启动页以改善用户体验，并实现断网时自动切换到本地提示页的功能。项目基于 electron-webpack-quick-start 脚手架，主要涉及主线程 `main/index.js` 中的代码修改，包括断网刷新界面的函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目背景：打包好的应用在移动热点数据下打开很慢（正常网络没问题，优化方案未知，欢迎评论），会有很长时间白屏，因此想加一个启动页，等网站渲染好了再显示，同时添加断网检测，网站不通时跳到本地断网提示页。

项目使用的脚手架是electron-webpack-quick-start，正常加载的网址是远程网址

主线程main/index.js中的部分代码

const startTime=new Date();
const waitTime=6;

// 断网检测 
const isReachable = require('is-reachable');

const testNet= function(){
  return new Promise(function(resolve,reject){
(async () => {

  net_status=await isReachable('baid.com:443');
  resolve(net_status);
})();
  });
}
testNet();

const createWindow = (callback) => {
  mainWindow = new BrowserWindow({
    fullscreen:true,//是否全屏
    skipTaskbar:false,//是否最小化的时候在任务栏显示
    kiosk:true,
    show:false,
    autoHideMenuBar:true,
    enableLargerThanScreen:false,
    titleBarStyle:'hidden',
    title:"XXXXX",
    allowRunningInsecureContent :true,
    allowDisplayingInsecureContent