使用NW將開發的網站打包成桌面應用 · ThinkPHP5高階實戰教程 --詮釋為API開發而生

# 使用NW將我們開發的網站打包成桌面應用 >[info] NW.js 是Node.js 開發的桌面應用打包工具 > 你可以使用node語言開發桌面應用我這里只是介紹如何將網站包一個本地應用的殼 > NW而且打包了谷歌瀏覽器兼容性更好但骨子里他還是網站程序 ## NW.js 下載下載網址 https://nwjs.io/downloads/ 推薦下載 Windows 32-bit 和 Mac OS X 64-bit >[danger] 不要用win64位一個是兼容性不好老系統不一定兼容 > 另外就是win64位打包的軟件達到200多M 而32位程序打包后文件大小減少一半 ## 解壓文件創建子項目文件夾解壓后的結構如下: win32版 ![](https://box.kancloud.cn/ede79a8763bf8ff9e116062567867c5d_607x569.png) 注意 :這三文件夾不是nw自帶的 ![](https://box.kancloud.cn/40d37d5da00dba80aa3044d522ac6882_617x76.png) ## 創建 node.js 項目文件夾現在我在里面建一個mikkle文件夾這個文件夾將是我們新的node.js項目文件夾 ![](https://box.kancloud.cn/2a83d5a47129b033d07b528127f54ef9_598x451.png) ## 創建NODE項目配置文件在項目文件中創建package.json 可以繼續使用PHPSTORM 注意編碼和格式 ![](https://box.kancloud.cn/b49dee3d3d8903b49d342d38c6602bda_563x433.png) >[danger] 這個文件要求苛刻編碼utf-8 不能有多余的逗號不要中文引號必須雙引號 ~~~ { "name": "mikkle'snw", "version": "1.0.0", "main": "index.html", "window": { "width": 1024, "height": 768, "title": "mikkle'nw" } } ~~~ >[info] ndex.html 就是你的Node項目的入口文件 >當然你也可以用index.js 用node語言開發 >![](https://box.kancloud.cn/7772f865e293aa9e2ad0edf8b269f124_662x243.png) ## 創建index.html文件 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mikkle'Nw.js</title> </head> <body> <script> window.location.href = "http://www.mikkle.cn"; </script> </body> </html> ~~~ >[success] 就是就是一個簡單的跳轉 >這里你可以根據你的需求開發自己的項目文件 > ## 打包項目文件將項目文件打包成zip格式并重命名 ![](https://box.kancloud.cn/308a7b04bd166d994921952d2a8803d6_619x159.png) 注意一定進入到項目文件夾打包 mikkle.zip 要包含你的所有NODE項目文件 ![](https://box.kancloud.cn/21b916cb5d97f52ea2623700635a835d_427x142.png) 包一個殼就倆文件 ## 將zip文件重命名并copy到主目錄 ![](https://box.kancloud.cn/1fc0f10948d0e6864033efeff6f0bbc3_711x450.png) ## 將mikkle.nw拖到nw.exe即可執行 ![](https://box.kancloud.cn/1b1d0d90d39e2db7d75996968b6d6bf1_650x428.png) ![](https://box.kancloud.cn/7f91fd74b8ec997a9cbe4b9dae215ca8_1040x807.png) ## 打包文件mikkle.nw+nw.exe文件使用win命令行進入主項目文件夾執行以下命令 ![](https://box.kancloud.cn/904dde0dc970d894b0a5aa0f9567eaf3_469x290.png) ~~~ copy /b nw.exe+mikkle.nw mikkle.exe ~~~ >[info] copy /b是打包成二進制文件 >nw.exe+mikkle.nw 順序不要反了 >mikkle.exe文件是你要生成的文件名字隨意的這東西可以改 ## mikkle.exe文件就可以運行項目了 ![](https://box.kancloud.cn/0852b95717085dd2bdd0b93f67157974_660x466.png) ## 使用Enigma Virtual Box打包成單體exe * Enigma Virtual Box 下載地址 http://enigmaprotector.com/en/downloads.html * 自己下載后并安裝運行 ![](https://box.kancloud.cn/bcb5a5023cf3c23a38d2a3ca883128ff_782x549.png) * 選擇項目運行文件 >[danger] Input File Name選擇剛才生成的mikkle.exe > Output File Name自動會生成輸出文件。你也可以選擇不同的輸出目錄 > ![](https://box.kancloud.cn/f37d65398b5cfa188619585a68857d49_754x141.png) * 添加項目附送文件添加所有把項目文件 ![](https://box.kancloud.cn/2ffa91d655b0396836304c0d0f1c3f8b_1537x622.png) ![](https://box.kancloud.cn/5f2b0485ff97dce31a8de422710dfbba_497x303.png) >[danger] 注意可以不包括 mikkle目錄 mikkle.exe mikkle.nw 和mikkle.exe * 點擊右下角的"Process"按鈕 ![](https://box.kancloud.cn/3c186bea098bf591075e6ae1df7d10cb_772x543.png) * 最后copymikkle_boxed.exe給顧客即可 ![](https://box.kancloud.cn/2b406c05b420c9fa994d2c160a87f5a0_1077x663.png) 感謝大家關注交流請加QQ群 321449759 ![](https://box.kancloud.cn/3499008a08e64306c68873288092a057_286x340.png)