教你五分鐘開發(fā)一款桌面版應(yīng)用
作者: maomin9761
本篇教你快速開發(fā)一款桌面版應(yīng)用,話不多說趕緊開始操作吧!
1、下載nw.js
https://nwjs.io/

最好下載sdk版本。
2、解壓打開安裝包
下載完之后,解壓打開

圖中的app文件夾是我自己創(chuàng)建的,你也需要自己創(chuàng)建一個,里面放你項(xiàng)目文件。app文件夾中一般放一個index.html(頁面展示),另外還需要創(chuàng)建一個package.json文件(參數(shù)配置):
- {
- "name": "first app",
- "main": "index.html",
- "version": "1.0",
- "window": {
- "height": 300,
- "width": 360,
- "show": true,
- "title": "first app",
- "toolbar": true,
- "frame": true,
- "resizable":false,
- "icon": "./icon.png",
- "transparent":false
- }
- }
下面是各個參數(shù)的意思:
- name:這個app的名稱,可以隨便取一個~
- main:代表app的入口文件,我們這里用的是index.html,就是當(dāng)app啟動的時候第一個頁面是什么。
- version:版本號,一般于后續(xù)版本升級使用。
- window:對窗口進(jìn)行設(shè)置。
- height:高度,單位像素。
- width:寬度,單位像素。
- show:當(dāng)程序一點(diǎn)擊運(yùn)行的時候是否直接把窗口顯示出來。
- title:窗口標(biāo)題,當(dāng)入口頁面的title標(biāo)簽為空的時候就使用這個屬性來當(dāng)做窗口的標(biāo)題。
- toolbar:是否啟用工具條。
- frame:是否使用邊框,也就是含有最小化,關(guān)閉等按鈕的邊框。
- resizable:是否可以調(diào)整窗口大小。
- icon:窗口的圖標(biāo),也是在快速啟動欄顯示的圖標(biāo)。
- transparent:窗口背景是否透明。
然后將app文件夾下的所有文件項(xiàng)目文件壓縮成app.zip的壓縮文件,將其更改為app.nw文件。將app.nw從app中粘貼到根目錄中,然后 打開命令行工具合并成exe文件:
- copy /b "E:\myweb\maomin\nwjs\nw.exe"+"E:\myweb\maomin\nwjs\app.nw" "E:\myweb\maomin\nwjs\app.exe"
這里只是一個例子,按自己的存放的路徑來。合并完成后會在根目錄看見一個名叫app.exe的文件。
3、下載Enigma Virtual Box
接著你需要下載一個名叫Enigma Virtual Box的軟件。下載鏈接打開它,選中app.exe然后將你剛才下好的nw.js里原始文件(除去你自己生成和創(chuàng)建的文件或文件夾)。拖到下面的大方框中,點(diǎn)擊Process

4、完成
進(jìn)度條完成后,根目錄下會有個app_boxed.exe的文件,這個文件可以在任何地方打開,是不是很happy!!!
責(zé)任編輯:姜華
來源:
前端歷劫之路