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

最新推荐文章于 2024-06-18 11:45:38 发布
最新推荐文章于 2024-06-18 11:45:38 发布
阅读量5k 收藏 3
点赞数
分类专栏： GUI程序 文章标签： Electron exe video json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_38847071/article/details/80022220
版权

引言

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

目标

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

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

  1. 下载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
    # 成功跑起来了，并且出现了官方的默认首页文本

  2. 开始折腾这个快速模板

    • 修改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)\""
    },

  3. 百度一下啦~

    • 第一种方案，修改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
    }))

    • 测试一下：大功告成

  4. 打包一下，打包后的文件自动存放到dist文件夹

        yarn run package
  5. 至此，百度首页成功被嵌入到了electronApp中

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

  1. 修改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>
    1. 附上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"
        }
    ]
  2. yarn run start 跑一下咯 video-player

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

  1. 运行打包命令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

  2. 测试下dist/video-player-win32-x64下的 video-player.exe video-player.exe

  3. 我要发送给朋友装装逼@_@!

    • 安装winRar软件，32位就可以（朋友电脑可能比较旧，不支持64位，哈哈哈）
    • 右键添加压缩文件，选择添加自解压文件，
    • 在高级选项中，设置自解压目录和桌面快捷方式，
    • 最后点击确定完成打包，具体的见下面动图展示
    • 动图展示

  4. Now, go and show off your friends!

EricEco8
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
create-electron-app:a在几秒钟内生成一个新的Electron App！
03-28
创建电子应用 在一分钟内生成一个新的Electron App！ ·· 什么是create-electron-app？ 是一个简单，最小的CLI应用程序，可以在一分钟内生成一个Electron应用程序！ Create-Electron-App使用样板作为样板。 :sparkles: 特征 :high_voltage: 快速安装：只需运行npx new-electron-app ！ :hammer: Electron-Builder： Electron Builder的实现可用于跨平台构建。 :sparkles: 自定义：易于自定义和内置功能。 :hammer_and_wrench: 入门 步骤1：先决条件 NPM npm install npm@latest -g 新电子应用 npm install new-electron-app -g 步骤2：安装 打开您的首选终端。 在任何地方运行new-electron-app！ npx new-electron-app 或者 npm r
WhatsApp-Desktop:使用Electron构建的WhatsApp Web桌面客户端
05-23
WhatsApp的介绍花费了几个小时来改进 ，试图为WhatsApp Web创建一个简单的包装程序，其唯一目的是能够将⌘-tab或alt-tab作为我的停靠alt-tab上的图标。 只是基于的准系统实现。 该功能应与完全相同。 对于越狱的iOS...
使用 Electron 打包 Web 应用
热门推荐
Windy_Z的博客
06-05 13万+
1、 npm 初始化项目 新建一个文件夹作为项目文件夹 使用 npm init 初始化文件夹 生成一个 package.json 文件 修改 package.json 里面的 "main": "index.js" 2、 安装 electron 到项目文件夹 在项目文件夹下执行以下命令 npm install --save-dev electron /** * 这一步我用 cnpm 安装的，cnpm 的具体安装方法可百度 * --save-dev 可以自动更新 package.json 里面的 "
MathType软件下载2024最新版_MathType官方免费下载附加详细安装步骤
最新发布
Tan198619的博客
06-18 434
根据使用者情况表明MathType软件与Microsoft Office 2013和Office 365相兼容，兼容800+软件应用软件和网页，其中新增114+种与MathType兼容工作。我们必须承认MathType软件支持数字手写识别，支持更多的数学符号和字体。MathType支持 TeX、LaTeX和MathML，还能将公式转化为支持web的各种图像，同样可以进行WMF 和 EPS 输出。MathType可以为您自动更改各种数学公式的字体和格式，即便是再复杂的数学公式，更改多种字体，也不在话下。
electron把写好的vue项目打包成桌面APP
lyww1992的博客
04-30 1109
基本流程 1、安装依赖 npm install electron --save-dev npm install electron-packager --save-dev 2、修改config/index.js build:{ assetsPublicPath: './' } 3、接口地址修改（如未做过本地反向代理可跳过这一步） 例如在用proxyTable做反向代理时所用的配置url替换...
vue3+vite+js使用electron创建桌面端app
weixin_69318049的博客
05-31 810
electron基础使用
如何利用 Electron 开发一个桌面 APP
前端大全
01-07 4363
（点击上方公众号，可快速关注）编译：开源中国https://www.oschina.net/translate/how-to-build-your-first-app-with-electron你是否曾经想过可以用 HTML、CSS 和 JavaScript 这些前端技术来构建跨平台的桌面应用？使用 Electron 就能做到。本文带着你深入 Electron 的核心概念。阅读本文后，你会知道如何
Orion-electron：Orion项目的桌面应用程序
02-18
总之，`Orion-electron` 结合了现代 web 开发技术和桌面应用的便利，为用户提供了一个集成多种功能的桌面环境，通过 `Electron` 的力量将 `Node.js`、`React.js` 和文件系统操作融合在一起，实现高效且灵活的桌面...
Threema-Desktop:Threema桌面| 使用ElectronJS将web.threema.ch非官方实现到桌面客户端
05-25
Threema桌面 桌面应用程序，类似于或Telegram。 支持平台 特征 通知| 消息将显示为正常的操作系统通知 任务栏托盘| 关闭应用程序后，会将Threema Desktop缩小到任务栏任务栏图标中（就像其他应用程序一样，例如...
electron-app-svelte:构建Electron + Svelte应用程序的最小模板
05-17
与 Electron 结合，Svelte 可以为桌面应用提供流畅的用户体验。 这个名为 "electron-app-svelte" 的项目是一个最小化的模板，专为想要快速启动和运行 Electron + Svelte 应用程序的开发者设计。使用这个模板，你...
laravel-electron：使用Electron Js制作Laravel桌面应用程序
02-04
总结来说，`laravel-electron`项目结合了Laravel的后端强大功能和Electron的桌面应用特性，为开发者提供了一个全新的开发体验。通过这个项目，你可以创建出具有原生桌面应用特性的Web应用，同时享受Laravel带来的...
electron打包web程序
11-30
使用electron 打包web程序，第一步安装asar工具，第二步安装electron-prebuilt模块，第三步，制作成.exe.同时还提供了更改图标的方法。
electron “web应用“ 打包 “桌面应用“ ——学习篇
qq_38421226的博客
09-09 397
最近准备开发一款爬虫工具，就想到了如何创建pc端桌面应用。 相比使用底层语言开发我更希望能够将web应用打包。毕竟我不太会底层语言。 话不多说，开讲。 第一步， 克隆electron-quick-start git clone https://github.com/electron/electron-quick-start 进入克隆项目：electron-quick-start，此为样板项目。在该目录下执行以下指令安装依赖： npm install (或者) cnpm install 说明：npm 升级
electron Web桌面工具
学吧
10-13 452
electron Web桌面工具简介起步判断环境BrowserWindow 常用配置详解 官网: https://www.electronforge.io/ 文档:https://cloud.tencent.com/developer/section/1115865 简介 Electron 是 GitHub 发布的跨平台桌面应用开发工具，支持 Web 技术开发桌面应用，其本身是基于 C++ 开发的，GUI 核心来自于 Chrome，而 JavaScript 引擎使用 v8。 起步 安装 Electron
Electron打包Web程序，部署web端桌面程序（很简单！）
qq_62291805的博客
03-21 1247
"packager":"electron-packager ./ ISCS --platform=win32 --arch=x64 --electron-version=1.8.4 --out --overwrite" //新增。// 想要取消窗口对象的引用， 如果你的应用支持多窗口，你需要将所有的窗口对象存储到一个数组中，然后在这里删除想对应的元素。// "test": "echo \"Error: no test specified\" && exit 1" //修改前。感觉挺好玩，随手记录下。
Packaging app for platform win32 x64 using electron v3.0.0错误npm ERR! code ELIFECYCLE errno 134
晚秋的专栏
04-23 2248
npm ERR! code ELIFECYCLE npm ERR! errno 134 npm ERR! kys3d@0.1.0 packager: `electron-packager ./ App --platform=win32 --arch=x64 --electron-version=3.0.0 --overwrite` npm ERR! Exit status 134 npm ERR! npm ERR! Failed at the kys3d@0.1.0 packager script. np.
【Electron】使用Electron将web项目打包成桌面应用程序
go
08-16 4711
执行打包命令： electron-packager . app --win --out sysApp --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_modules
用Electron将web网页程序包装成桌面应用
知识点沉淀包括不限于前端
12-13 5462
用Electron将web网页程序包装成桌面应用 前提 web 端页面，真的太容易一不小心关掉了，或者,标签页比较多的时候不太容易找到,所以决定快速包装一个 认识electron electron快速入门 搭建electron项目 第一步 创建项目,下载依赖 mkdir my-electron-app && cd my-electron-app npm init npm install --save-dev electron (devDependencies:只在开发环境中使用
Electron，可以将web网页程序包装成桌面应用
LongtengGensSupreme博客
10-22 1052
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架，内嵌Chromium，Nodejs，可以用JavaScript写同一份代码，发布到不同平台的本地应用，支持Windows、macOS，Linux。 通过它可以把我们日常用的一些网页进行包装，做成桌面上点开的应用，想用的时候直接点开就行了，不用打开谷歌、微软等浏览器，输入网页进到网站那么麻烦。下面看一下实际代码示例和演示效果。 1、安装node，npm 2、新建一个文件夹，命名为项目名字，比如my-e
使用Electron构建跨平台桌面应用
1. **Electron框架**：Electron是一个基于Chromium和Node.js的开源框架，它允许开发者利用Web开发技能（如JavaScript）来构建桌面应用，实现跨平台运行。 2. **跨平台开发**：学习如何为macOS、Windows和Linux三大...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值