三步教你 Axure 原型變身 EXE 程序

16 評論 33022 瀏覽 102 收藏 6 分鐘

Axure 原型變身 EXE 程序三步曲,簡單快捷的小竅門。

最近在研究如使用 H5 開發桌面應用,然后就在網上發現了 NW.js 這樣一個好東西,然后經過一番折騰之后,就實現了本文標題說的效果:讓 Axure 原型變身 .exe 程序,然后就可在任意的 Windows 平臺上運行了(當然還支持跨平臺,比如 Mac OS 和 Linux)。

準備工作

  1. Axure 原型
  2. 下載 NW.js(官網:http://nwjs.io/)
  3. 下載 Enigma Virtual Box(官網:http://enigmaprotector.com/)

Axure 原型變身 EXE 程序三步曲

1.準備 NW.js 環境

將下載的 nwjs 的壓縮包進行解壓,解壓后的文件夾內會包含以下這些文件:

a8ff320

雙擊運行 nw.exe 應該會打開如下的一個窗口,說明已經 OK 了;如果不 OK 的話,可以上網搜索關于 NW.js 的相關問題及解決方法。

2e12c28

2.打包 Axure 原型文件

首先需要在生成的 HTML 文件夾下新建一個 package.json 文件,并且在文件中編輯以下內容:

{

“name”: “nw-demo”,

“main”: “index.html”

}

其中“index.html”根據你生成 HTML 文件的實際文件名來寫,另外 package.json 還可進行更多的配置來實現一些特定的效果,可上網自行搜索,在這里不做過多的說明。

然后將 HTML 文件和 package.json 文件一起打成 ZIP 壓縮包,注意打包前的文件應該是像下面這樣的目錄結構(包含 Axure 生成的 HTML 文件和 package.json 文件),直接對這些文件進行全選打包,不要對這些文件所在的文件夾進行打包。

ddc4153

之后再將 ZIP 壓縮包(為了便于說明,我這里用 test.zip 作為示例)的后綴名 .zip 修改成 .nw,這樣就變成了 test.nw,然后再將 test.nw 文件放到 nwjs 的目錄下,拖動 test.nw 文件到 nw.exe 上進行執行,正常來講是打開一個窗口顯示你之前做好的原型效果。

f894c02

3.打包成 .exe 文件

這個過程涉及到兩個步驟:

首先將之前做好的 test.nw 文件與 nw.exe 文件打包成一個 .exe 文件(比如命名為 test.exe),具體的操作是在 CMD 命令行中輸入如下命令,

copy /b E:\test\nw.exe+E:\test\test.nw E:\test\test.exe

其中的文件路徑根據實際路徑填寫,這時候會得到一個新的 test.exe 文件,此 .exe 文件在當前文件夾下是可以正常運行的,但是如果向要拷貝到其它地方去運行,則還需要第二次打包操作,也就是接下來要做的事情。

打開之前下載的 Enigma Virtual Box 程序(enigmavb.exe),界面應該是這樣的:

e8941ae

然后在 Enter Input File Name 處選擇上一步生成的 test.exe 文件,Enter Output Name 可以默認;

之后再點擊下面的 Add 按鈕,將 nwjs 文件夾(名稱不一定是 nwjs ,就是最開始第一步 NW.js 環境的那個文件夾)下除 nw.exe 和 test.nw 以及 test.exe 之外的所有文件加載上,然后點擊 Process ,等待執行成功即可,這時候會在相應的路徑下生成一個新的 .exe 文件(我們暫且叫做 newtest.exe),此時的 newtest.exe 文件即可在任意的 Windows 環境下運行了,你可以拷貝給你的小伙伴去 Show 一下。

順便給大家看一下我制作好的一個 .exe 程序的運行效果,可以看出來,這完全是一個 Windows 應用程序的窗口,而非瀏覽器窗口。

6923ce8

好了,整個過程算是完成了,總結一下就是 Axure 原型生成 HTML 文件后,借助兩個工具(NW.js 和 Enigma Virtual Box)將其打包成 .exe 文件,至于這種做法的實際意義是什么,暫且不進行討論,感興趣的小伙伴們可以去玩一下。

 

作者:大鵬,微信:urmagic,可一起交流原型設計等問題,歡迎騷擾。

本文由 @大鵬 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這個有操作視頻嗎

    來自重慶 回復
  2. 因為沒有搞出來,所以有點心塞的

    來自貴州 回復
  3. “然后再將 test.nw 文件目錄下,”拖動 test.nw 文件到 nw.exe 上進行執行”,正常來講是打開一個窗口顯示你之前做好的原型效果。

    我想問執行后的結果是什么呢?

    來自貴州 回復
  4. 我用nwjs窗口打開壓縮好的nw文件,顯示無法加載以下來源的擴展程序是什么問題呢?

    來自北京 回復
  5. 按步驟所產生的最終版EXE文件,我拿到別的地方使用時,必須要在那個地方放個locales文件夾,里面默認把nwjs中的locales中的zh文件放進去,才可以打開;否則打開會出錯“unable to find locale data files…”有木有解決這個的?

    回復
    1. 哈哈,這個是我操作問題,解決了

      回復
    2. 我也遇到了同樣的問題,請問怎么解決的?

      來自上海 回復
  6. 厲害,試過了

    回復
  7. 搞出來了,不過被360攔截,報有病毒

    來自上海 回復
    1. 大佬咋搞的呀

      來自重慶 回復
  8. 受教了

    來自貴州 回復
  9. 補充一下:Axure原型生成的HTML,其中的文件夾或文件名稱不能帶有中文字符,否則會報錯

    來自北京 回復
    1. 清單文件缺失或不可讀是怎么回事?原型文件里沒有中文字符 求解

      回復
    2. 還是中文字符的原因,仔細檢查HTML的每個文件夾和文件,任何一個中文字符都不行

      來自北京 回復
    3. 大神想問一下打包的時候頁面的命名不能中文,畢竟打包會出現中文,那里里面的內容可以中文嗎

      來自重慶 回復
  10. 666~

    來自廣東 回復