天天看點

學習node-webkit

  想把動畫編輯器從網頁應用弄成桌面應用, 于是看了下node-webkit這個東西。個人感覺node-webkit是把node和webkit整合到一起, 然後讓web app可以調用node的各種包, 有了更強大的功能, webkit内置解析html, 支援很多html5的特性。這樣就可以用前台開發語言做出能媲美本地應用的應用了。

  在網上找了一下教程, node-webkit最好的教程當然是官方的wiki了-node-webkit。

  1.配置好node-webkit的相關環境後, 運作了第一個例子。就是一些簡單的html, 運作之後感覺就是用一個簡單的浏覽器打開一樣。當然不會這麼簡單, 接着教程講了一個比較贊的功能。 就是菜單, 包括應用頭部的菜單和右鍵菜單(contextMenu)。在寫網頁 應用的時候寫右鍵菜單挺麻煩的, 有了這個功能, 真是非常有本地應用的感覺。

  2.想用node的包也非常容易,因為node-webkit已經把node的require這個函數内置到window這個全局變量, 如下:

<html>
<body>
<script>
// get the system platform using node.js
var os = require('os')
document.write('Our computer is: ', os.platform())
</script>
</body>
</html>
           

 然後就可以借着node強大的包管理工具npm和node的各種包, 真爽。

  3.例子看的差不多了。就給動畫編輯器配node-webkit。因為現在動畫編輯器沒有用node的包, 是以配起來非常容易。唯一遇到的問題是動畫編輯器中用了requirejs,是以會有地方用require函數, 和node的require函數命名沖突。

 在網上搜了一下, 找到了這個- name conflict。如果加了腳本覆寫require函數再加載requirejs的庫, 這個時候雖然可以但是用不了node-webkit的那個dev tool了。把用requirejs的require改成requirejs,這樣就可以了。

 4.接下來當然就是想釋出應用。(distribute) 釋出後就使用者就可以當做普通的本地應用直接輕按兩下, 當然也不會要求使用者下載下傳node-webkit的,因為已經內建好了。

  官方推薦了這樣一個工具-grunt-node-webkit-builder。 當然你要先配好grunt, 這個算是grunt下的一個包, 運作這個的相關指令, 可以直接把我們的應用釋出到linux, mac, windows下面, 真是一次開發,多個平台使用。 感覺如果這個技術更加成熟的話, 這種輕松跨平台的特性, 一定會吸引很多人的。

 5.展望。 如果這個應用使用node-webkit的話, 感覺肯定要再增加一些特性使得體驗更好。 首先右鍵的菜單,提供便捷操作。 很多使用者都有使用右鍵的習慣,這個肯定是要有的。應用頭部的菜單可以提供儲存工作進度, 然後利用node的fs導出相關檔案。

繼續閱讀