C# asp.net PhoneGap html5

標籤：

很久沒寫部落格，今天自己寫一篇吧。來談一談c# PhoneGap,html5 與asp.net。能搜到這篇部落格就說明你是一位.net開發人員，即將或者正在從事移動開發。

大家可能都有疑，我是一名.net開發人員，能用.net做蘋果，安卓，wp平台的應用嗎？

如大家所知，phoneGap是用來開發跨平台行動裝置 App的，而且phoneGap能調用移動設定的硬體介面，實現一些普通html在行動裝置上無法實現的功能，比如拍照，錄音，錄製視頻等。

要做html5頁面為單元的應用，一定少不了與伺服器進行資料互動。想到的與伺服器互動有兩種方案：

一種是使用預設的本地HTML方式（當然也可以把HTML放在伺服器端，但是這樣還不如使用第二種方案），一種是全程使用伺服器指令碼，比如JSP頁面，當然這些頁面肯定是放在伺服器端，用戶端只需要在初始化的時候引用這個頁面即可，Android用戶端，代碼如下：

public class MyActivity extends DroidGap {
　　@Override
　　public void onCreate(Bundle savedInstanceState) {
　　super.onCreate(savedInstanceState);
　　//super.loadUrl("file:///android_asset/login.html");
　　super.loadUrl("http://220.166.32.204:8080/test/login.jsp");
　　super.setIntegerProperty("loadUrlTimeoutValue", 15000);
　　}
}

（注釋掉的代碼為PhoneGap預設的本地HTML方案）

另一種是http請求即為伺服器指令碼解決方案

各有各的好處，本地HTML方案可以把代碼和伺服器端的代碼隔離開，維護只需要維護用戶端，無需修改伺服器端，並且因為是本地讀取，可以在無網路情況下使用應用程式（可以把資源儲存在本地sqlLite資料庫中）；伺服器指令碼解決方案好處是代碼簡單，和開發普通web頁面幾乎無差別，甚至可以直接使用之前針對PC寫好的web頁面，JS識別裝置動態更換一下CSS樣式即可。

我使用的是本地HTML5解決方案，在資料互動上，使用的是ajax，使用jQuery的ajax方法，JS代碼如下：

function pullNoticeList(){
　$.ajax({
　　url:addr+"notice_list.action",
　　type:"POST",
　　dataType:"jsonp",
　　data:{"start":"0","limit":"8","sort":"effectiveDate","dir":"DESC"},
　　beforeSend: function(){
　　$("#content").html("<p>資料拉取中，請稍後...</p>").trigger("create");
　　},
　　success:function(response){
　　var startHtml = ‘<ul id="listview" data-role="listview" data-theme="c">‘;
　　var endHtml = "<li id=‘more‘><p >;
　　$.each(response.noticeList,function(index,item){
　　startHtml+="<li><a href=‘javascript:showDetail("+item.noticeId+");‘><p>"+item.noticeTitle+"<span class=‘ui-li-aside‘>"+item.effectiveDate+"</span></p></a></li>";
　　});
　　$("#content").html(startHtml+endHtml).trigger("create");
　　},
　　error:function(){
　　showReConnConfirm();
　　}
　});
}

必須使用jsonp格式，不然無傳回值，其次，注意返回的json格式，一定要符合jQuery的json格式，可以通過firedug查看調試json，伺服器端使用的struts，可以使用struts的json外掛程式，可以很智能把對象封裝成json格式。

如果你想用phoneGap做一款跨平台的應用，首先要確定會不會調用行動裝置的硬體介面，如果不需要調用，那麼第一張方案是最佳的選擇，維護開發與平常web幾乎沒區別，最佳的適合我們.net開發人員，因為我們可以直接選擇用aspx頁面來開發。

但是如果項目有要求要調用行動裝置的硬體介面，那麼必須要選擇用第二種方案了。

這時，與伺服器互動，html5端用ajax，後台可以用aspx，或者ashx，或者asmx，即分別對應普通aspx頁面或者一般處理常式ashx頁面，或者直接寫webservice服務都行。希望能幫到大家。

移動開發html5，必將是主流，一起迎接吧！

C# asp.net PhoneGap html5