Electron 结合WEB项目制作桌面APP之二 ---- electron与web的结合开发体验

关注

原创最新推荐文章于 2026-07-01 09:57:36 发布 5.5k 阅读 AI 写同款· GEO 优化 ›

【Electron】使用Electron将web项目打包成桌面应用程序执行打包命令： electron-packager . app --win --out sysApp --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_modules 阅读详情

引言

开始尝试用electron搭建了一个hello world，体验还是挺不错的，对于一个web开发者来说，能把自己的开发成果做成一个桌面app，那将是一步巨大的跨越
藉此，再深入学习后，开始了第二个“hello world”

目标

将百度首页做成我的app首页
做一个简易的视频播放器

千里之行始于足下，electron还没完全学会，不妨碍我去使用它

下载electron官方推荐的快速模板: 链接

    git clone https://github.com/electron/electron-quick-start.git

    cd electron-quick-start
    # 安装依赖
    yarn install
    # 安装打包工具
    yarn add electron-packager -D
    # 测试下
    yarn run start
    # 成功跑起来了，并且出现了官方的默认首页文本

开始折腾这个快速模板

修改package.json，将模板变成我们自己的项目

    // 修改项目名称
    "name": "百度",
    // 在script中添加打包命令
    "scripts": {
        "start": "electron .",
        "package": "electron-packager . baidu --platform=win32 --arch=x64 --out=./dist --asar --app-version=2.0.1 --icon=lte_logo.ico --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\""
    },

百度一下啦~

第一种方案，修改main.js，将windows指向的files协议修改为https协议，将文件修改为www.baidu.com

    mainWindow.loadURL(url.format({
        // pathname: path.join(__dirname, 'index.html'),
        // protocol: 'file:',
        pathname: '//www.baidu.com',
        protocol: 'https:',
        slashes: true
    }))

测试一下：

打包一下，打包后的文件自动存放到dist文件夹
```
    yarn run package
```
至此，百度首页成功被嵌入到了electronApp中

同上面的方法，我们来制作自己的视频播放器

修改index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>video player</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-family: "Microsoft YaHei";
        }
        .clearfix:before, .clearfix:after {
            display: table;
            content: '';
        }
        .clearfix:after {
            clear: both;
        }
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        /* 修改input的样式 start */
        input {
            /* 去掉默认样式 */
            -web-kit-appearance:none;
            -moz-appearance: none;
            /* 边框 圆角 高度 字体 颜色 */
            font-size:1.0em;
            height:2.7em;
            border-radius:4px;
            border:1px solid #c8cccf;
            color:#c7cace;
            /* 去掉输入框的轮廓 */
            outline:0;
        }
        /* 修改input的样式 end */
        .video-playper-body {
            width: 100%;
            height: 100%;
            background-color: #111;
            position: relative;
        }
        .video-window {
            width: 100%;
            height: 100%;
        }
        .video-list {
            width: 175px;
            height: 100%;
            background-color: #20A0ff;
            opacity: .7;
            position: absolute;
            right: 0;
            top: 0;
        }
        .video-item {
            line-height: 1.6em;
            margin-top: .3em;
            margin-left: 1em;
            cursor: pointer;
            list-style: none;
        }
        .list-close, .list-open {
            width: 1.2em;
            height: 2em;
            line-height: 2em;
            position: absolute;
            font-size: 1.5em;
            color: #20a0ff;
            font-weight: bold;
            top: 45%;
            right: 0;
            cursor: pointer;
        }
        .list-close {
            right: 165px;
        }
        .hidden-list {
            /* display: none; */
            visibility: hidden;
        }
        .sreach-video {
            width: 100%;
        }
        </style>
    </head>
    <body class="video-playper-body clearfix">
        <video id="videoWindow" autoplay controls class="video-window"></video>
        <ur class="video-list" id="videoList">
        <input type="text" id="sreachVideo" class="sreach-video" onkeyup="sreach()" placeholder="请输入影片名或关键字">
        <!-- li -->
        </ur>
        <div onclick="openOrClose()" id="coBtn" class="list-close list-open">》</div>
        <script src="./ajax.js"></script>
        <script type="text/javascript">
        let videoWindow = document.getElementById('videoWindow')
        videoWindow.src = 'http://example.com?video=2423313213123'  // 示例视频

        console.log('Ajax: ', Ajax)
        // init
        window.onload = function () {
            initVideoList()
        }

        function initVideoList() {
            Ajax.get('./video.json', (res) => {
            console.log('res: ', JSON.parse(res))
            JSON.parse(res).map((v) => {
                let li = document.createElement('li')
                li.className = 'video-item'
                li.setAttribute('onclick', `getVideoItem('${v.desc}')`)
                // li.onclick = `getVideoItem(${v.desc})`
                li.innerHTML = v.desc
                document.getElementById('videoList').appendChild(li)
            })
            })
        }

        function getVideoItem(n) {
            Ajax.get('./video.json', (res) => {
            JSON.parse(res).map((v) => {
                if (n == v.desc) {
                videoWindow.src = v.url
                console.log(v.url)
                }
            })
            })
        }

        // 打开或者关闭列表
        function openOrClose() {
            let coBtn = document.getElementById('coBtn')
            // coBtn.className = 
            console.log('coBtn: ', coBtn)
            console.log(coBtn.getAttribute('class').indexOf('list-close') > -1)
            if (coBtn.getAttribute('class').indexOf('list-close') > -1) {
            coBtn.innerHTML = '《'
            coBtn.classList.remove('list-close')
            document.getElementById('videoList').classList.add('hidden-list')
            } else {
            coBtn.innerHTML = '》'
            coBtn.classList.add('list-close')
            document.getElementById('videoList').classList.remove('hidden-list')
            }
        }

        // 搜索
        const { dialog } = require('electron').remote
        function sreach () {
            let sreachVideo = document.getElementById('sreachVideo')
            if (event.keyCode == 13) {
            console.log('输入的内容： ', sreachVideo.value)
            console.log('Enter')
            dialog.showMessageBox({
                type: 'info',
                message: `你的查询字段是：${sreachVideo.value}。\nBut,没人告诉你，这个功能不可用吗？��`
            })
            }
        }
        </script>
    </body>
    </html>

附上ajax.js和video.json的文件

    var Ajax={
        get: function(url, fn, err) {
            var xhr = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
            xhr.open('GET', url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
                    fn.call(this, xhr.responseText);  //从服务器获得数据
                }
            };
            xhr.send();
        },
        post: function (url, data, fn, err) {         // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                    fn.call(this, xhr.responseText);
                } else {
                    err()
                }
            };
            xhr.send(data);
        }
    }

    [
        {
            "url": "http://113.105.167.160/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/x0200a1uksl.p201.1.mp4?vkey=4AFB455CCB1EFB17914BB0610E27D81DF9F827F6219D7808BE5430E84F647D9D35E631E8B0AD371939B9C77FEA1544CC24C0E94E854433A03B578760ADC881EC675619ED12FDFC57536C3D9463B394A44D7A377C641B95C80F622874B026B1E475497AF5D143AE7CE0E12B6E1E48B22E331D35739A8DF55D&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1fc86f35-8330-493b-b7ba-a42a699d3595&size=5122470&ocid=2507543980",
            "desc": "视频1"
        }, {
            "url": "http://183.61.62.141/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/k02001m96jf.p201.1.mp4?vkey=37A35A75FB70EAC387A467C14CFD9CA3C82B8B86F82090D503B43902BBE92CBF59BA80C5E63ABB55841069EE7E170F04212F2EE377E5947A6015317ABDCCC5154C549EE576FB216276F4C772E89CCC0DB0F439529033E8F5DFDC3A83B5B5D1FD25FFBCA60A4D65129CBC7E0B866660F91C6D8386BBD48A95&platform=10201&sdtfrom=&fmt=shd&level=0",
            "desc": "视频2"
        }, {
            "url": "http://183.61.62.147/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/k02001m96jf.p201.1.mp4?vkey=37A35A75FB70EAC387A467C14CFD9CA3C82B8B86F82090D503B43902BBE92CBF59BA80C5E63ABB55841069EE7E170F04212F2EE377E5947A6015317ABDCCC5154C549EE576FB216276F4C772E89CCC0DB0F439529033E8F5DFDC3A83B5B5D1FD25FFBCA60A4D65129CBC7E0B866660F91C6D8386BBD48A95&platform=10201&sdtfrom=&fmt=shd&level=0&locid=5fbac1ed-7973-42ed-9330-e018d3863cfa&size=2566398&ocid=194322348",
            "desc": "视频3"
        }, {
            "url": "http://113.105.167.144/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/p02008fn39e.p201.1.mp4?vkey=66EC1B74D9779448BC29D12B0CCFD258B9CB5F9E19BE98B80429876E63942AE2F8CE6D9BC3A4359F6639742D3D91AF41F87643DE2FB533B3029DF19C0859FA7D1449F77701D9C226C73B70A08D5FAC68BA4A436DA87419CF9DE7E687A15BA9C1EB082D4B2D404D2B7C4DFF551BDC5384529C05F59E6D8717&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1636e051-0f90-470b-b2fc-fc01ec538834&size=2543069&ocid=2390103468",
            "desc": "视频4"
        }, {
            "url": "http://113.105.167.142/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/p02008fn39e.p201.1.mp4?vkey=66EC1B74D9779448BC29D12B0CCFD258B9CB5F9E19BE98B80429876E63942AE2F8CE6D9BC3A4359F6639742D3D91AF41F87643DE2FB533B3029DF19C0859FA7D1449F77701D9C226C73B70A08D5FAC68BA4A436DA87419CF9DE7E687A15BA9C1EB082D4B2D404D2B7C4DFF551BDC5384529C05F59E6D8717&platform=10201&sdtfrom=&fmt=shd&level=0",
            "desc": "视频5"
        }, {
            "url": "http://113.105.167.144/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/p02008fn39e.p201.1.mp4?vkey=66EC1B74D9779448BC29D12B0CCFD258B9CB5F9E19BE98B80429876E63942AE2F8CE6D9BC3A4359F6639742D3D91AF41F87643DE2FB533B3029DF19C0859FA7D1449F77701D9C226C73B70A08D5FAC68BA4A436DA87419CF9DE7E687A15BA9C1EB082D4B2D404D2B7C4DFF551BDC5384529C05F59E6D8717&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1636e051-0f90-470b-b2fc-fc01ec538834&size=2543069&ocid=2390103468",
            "desc": "视频6"
        }, {
            "url": "http://113.105.167.144/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/p02008fn39e.p201.1.mp4?vkey=66EC1B74D9779448BC29D12B0CCFD258B9CB5F9E19BE98B80429876E63942AE2F8CE6D9BC3A4359F6639742D3D91AF41F87643DE2FB533B3029DF19C0859FA7D1449F77701D9C226C73B70A08D5FAC68BA4A436DA87419CF9DE7E687A15BA9C1EB082D4B2D404D2B7C4DFF551BDC5384529C05F59E6D8717&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1636e051-0f90-470b-b2fc-fc01ec538834&size=2543069&ocid=2390103468",
            "desc": "视频7"
        }, {
            "url": "http://113.105.167.149/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/x0200a1uksl.p201.1.mp4?vkey=4AFB455CCB1EFB17914BB0610E27D81DF9F827F6219D7808BE5430E84F647D9D35E631E8B0AD371939B9C77FEA1544CC24C0E94E854433A03B578760ADC881EC675619ED12FDFC57536C3D9463B394A44D7A377C641B95C80F622874B026B1E475497AF5D143AE7CE0E12B6E1E48B22E331D35739A8DF55D&platform=10201&sdtfrom=&fmt=shd&level=0",
            "desc": "视频8"
        }, {
            "url": "http://113.105.167.160/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/x0200a1uksl.p201.1.mp4?vkey=4AFB455CCB1EFB17914BB0610E27D81DF9F827F6219D7808BE5430E84F647D9D35E631E8B0AD371939B9C77FEA1544CC24C0E94E854433A03B578760ADC881EC675619ED12FDFC57536C3D9463B394A44D7A377C641B95C80F622874B026B1E475497AF5D143AE7CE0E12B6E1E48B22E331D35739A8DF55D&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1fc86f35-8330-493b-b7ba-a42a699d3595&size=5122470&ocid=2507543980",
            "desc": "视频9"
        }, {
            "url": "http://113.105.167.160/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/x0200a1uksl.p201.1.mp4?vkey=4AFB455CCB1EFB17914BB0610E27D81DF9F827F6219D7808BE5430E84F647D9D35E631E8B0AD371939B9C77FEA1544CC24C0E94E854433A03B578760ADC881EC675619ED12FDFC57536C3D9463B394A44D7A377C641B95C80F622874B026B1E475497AF5D143AE7CE0E12B6E1E48B22E331D35739A8DF55D&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1fc86f35-8330-493b-b7ba-a42a699d3595&size=5122470&ocid=2507543980",
            "desc": "视频10"
        }, {
            "url": "http://113.105.167.145/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/a02000zycfk.p201.1.mp4?vkey=70FA12E0C4BDE12A5DCCDF8164A39FA04B97EFF1F63A1CDB2404868D854DA78CDA8CDD3DC65CAF646F12430652918AE419844CF008CD83790467FF65562C929A70DF3843C8C324AB3940B719D1C5A574B0C58067C316128BC9E3934F50384DD9EEC615D275ACC77557CA4B3F34A9CA614D59C0F0619C6C63&platform=10201&sdtfrom=&fmt=shd&level=0",
            "desc": "视频11"
        }
    ]

yarn run start 跑一下咯

至此，第一个有自己功能的桌面app算是开发完毕，那就打包吧

运行打包命令yarn run package, 结果如下

    $ npm run package

    > my-video-player@1.0.0 package D:\My documents\electron\video_player
    > electron-packager . rfsniffer --platform=win32 --arch=x64 --out=./dist --asar --app-version=2.0.1 --ignore="(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js)"

    Packaging app for platform win32 x64 using electron v1.8.4
    Wrote new app to dist\rfsniffer-win32-x64

测试下dist/video-player-win32-x64下的 video-player.exe
我要发送给朋友装装逼@_@!
- 安装winRar软件，32位就可以（朋友电脑可能比较旧，不支持64位，哈哈哈）
- 右键添加压缩文件，选择添加自解压文件，
- 在高级选项中，设置自解压目录和桌面快捷方式，
- 最后点击确定完成打包，具体的见下面动图展示
Now, go and show off your friends!