用HTML5和JS開發(fā)本地應(yīng)用程序

用HTML5和JS開發(fā)本地應(yīng)用程序本人玩過很多計(jì)算機(jī)編程語言，從VB、C、VC++、DELPHI、JAVA—直到現(xiàn)在用的Javascript和node.js，可以用一句話概況“多而不精”當(dāng)然這也反映了計(jì)算機(jī)的發(fā)展過程，從單機(jī)程序向網(wǎng)絡(luò)程序逐步過渡。但在我們的工作過程中會(huì)發(fā)現(xiàn)，在某些情況下，操作本地資源的能力也是不可或缺的，做一個(gè)桌面軟件也很有必要。那么是不是需要重新揀起VC或DELPHI呢？不說需要重新安裝幾個(gè)G的開發(fā)環(huán)境，丟下用順手的語言，重新用另一種語言，也很不合算。那么Javascript可以開發(fā)桌面程序嗎？答案是肯定的。在Github上就有一個(gè)開源的項(xiàng)目node-webkit，現(xiàn)在已更名為nw.js。它就可以實(shí)現(xiàn)這個(gè)功能。那么它是怎樣實(shí)現(xiàn)的呢？Nw.js這個(gè)項(xiàng)目采用webkit內(nèi)核作為界面顯示的引擎，眾所周知，webkit是對(duì)html5支持最好的一個(gè)瀏覽器之一，我們可以用最新的html5技術(shù)來開發(fā)我們的桌面軟件。但考慮到安全性，webkit不支持操作本地資源。Nw.js就想到了一個(gè)創(chuàng)新的想法，它把node.js集成了進(jìn)來，而且讓node.js和webkit的Javascript引擎運(yùn)行在同一個(gè)進(jìn)程中。這樣就完全打通了前端和后端。我們完全可以用html5和Javascript來開發(fā)一個(gè)桌面級(jí)的應(yīng)用軟件。下面我就以一個(gè)簡(jiǎn)單的功能開說明開發(fā)的經(jīng)過。首先要下載nw.js，可以在github下載源碼自己編譯。也可以到官網(wǎng)下載編譯好的二進(jìn)制文件或者是安裝文件。在windows環(huán)境下，當(dāng)然是下載msi安裝文件更方便。下載安裝后，有這樣一目錄結(jié)構(gòu)：名稱.locales修改日期 類型K小2015/6/47:45jg,匚redits.html2015/5/2210:47HTML^B852KB感d3dcompiler_47.dll2015/5/2210:473,386KB陸ffmpegsumo.dll2015/5/2210:47939KB_icudtLcht2015/5/2210:47KMPlayer.dat10,213KB色libEGL.dll2015/5/2210:4772KB色libGLESv2.dll2015/5/2210:471,447KB@1nw.exe2015/5/2210:4745,256KB-_jnw.pak2015/5/2210:47PAK文件7,305KB叵］nwjc.exe2015/5/2210:475,034KB越pdf.dll2015/5/2210:4711,960KB其中最重要的就是nw.exe這個(gè)可執(zhí)行文件。我們只要編寫好自己的腳本，然后把腳本拖到nw.exe上面即可運(yùn)行，是不是非常簡(jiǎn)單呢？當(dāng)然，我們也可以把我們的腳本打包為可執(zhí)行文件?？上?，打包后的程序體積比較龐大，想想一下，我們的程序集成的功能，你就會(huì)明白體積龐大是必然的。其次，編寫我們的程序腳本。我們自己的腳本最好存放在一個(gè)單獨(dú)的文件夾中。比如APP。在這個(gè)文件夾中，最重要的是package.json文件。這個(gè)文件定義了程序的入口文件，以及窗口的樣式等等，{"name":"nw-demo","version":"0.0.1","main":"index.html",//入口的HTML文件"window":{"toolbar":true,//是否顯示toolbar"width":800,//窗口的寬和高"height":500,"frame":true}}這是一個(gè)JSON格式的文本文件，我們可以自己用記事本或notepad++來創(chuàng)建。最后，就是編寫我們自己的腳本了。其實(shí)就是寫網(wǎng)頁啊，作為前端工作人員，這肯定是您最擅長(zhǎng)的工作了。當(dāng)然，因?yàn)橐僮鞅镜刭Y源，你還得會(huì)node.js。我要做一個(gè)把word復(fù)制過來的圖文文檔轉(zhuǎn)換為HTML的軟件。必須得把本地圖片讀取出來編碼為BASE64符加在HTML中。好在html5本身支持剪貼板，我用如下代碼為文本框綁定了onpaste(粘貼)事件：document.getElementById('testInput').addEventListener('paste',function(e){varclipboardData=e.clipboardData;if(clipboardData.types.indexOf('text/html')!=-1){vars=clipboardData.getData('text/html');〃將本地文件中的圖片都轉(zhuǎn)化為base64編碼document.getElementById('wordhtml').innerHTML=s;varimgs=document.getElementsByTagName('img');for(vari=0;i<imgs.length;i++){//imgReader(imgs[i]);imgs[i].onload=imgReader(imgs[i]);}});varimgReader=function(image){vardata=base64_encode(image.src);console.log(data);image.src=data;};關(guān)鍵代碼在base64_encode中。這里需要調(diào)用本地資源，讀取圖片然后編碼為base64格式。varfs=require('fs');varos=require('os');functionbase64_encode(file){file=file.substr(8);〃必須去除前面的HYPERLINKfile:///varhead='data:image/png;base64,';varext=file.substring(file.lastIndexOf('.')+1).toLowerCase();console.log(ext);if(ext=='jpg'||ext=='jpeg'){head='data:image/jpg;base64,';}elseif(ext=='png'){'data:image/png;base64,'}elseif(ext=='gif'){'data:image/gif;base64,'}varbitmap=fs.readFileSync(file);//convertbinarydatatobase64encodedstringvardata=newBuffer(bitmap).toString('base64');returnhead+data;

相信對(duì)于熟練使用javascript的同學(xué)而言，這些代碼是非常好理解的?，F(xiàn)在我們要去行這個(gè)程序，把APP這個(gè)文件夾往nw.exe上一拖，就開始運(yùn)行了。Gfile:///C:/Users/Administrator/Downloads/nwjs-v0.12.2-win-ia32/appl/index.html 三Q而文檔復(fù)制后粘貼到輸入框中這里沒有把toolbar去除，這是為了調(diào)試方便，在最終發(fā)行時(shí)可以很容易的去除,您在chrome上學(xué)到的調(diào)試手段，這里都可以用上。把word文檔粘貼上去后是這樣的：?粘貼WORD文檔內(nèi)容你看電腦神奇不？它可是采用了數(shù)學(xué)中的二進(jìn)制的原理，沒有二進(jìn)制數(shù)學(xué)的各種計(jì)算法則，就不可能誕生計(jì)算機(jī)。V1OO51011OV1OO51011OOO101001我們?cè)跁匣螂娨暽峡赡芸吹竭^“黑洞"這個(gè)詞，“黑洞”是連光線都會(huì)被它吸走跑不岀來的怪物，那么你可能會(huì)很奇怪，既然都看不見，那么科學(xué)家杲怎么知道“黑洞”在那里的呢？