2. 程式人生 > >Electron 結合WEB專案製作桌面APP之二 ---- electron與web的結合開發體驗

Electron 結合WEB專案製作桌面APP之二 ---- electron與web的結合開發體驗

阿新 • • 發佈：2019-01-27

引言

開始嘗試用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

    > [email protected]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. 我要傳送給朋友裝裝逼@[email protected]!

    • 安裝winRar軟體，32位就可以（朋友電腦可能比較舊，不支援64位，哈哈哈）
    • 右鍵新增壓縮檔案，選擇新增自解壓檔案，
    • 在高階選項中，設定自解壓目錄和桌面快捷方式，
    • 最後點選確定完成打包，具體的見下面動圖展示
    • 動圖展示

  4. Now, go and show off your friends!

相關推薦

Electron 結合WEB專案製作桌面APP之二 ---- electron與web的結合開發體驗

引言 開始嘗試用electron搭建了一個hello world，體驗還是挺不錯的，對於一個web開發者來說，能把自己的開發成果做成一個桌面app，那將是一步巨大的跨越 藉此，再深入學習後

SpringBoot系列: SpringBoot Web專案中使用Shiro 之二

==================================Shiro 的加深理解:==================================1. Shiro 和 Spring 系元件的對標, Shiro = Spring Security + Spring Session. 就是說 Shi

小專案製作：javaWeb之郵箱驗證註冊（javaMail+jdbc+log4j）

功能設計： 架構設計： 註冊時通過傳送郵件方式，傳遞訪問專案啟用的servlet進行改寫資料庫中active的值，通過傳遞啟用碼acode來辨別資料庫中是否有該賬戶資訊 註冊功能實現： servlet： package cn.hncu.re

springboot構建web專案的叢集部署之路

最近搞了個springboot構建的bbs專案，專案整體是從github上面clone的，到本地做了一些環境移植，最後部署到linux環境下，部署2個節點，算是一個叢集。期間踩坑無數，這裡記錄一下，以備後用，免蹈覆轍。 1.springboot構建的web專案，例子裡面都是

Java Web 專案執行報錯之——Compilation error.......ClassFormatException

報錯提示 嚴重: Compilation error org.eclipse.jdt.internal.compiler.classfmt.ClassFormatException 全部報錯資訊 嚴重: Compilation erro

地球最強WEB前端Nginx服務器之搭建基礎靜態WEB站點

nginx就是地球最強web前端 沒有之一 地球最強WEB前端Nginx服務器之搭建基礎靜態WEB站點1.1 Nginx概述及常用Web服務器介紹1.1.1Nginx簡介：（來自百度百科）Nginx (engine x) 是一個高性能的HTTP和反向代理服務器，也是一個IMAP/POP3/SMTP服務

Gradle學習之構建java與web項目

jcenter yun 接口 webxml oot conf ava getc clas 一.使用Gradle的java插件構建Java項目 1）Gradle插件包含了若幹個接口定義和已有的任務項，語法結構：apply plugin:‘插件名‘ ,此處我們定義插件

CentOS 7.4——Apache應用之二，構建Web虛擬主機

Apache應用——構建Web虛擬主機目錄第一部分 準備工作第二部分 安裝Apache服務第三部分 搭建基於端口的虛擬主機第四部分 搭建基於域名的虛擬主機 第一部分 準備工作一：服務器：Linux系統—CentOS 7.4；IP地址：192.168.80.10 客戶端：以WIN7為例，測試驗證結果，

一步步實現web程式資訊管理系統之二--後臺框架實現跳轉登陸頁面

SpringBoot springboot的目的是為了簡化spring應用的開發搭建以及開發過程。內部使用了特殊的處理，使得開發人員不需要進行額外繁鎖的xml檔案配置的編寫，其內部包含很多模組的配置只需要新增maven依賴即可使用，這項功能可謂對開發人員提供了大大的好處。使用springboot

一步一步實現web程式資訊管理系統之二----後臺框架實現跳轉登陸頁面

SpringBoot springboot的目的是為了簡化spring應用的開發搭建以及開發過程。內部使用了特殊的處理，使得開發人員不需要進行額外繁鎖的xml檔案配置的編寫，其內部包含很多模組的配置只需要新增maven依賴即可使用，這項功能可謂對開發人員提供了大大的好處。使用springboot只需要簡單配置

python 基礎之 socket介面與web介面

python 網路程式設計 主要有socket模組、BaseHTTPServer模組。socket屬於更底層次，方便在日常運維工作中使用， http web介面更適合開放給外部人員使用，畢竟大多數語言都很方便支援http請求。 首先看最基本socket客戶端與服務端例項: #!

19.VUE學習之- v-for與computed結合功能 篩選例項講解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/di

運用Scrum做專案管理真實案例之二

引言：         我會以系列文章的形式跟蹤記錄我現在正在做的一個完整運用Scrum管理專案的筆記，裡面會有一些經驗教訓總結心得，以便讀者與我互相學習勉勵。有寫的不對的或者寫的不好的地方還請海涵，當然我更希望大家多多提寶貴意見，讀者的支援是我最大的動力。（之一，之二，之

【LC3開源峰會網絡技術系列之二】阿裏雲開發智能網卡的動機、功能框架和軟轉發程序

copy 特點 fda 優化 ext shadow 所有 type 解密 摘要： 摘要 這篇文章介紹了阿裏雲開發智能網卡的動機、功能框架和軟轉發程序以及在軟轉發過程中發現的問題和優化方法。 主講人陳靜 阿裏雲高級技術專家 主題Zero-copy Optimization f

CoordinatorLayout 使用綜述系列（二）與AppBarLayout結合上下聯動效果

CoordinatorLayout 使用綜述系列（二） 在 gradle 檔案中引入 meterial design 庫： compile 'com.android.support:design:22.2.0' CoordinatorL

Docker下的Spring Cloud三部曲之二：細說Spring Cloud開發

本文是《Docker下的Spring Cloud三部曲》系列的第二篇，詳細講解上一篇例項中用到的eureka、provider、consumer等三個應用的開發過程； 環境資訊 回顧一下實戰環境，如下圖： 原始碼地址 上圖的eureka、

JAXB的應用之二---------Xml與多個物件的對映（聚合或組合）及注意事項

　　　在我們的實際應用中，Xml中的結構往往不止這麼簡單，一般都會有2，3層。也就是說如果對映成物件就是聚合（組合）的情況 。 就用我們上一章的例子繼續來講，簡單我們的Book的author現在不止是一個String型別的名子，他是一個物件Author，幷包含作者的相關個人

2019測試指南-web應用程式安全測試（二）檢視Web伺服器圖元檔案的資訊洩漏

浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>   

從壹開始[做貢獻]之二 || 推薦VSCode多語言開發，支援一鍵JAVA

緣起 哈嘍大家週一好！好久不見鴨，最近在看一本書，很好，《人類簡史》，適合夏日星空，仰觀宇宙之大

dubbo實戰之二：與SpringBoot整合

### 歡迎訪問我的GitHub [https://github.com/zq2599/blog_demos](https://github.com/zq2599/blog_demos) 內容：所有原創文章分類彙總及配套原始碼，涉及Java、Docker、Kubernetes、DevOPS等； ###