① 在linux下怎麼打包直接運行的node-webkit桌面應用
node-webkit 是一個很神奇的桌面客戶端項目,正如這個項目的名字,這個項目是由node 和 webkit 構成,簡單來說,就是你可以用HTML 5和 node 進行桌面客戶端開發,而且客戶端還是同時支持在 WIN,MAC,LINUX運行. 下面,就用一個簡單的例子來展示一下node-webkit的魅力.
創建項目
本例子基於Grunt構建
如果,你用過grunt,要創建一個node-webkit 非常簡單,我已經寫好了一個node-webkit的grunt-init的項目模板. 至於怎麼安裝這個模板,跟官方的教程一樣. 如果你是windows 用戶
md %USERPROFILE%.grunt-init\node-webkit
git clone git@github:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkit
linux or mac
git clone [email protected]:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkit
你只需要用
grunt-init node-webkit
就可以創建完畢.
app.nw 這個目錄就是我們准備要開始寫的pc 客戶端的項目文件夾,運行node-webkit項目很簡單,只需要把node-webkit 的運行環境配置到環境變數,然後運行
nw app.nw 就可以運行起來了. nodewebkit1
PS: 如果你不想接觸grunt,不過我建議還是學一下grunt,你可以到github/rogerwang/node-webkit#quick-start 學習如何啟動一個node-webkit應用.
效果圖
oscdesk1
oscdesk2
這個就是所謂的 win 8 風格的客戶端了吧....界面用的框架是這貨:aozora.github.io/bootmetro/ 90% 的時間都是調整界面...蛋疼死了......連個 win8 風格的progress 都沒..讓我非常傷心..也可能是alpha 的原因吧. 不過最後的效果,還是很難看,就湊合著過去吧....
開發
基於node-webkit 開發pc 客戶端語言支持 c/c++,html5,css3, js,node api.好了,現在我們開始用html 5 + css3 寫一個pc 客戶端吧. node-webkit本質就是一個可以跑node 的瀏覽器,所以,我們用web 開發的技巧來開發pc 客戶端毫無問題.
首先,打開toolbar,在package.json文件裡面有個toolbar的參數,設置為true即可,就會見到如下圖所示:
toolbar
點擊那個三橫線的按鈕,一個chrome 風的調試窗口就出來了.
console
開發的時候,我們修改完文件,並不需要重新運行程序來看結果,我們,可以直接點擊左邊的刷新按鈕即可看到我們修改的運行結果.用node-webkit開發客戶端是不是很方便了!
那麼接下來,要開發一個oschina pc 客戶端,我們只需要知道,相關api 就行了,從android 客戶端源碼裡面可以得到相關api...具體代碼在app/model/oschinaApi.js 文件裡面.
node-webkit,已經吧相關的安全限制已經去掉,所以說,用node-webkit開發pc客戶端,用webkit 發的請求不受同源限制. 用node-webkit 開發一些restful 應用是非常舒服的事情,只要有個不錯的界面.關於node-webkit的東西也就這么些了,剩下的就是web 開發,不在本文node-webkit范圍內,所以就不再啰嗦..
② 如何將electron框架開發的軟體包打包成單一exe文件
前言：研究electron自動更新的時候，在electron的官方文檔auto-updater 中，提到了在幾個平台mac，linux，windows下electron 的自動更新方法，其中windsow平台上面，文章中建議先用grunt-electron-installer 模塊來創建windows安裝包，grunt這個工具是由Squirrel集成的。進而了解下Squirrel這個工具，
一個可以用來給electron應用的安裝更新卸載添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel創建electron的.exe安裝包。
創建nuget包
我們的方法是使用nuget工具創建Nuget包，再使用Squirrel工具創建.exe。
1.下載squirrel.exe和nuget.exe，也可以選擇直接安裝Squirrel.Windows （需要有vitual
studio環境）。
2.新建文件夾如my-build，把下載好的squirrel.exe，nuget.exe和setup.exe
放進去，在文件夾放入我們未打包的electron應用，如下圖：
4.在my-build根目錄中，打開命令行執行nuget spec
如下圖：
生成 spec包初始文件
5.編輯器打開 Package.nuspec，按照自己項目的需要編輯這個文件，如下圖：
這里需要注意：根據Squirrel文檔說明，target folder 屬性需要設置為lib/net45，否則並沒有用；<iconUrl>標簽用來制定未來的exe的icon。
5.用下面的命令創建一個nuget包，
nuget pack Package.nuspec
如下圖：
之後在目錄中會出現這個包
命名規則就是<my_app_name>.<version>.nupkg
創建安裝程序
把應用程序打包成nuget包之後，就可以用squirrel創建一個安裝程序了。在根目錄打開命令行，執行以下命令：
squirrel --releasify <my_app_name>.<version>.nupkg
這個時候命令行中沒有任何提示。但是別慌，編譯一段時間後程序會創建一個release文件夾，裡面有三個文件，nuget包，RELEASES 文件和安裝文件Setup.exe。如下圖：
如果沒有出現這三個文件，可以查看目錄中的SquirrelSetup.log，根據裡面的報錯，來進行調試。
注意上面這條squirrel 命令，可以用來設置setup.exe在安裝過程中用傳統icon還是用自定義的圖片文件。使用Squirrel --help可以查看更多幫助
發布應用和安裝應用
把上一步生成的setup.exe發送給想要安裝這個應用的用戶，就可以了。
最終應用會被安裝在C:\Users\Administrator\AppData\Local\[appname] 文件夾中，注意Squirrel 的日誌文件也存在目錄中，調試安裝問題的時候非常有用。
雙擊我們的setup.exe進行安裝app的測試，如果中途有任何出錯，在
C:\Users\Administrator\AppData\Local\SquirrelTemp 裡面可以看到安裝日誌。如下圖：
安裝之後打開C:\Users\Administrator\AppData\Local 目錄，可以看到app安裝在這里，如下圖：
自動創建快捷方式
進入我們安裝之後的文件夾，命令行進入C:\Users\Administrator\AppData\Local\[your appname]，執行 Update.exe --help ，可以看到
不知道從上圖你有沒有得到什麼提示，反正我發現了，在命令行手動創建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico
所以，如果我們想讓應用在安裝過程中靜默地創建好快捷方式，那就需要在app的安裝之後相反設法執行這句代碼。
因為我們的.exe會在安裝之後自動打開程序，所以我在程序的入口main.js，添加sqruieel事件的監聽就好了。如下圖：
我順便把程序卸載時，刪除快捷方式的監聽事件也寫了進去。還有程序的更新和刪除事件監聽，但是這兩個事件，我還沒有進行測試。
更新應用
其實我一直很想做增量更新，在這里我的更新方法有兩個，第一是在程序的入口添加js，發送請求到伺服器，拉取更改文件進行本地替換，但是如果是node_mole依賴包的更改，這個方法並不可行。第二個方法比較安全而且快捷通過發布一個版本號不同的exe，如下：1.在這個創建安裝程序的步驟2中，我們把程序代碼都復制到了這個文件夾裡面，如下圖：
如果後續我們的程序要進行更新，首先我們需要把更改的文件直接復制替換到這個文件夾。
2.打開Package.nuspec，編輯version標簽
3.參考本文種中創建安裝程序部分的步驟2-4，重新生成setup.exe，發布應用。
通過執行setip.exe安裝，程序會自動刪除之前的應用，但是我並不清楚，sqruieel 是進行了增量替換，還是將之前的整個應用進行刪除，再重新安裝。
創建自定義安裝包
在上一步，我們已經把自己的exe發布出來了，但是如果沒有自定義名字跟icon，好像還不夠酷，所以我們需要創建自定義的安裝文件。
1.下載安裝 Resource
Hacker
2.打開這個項目目錄，在electron.exe上面右鍵
出現菜單，點擊 Open using Rescource Hacker。
3.Resource Hacker應用運行之後中，在以下界面中選擇Icon，然後在工具欄裡面選擇Action，Replace
Icon，如下圖：
然後選擇自己想要替換的.ico文件就好
4.這其實並不夠，我們還需要更換exe裡面的版本信息，打開Version
Info，把FileDescription和ProctName改成我們自己的項目名稱，最好把SquirrelAwareVersion也更改一下，畢竟是版本號。
5.做完這些之後，我們需要按照之前的步驟，在命令行中輸入
nuget pack Package.nuspec
重新生成nuget包，然後再使用
squirrel --releasify <my_app_name>.<version>.nupkg 命令創建安裝文件。
6.打開之後生成的releases文件夾，參考本文種中創建安裝程序部分的步驟2-4，對setup.exe進行自定義。
最後，一個可以自動更新又安裝便捷，還有我們自己的酷酷的圖標跟名字的應用就生成拉！
③ grunt打包的electron桌面應用，怎麼實現自動更新
1、系統：windows7 64位操作系統
2、使用electron-boilerplate-vue腳手架，其中electron為v1.2.1，vue為v1.0.25
3、使用electron-packager和grunt-electron-installer打包成安裝文件，以及 Squirrel.Windows
4、請先安裝vs2015,並配置系統變數，保證Squirrel.Windows的安裝環境