Skip to content

让你可以自定义启动页,用来优雅的加载展示你的 electron 应用。

Notifications You must be signed in to change notification settings

acmajia/electron-custom-launching

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

electron-launch-page

让你可以自定义启动页,用来优雅的加载展示你的 electron 应用。 *由于原作者处于不更新状态,修复了一些新版electron.js使用过程中遇到的bug。

Demo

/demo 文件夹下包含一个完整的使用 electron-launch-page 的示例。

launch1.html: 不透明loading avatar

launch2.html: 不透明loading,使用进度 avatar

launch3.html: 透明的loading avatar

Installation

npm install electron-custom-launching

Usage

主进程:

const Elp = require('electron-launch-page');
Elp.main.start({
    //主窗口 BrowserWindow
    mainWin,
    //自定义的启动页
    launchUrl: path/to/your-launch.html,
    //启动窗口大小,根据 your-launch.html 配置
    width: 480,
    height: 320
});

渲染进程中涉及2个页面:

  1. 在自定义的启动页里,如果需要加进度条的交互,参考如下代码:

     const Elp = require('electron-custom-launching');
     Elp.render.launch({
         onProgress(progress) {
             processBar.style.width = progress + '%';
         }
     });
    

    如果启动页只展示 loading 效果,则可以不用添加与 electron-launch-page 相关的代码。

  2. 在应用的主页里,当页面资源加载完成调用 Elp.render.ready()

     const Elp = require('electron-launch-page');
     //模拟页面加载耗时2秒
     setTimeout(()=> {
         Elp.render.ready();
     }, 2000);
    

Method & Options

Elp.main.start(options)

  • mainWin [必须]

    Object: 主窗口 BrowserWindow

    在使用 electron-launch-page 的时候,创建 mainWin 应该启动参数 show: false

  • launchUrl [必须]

    String: 自定义启动页面路径 file path

  • transparent [可选]

    Boolean: 是否启动透明窗口,用法同 BrowserWindow 的 transparent

  • width [可选]

    Number: 启动窗口的宽度

  • height [可选]

    Number: 启动窗口的高度

Elp.render.launch(options)

  • onProgress(progress) [可选]

    Function: 启动进度,progress 是 0~100 数值

  • speed [可选]

    String: 'slow'|'normal'[默认]|'fast' 可结合实际情况选用

当你的启动界面不需要进度条交互时,Elp.render.launch() 可不传参数。

Elp.render.ready()

用于主窗口资源(本地、远程)加载完成,页面可完全展示时调用。

About

让你可以自定义启动页,用来优雅的加载展示你的 electron 应用。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%