您好,登錄后才能下訂單哦!
在 HTML5的崛起、JavaScript要一統(tǒng)天下之際,有一個(gè)名為【跨平臺(tái)】的技術(shù)越來(lái)越火。為什么會(huì)這么火?因?yàn)檐浖_(kāi)發(fā)者只需一次編寫程序,即可在 Windows、Linux、Mac、IOS、Android 等平臺(tái)運(yùn)行,大大降低了程序員的工作量,也使公司的產(chǎn)品可以快讀迭代。曾經(jīng)跨平臺(tái)技術(shù)的不被看好,如今隨著手機(jī)、電腦硬件的發(fā)展而快速發(fā)展。這一切,幾乎由HTML5技術(shù)推動(dòng),當(dāng)然,JavaScript 這個(gè)語(yǔ)言,是最大的功臣。
基于 HTML5 的跨平臺(tái)技術(shù)比較出名的有 PhoneGap、Cordova,常常用于開(kāi)發(fā) webapp;還有 Egret、Cocos-creator、Unity 等,常用于開(kāi)發(fā)游戲;還有基于 Node.js 的 nw.js,用于開(kāi)發(fā)桌面應(yīng)用,以及 Electron,一款比 nw.js 還強(qiáng)大的用網(wǎng)頁(yè)技術(shù)來(lái)開(kāi)發(fā)桌面應(yīng)用的神器。
其實(shí),以上都是廢話,現(xiàn)在進(jìn)入主題:怎么用 Electron 將網(wǎng)頁(yè)打包成 exe 可執(zhí)行文件!
假設(shè):
1、你已經(jīng)安裝并配置好了 node.js (全局安裝)
2、你已經(jīng)用 npm 安裝了 electron (全局安裝)
3、你已經(jīng)寫好了前端網(wǎng)頁(yè)(html、css、javascript 這些,或者基于這些的前端框架寫好的網(wǎng)頁(yè))
4、以上三點(diǎn)看不懂的,趕緊去百度。。。
你如果具備了以上的假設(shè),請(qǐng)繼續(xù)往下看:
1、找到你的前端網(wǎng)頁(yè)項(xiàng)目文件夾,新建 package.json、main.js、index.html 三個(gè)文件(注:其中的 index.html 是你的網(wǎng)頁(yè)首頁(yè))
你的項(xiàng)目目錄/
├── package.json ├── main.js └── index.html
2、在 package.json 中添加如下內(nèi)容
{ "name" : "app-name", "version" : "0.1.0", "main" : "main.js" }
3、在 main.js 中添加下面的內(nèi)容,這個(gè) main.js 文件就是上面 package.json 中的 "main"鍵 的值,所以可根據(jù)需要修改
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、如果你的網(wǎng)頁(yè)首頁(yè)的文件名不是 “index.html”,那么請(qǐng)?jiān)?main.js 中將其中的 'index.html' 修改為你的網(wǎng)頁(yè)首頁(yè)名
5、打開(kāi) DOS,cd 到你的項(xiàng)目目錄(或直接在你的項(xiàng)目目錄下空白的地方 shift+鼠標(biāo)右鍵,然后點(diǎn)擊在此處打開(kāi)命令窗口,這里看不懂的,唉,百度吧少年)
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
即可開(kāi)始打包
electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules
這個(gè)命令什么意思?藍(lán)色部分可自行修改:
electron-packager . 可執(zhí)行文件的文件名 --win --out 打包成的文件夾名 --arch=x64位還是32位 --version版本號(hào) --overwrite --ignore=node_modules
8、打包成功后,會(huì)生成一個(gè)新的文件夾,點(diǎn)進(jìn)去,找到 exe 文件,雙擊就可以看到網(wǎng)頁(yè)變成了一個(gè)桌面應(yīng)用啦!
以上是最簡(jiǎn)單的打包方式,至于怎么修改窗口大小、菜單欄怎么加、怎么調(diào)用系統(tǒng)API這些,就給你慢慢去研究Electron了。
如果你打包總是不成功,覺(jué)得很煩,同時(shí)對(duì)擴(kuò)展功能沒(méi)什么要求的話,
點(diǎn)擊進(jìn)入我的Coding代碼倉(cāng)庫(kù):https://coding.net/u/linhongbijkm/p/Electron-packager-build-project/git
里面有我已將內(nèi)容為 hello,world 的 index.html 網(wǎng)頁(yè)通過(guò) Electron 框架打包為 windows 環(huán)境下的桌面應(yīng)用。
現(xiàn)只需將你的網(wǎng)頁(yè)前端項(xiàng)目復(fù)制到 /resources/app/project 目錄下,雙擊 exe 文件即可以桌面應(yīng)用的方式運(yùn)行你的網(wǎng)頁(yè)。
總結(jié)
以上所述是小編給大家介紹的web前端頁(yè)面生成exe可執(zhí)行文件的方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。