最近看了一個開源的新技術，就是利用js和html開發桌面應用，就像寫web頁面一樣，它就是heX，一個利用Node,js和HTML5來實現開發的技術。

而且維護這個開源技術的竟然是網易有道的一個團隊，真是不錯，這說明國內的技術真是提升了啊，不過目前好像只支援windows。

下面就來寫個HelloWorld來試試，究竟執行出來的效果到底怎樣。

先下載下來

解壓之：

首先看到的是這個程式：hexclient.exe，它就是程式的入口，用來執行你寫的html的一個啟動項。

建立一個專案hello

目前專案比較簡單，只有一個html頁面，不過估計以後如果真正做專案的話也應該只有一個index.html檔案吧，就像用jquerymobile一樣的單頁面專案。

首先測試測試一下對web基本元素的渲染情況怎麼樣：

<input type="button" id="bt" value="button"/>
	<input type="text"/>
	<Button>button2</Button>
	<select>
		<option>qqq</option>
		<option>qqq</option>
		<option>qqq</option>
	<select>
	<textarea></textarea>
 

把hello資料夾啊放在hex_3.1453.1188_windows下，然後開啟manifest.json，修改

設定成自己的檔案，然後儲存，執行hexclient.exe就看到上圖的結果了。感覺和在瀏覽器看起來沒什麼差別！

然後試試html5的東西

<form action="a.action">  
    <p>  
              <label for="email">電子郵箱：</label>  
              <input type="email" required autofocus name="email" id="email" placeholder="您的電子郵箱">  
    </p>  
    <p>  
              <label for="username">使用者名稱：</label>  
              <input type="text" pattern="^/w{6,12}$" required name="username" placeholder="6到12位的英文字元">  
              <input type="search" placeholder="使用者名稱搜尋" results="5" name="username-search" id="username-search">  
    </p>  
    <p>  
              <label for="username-search">生日：</label>  
              <input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10">  
    </p>  
    <p>  
              <label for="blog">部落格地址：</label>  
              <input type="url" name="blog" placeholder="您的部落格地址" id="blog">  
    </p>  
    <p>  
              <label for="mobile">手機：</label>  
              <input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手機號">  
    </p>  
    <p>  
              <label id="label-working-year" for="working-year">工作年限：</label>  
              <input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3">  
    </p>  
    <p>  
              <label for="age">年齡：</label>  
              <input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年齡">  
    </p>  
    <p>  
              <label for="avatar">頭像：</label>  
              <input type="submit" value="aaa">  
			  <input type="file" multiple onChange="uploadFile(this.files)">
    </p>  
</form>  
 

ok，還行，試試css3

<div id="demo" style="transition: all 700ms ease; -webkit-transition: all 700ms ease; -webkit-transform: rotate(40deg);">
						<h4><span>Profile</span></h4>
						<h5><span>We ♥ color</span></h5>											
	</div>

-webkit-backface-visibility: hidden;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) -1px -1px 3px 0px, rgba(0, 0, 0, 0.4) 11px 11px 18px 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transform-origin: 32.5px 360px;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.7s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(202, 13, 134);
background-image: url(http://tympanus.net/Tutorials/SwatchBook/images/fabric.png);
background-origin: padding-box;
background-size: auto;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.0980392) -1px -1px 3px 0px, rgba(0, 0, 0, 0.4) 11px 11px 18px 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
cursor: pointer;
display: block;
font-family: 'Open Sans Condensed', 'Arial Narrow', serif;
font-size: 15px;
font-weight: normal;
height: 400px;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: center;
top: 0px;
transition-delay: 0s;
transition-duration: 0.7s;
transition-property: all;
transition-timing-function: ease;
width: 130px;

ok，試試動畫效果：

<input type="button" id="bt" value="show" onClick="show()">
	<input type="button" id="bt" value="hide" onClick="hide()">
	<div id="showDiv" class="">
	
		<h1>aaaaa</h1>
	</div>

function show(){
	$("#showDiv").show();
	
	$("#showDiv").addClass("from-below");
	setTimeout(function(){$("#showDiv").addClass("effeckt-show");},300);
	
}
function hide(){
	$("#showDiv").removeClass("effeckt-show");
	
}

總結，感覺效果還不錯，由此感嘆js多麼重要，未來的發展方向啊，而且可以不用那麼繁瑣的利用java或者c++來開發桌面程式，為那些複雜的動畫效果而頭疼了，只用學習

html5的css3效果就夠了，更多效果請讀者自己試驗吧！

完！