<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        web前端頁面生成exe可執行文件的方法

        來源:懂視網 責編:小采 時間:2020-11-27 22:19:42
        文檔

        web前端頁面生成exe可執行文件的方法

        web前端頁面生成exe可執行文件的方法:在 HTML5的崛起、JavaScript要一統天下之際,有一個名為【跨平臺】的技術越來越火。為什么會這么火?因為軟件開發者只需一次編寫程序,即可在 Windows、Linux、Mac、IOS、Android 等平臺運行,大大降低了程序員的工作量,也使公司的產品可以快讀迭代。曾經跨
        推薦度:
        導讀web前端頁面生成exe可執行文件的方法:在 HTML5的崛起、JavaScript要一統天下之際,有一個名為【跨平臺】的技術越來越火。為什么會這么火?因為軟件開發者只需一次編寫程序,即可在 Windows、Linux、Mac、IOS、Android 等平臺運行,大大降低了程序員的工作量,也使公司的產品可以快讀迭代。曾經跨

        在 HTML5的崛起、JavaScript要一統天下之際,有一個名為【跨平臺】的技術越來越火。為什么會這么火?因為軟件開發者只需一次編寫程序,即可在 Windows、Linux、Mac、IOS、Android 等平臺運行,大大降低了程序員的工作量,也使公司的產品可以快讀迭代。曾經跨平臺技術的不被看好,如今隨著手機、電腦硬件的發展而快速發展。這一切,幾乎由HTML5技術推動,當然,JavaScript 這個語言,是最大的功臣。

        基于 HTML5 的跨平臺技術比較出名的有 PhoneGap、Cordova,常常用于開發 webapp;還有 Egret、Cocos-creator、Unity 等,常用于開發游戲;還有基于 Node.js 的 nw.js,用于開發桌面應用,以及 Electron,一款比 nw.js 還強大的用網頁技術來開發桌面應用的神器。

        其實,以上都是廢話,現在進入主題:怎么用 Electron 將網頁打包成 exe 可執行文件!

        假設:

        1、你已經安裝并配置好了 node.js (全局安裝)
        2、你已經用 npm 安裝了 electron (全局安裝)
        3、你已經寫好了前端網頁(html、css、javascript 這些,或者基于這些的前端框架寫好的網頁)
        4、以上三點看不懂的,趕緊去百度。。

        你如果具備了以上的假設,請繼續往下看:

        1、找到你的前端網頁項目文件夾,新建 package.json、main.js、index.html 三個文件(注:其中的 index.html 是你的網頁首頁)

        你的項目目錄/

        ├── package.json
        ├── main.js
        └── index.html

        2、在 package.json 中添加如下內容

        {
         "name" : "app-name",
         "version" : "0.1.0",
         "main" : "main.js"
        }

        3、在 main.js 中添加下面的內容,這個 main.js 文件就是上面 package.json 中的 "main"鍵 的值,所以可根據需要修改

        const {app, BrowserWindow} = require('electron')
        const path = require('path')
        const url = require('url')
        // Keep a global reference of the window object, if you don't, the window will
        // be closed automatically when the JavaScript object is garbage collected.
        let win
        function createWindow () {
         // Create the browser window.
         win = new BrowserWindow({width: 800, height: 600})
         // and load the index.html of the app.
         win.loadURL(url.format({
         pathname: path.join(__dirname, 'index.html'),
         protocol: 'file:',
         slashes: true
         }))
         // Open the DevTools.
         // win.webContents.openDevTools()
         // Emitted when the window is closed.
         win.on('closed', () => {
         // Dereference the window object, usually you would store windows
         // in an array if your app supports multi windows, this is the time
         // when you should delete the corresponding element.
         win = null
         })
        }
        // This method will be called when Electron has finished
        // initialization and is ready to create browser windows.
        // Some APIs can only be used after this event occurs.
        app.on('ready', createWindow)
        // Quit when all windows are closed.
        app.on('window-all-closed', () => {
         // On macOS it is common for applications and their menu bar
         // to stay active until the user quits explicitly with Cmd + Q
         if (process.platform !== 'darwin') {
         app.quit()
         }
        })
        app.on('activate', () => {
         // On macOS it's common to re-create a window in the app when the
         // dock icon is clicked and there are no other windows open.
         if (win === null) {
         createWindow()
         }
        })
        // In this file you can include the rest of your app's specific main process
        // code. You can also put them in separate files and require them here.

        4、如果你的網頁首頁的文件名不是 “index.html”,那么請在 main.js 中將其中的 'index.html' 修改為你的網頁首頁名

        5、打開 DOS,cd 到你的項目目錄(或直接在你的項目目錄下空白的地方 shift+鼠標右鍵,然后點擊在此處打開命令窗口,這里看不懂的,唉,百度吧少年)

        6、在上一步的 DOS 下,輸入 npm install electron-packager -g全局安裝我們的打包神器

        npm install electron-packager -g

        7、安裝好打包神器后,還是在上一步的 DOS 下,輸入 electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules 即可開始打包

        electron-packager . app --win --out presenterTool --arch=x64
         --version 1.4.14 --overwrite --ignore=node_modules

        這個命令什么意思?藍色部分可自行修改:

        electron-packager . 可執行文件的文件名 --win --out 打包成的文件夾名 --arch=x64位還是32位 --version版本號 --overwrite --ignore=node_modules

        8、打包成功后,會生成一個新的文件夾,點進去,找到 exe 文件,雙擊就可以看到網頁變成了一個桌面應用啦!

        以上是最簡單的打包方式,至于怎么修改窗口大小、菜單欄怎么加、怎么調用系統API這些,就給你慢慢去研究Electron了。

        如果你打包總是不成功,覺得很煩,同時對擴展功能沒什么要求的話,

        點擊進入我的Coding代碼倉庫:https://coding.net/u/linhongbijkm/p/Electron-packager-build-project/git

        里面有我已將內容為 hello,world 的 index.html 網頁通過 Electron 框架打包為 windows 環境下的桌面應用。

        現只需將你的網頁前端項目復制到 /resources/app/project 目錄下,雙擊 exe 文件即可以桌面應用的方式運行你的網頁。

        總結

        以上所述是小編給大家介紹的web前端頁面生成exe可執行文件的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        web前端頁面生成exe可執行文件的方法

        web前端頁面生成exe可執行文件的方法:在 HTML5的崛起、JavaScript要一統天下之際,有一個名為【跨平臺】的技術越來越火。為什么會這么火?因為軟件開發者只需一次編寫程序,即可在 Windows、Linux、Mac、IOS、Android 等平臺運行,大大降低了程序員的工作量,也使公司的產品可以快讀迭代。曾經跨
        推薦度:
        標簽: 文件 生成 網頁
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产成人无码区免费内射一片色欲| 亚洲国产日韩a在线播放| a级毛片免费高清视频| 四虎永久精品免费观看| 国产亚洲精品美女久久久久久下载| 免费爱爱的视频太爽了| 国产亚洲综合久久| www.亚洲色图.com| 国产大片线上免费看| 亚洲国产成人AV在线播放| 日韩免费视频播播| 国产亚洲综合久久| 中文国产成人精品久久亚洲精品AⅤ无码精品| 免费无码AV一区二区| 亚洲AV综合色一区二区三区| 国产无遮挡又黄又爽免费网站| 亚洲人成网站在线播放vr| 最近免费字幕中文大全视频| 亚洲av极品无码专区在线观看| 午夜一区二区免费视频| 九九九国产精品成人免费视频| 亚洲精品制服丝袜四区| 1000部无遮挡拍拍拍免费视频观看 | 亚洲XX00视频| 中文字幕日本人妻久久久免费| 亚洲视频在线观看免费| 毛片免费全部免费观看| 一级视频免费观看| 亚洲AV无码一区东京热| 在人线av无码免费高潮喷水| 久久精品亚洲中文字幕无码网站 | 亚洲人成免费网站| 亚洲色精品三区二区一区| 亚洲乱码中文字幕手机在线| 日本免费一区二区久久人人澡| 亚洲综合偷自成人网第页色| 久久久久亚洲AV无码专区网站 | 精品国产免费观看久久久| aa级毛片毛片免费观看久| 亚洲噜噜噜噜噜影院在线播放 | 久久精品视频免费播放|