(四)Electron 把boostrap控件当做桌面控件用

来源：互联网发布：周杰伦才华知乎编辑：程序博客网时间：2024/06/05 22:54

在入口main.js文件中，通过electron.BrowserWindow创建一个窗口，然后加载一个html文件。

  mainWindow = new BrowserWindow({    frame:false,    width: 800,    height: 70});

frame 是否有边框。
width 窗口的宽。
height 窗口的高。

mainWindow.loadURL('file://' + __dirname + '/index2.html');

加载html文件。

mainWindow.setMenuBarVisibility(false);

setMenuBarVisibility 隐藏菜单栏。

让后这个html 就只包含了一个boostrap的进度条。
但是要注意一下，默认情况下，js的解释环境是node环境，这样呢可能会对一些第三方的库加载造成干扰，比如jquery，所以需要先进行一些如下清理:

    <script>        delete window.require;        delete window.exports;        delete window.module;    </script>

这段代码最好放到所有js文件加载之前。

主要代码：

main.js 中createWindow的代码 :

function createWindow () {  // Create the browser window.  mainWindow = new BrowserWindow({    frame:false,    width: 800,    height: 70});  mainWindow.loadURL('file://' + __dirname + '/index2.html');  mainWindow.setMenuBarVisibility(false);  // mainWindow.webContents.openDevTools();  mainWindow.on('closed', function() {    mainWindow = null;  });}

html的代码：

<!DOCTYPE html><html><head>    <script>        delete window.require;        delete window.exports;        delete window.module;    </script>    <meta charset="utf-8">    <title>test</title>    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">    <script src="bootstrap/js/jquery.js"></script>    <script src="bootstrap/js/bootstrap.min.js"></script></head><body><div class="progress" style="height: 30px;margin-top: 18px">    <div class="progress-bar" role="progressbar" aria-valuenow="60"         aria-valuemin="0" aria-valuemax="100" style="width: 0%;">        <span class="sr-only" style="position: relative">0% 完成</span>    </div></div><script>    var process = $('.progress-bar');    var text = $('.sr-only');    function setProcess(per) {        process.css({width:per+'%'});        text.text(per+'% 完成');    }    setTimeout(function () {        var per = 0;        setInterval(function () {            setProcess((per++)%100);        },200);    },3000)</script></body></html>

结果：

结语：
我的css水平有限，这只是一个思路供大家参考。

0 0