我開發的是Android版的電子報，其實iPhone也是可以的，只是我沒有iPhone電腦也沒有iPhone手機，所以沒辦法做出APP檔也沒辦法測，就先用Android版的來看一下就好了，其實只有封裝成應用程式的檔案不同而已，其他內容都是相同的，這就是Mobile App的好處(跨平台特性)。
環境：Eclipse + PhoneGap
Eclipse是寫Android程式常用的平台
PhoneGap是Web和Android原生應用程式的中介軟體，不了解的官網上有教學：
不然參考這篇：PhoneGap(一)：下載及安裝
如果還是不了解歡迎來信問我^^
有Eclipse及安裝好PhoneGap後，你會在assets下的www內建立index.html首頁
附上程式碼：index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>XX工業電子報</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
function jump(count) {
window.setTimeout(function(){
count--;
if(count > 0) {
$('#num').attr('innerHTML', count);
jump(count);
} else {
location.href="content.html";
}
}, 2000);
}
jump(3);
});
</script>
</head>
<body style="height:100%">
<div data-role="page" style="height:100%">
<img alt="" src="images/logo.jpg" height="100%" width="100%">
</div>
<!-- /page -->
</body>
</html>
說明：放一個Logo圖的效果頁面，2秒後自動跳轉到內容頁面去
畫面：
內容頁面程式碼：Content.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>XX工業電子報</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
//$(function() {
//confirm('歡迎光臨!XX工業電子報!');
//});
</script>
</head>
<body style="height:100%">
<div data-role="page" style="height:100%">
<div data-role="header" data-position=""block"" data-theme="b"
data-backbtn="false" style="height:15%">
<img src="images/logo.png"
width="100%" height="100%"/>
<!-- /navbar -->
</div>
<div data-role="content" style="height:70%">
<ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="b" style="height:100%">
<li data-role="list-divider" style="text-align:center"><h4>盟鑫電子報</h4></li>
<li style="height:20%">
<a href="http://www.gold-joint.com/upload/epaper/20110627152907_8.html">
<img src="http://www.gold-joint.com/upload/epaper/photo_8_130915974764.jpg" width="30%" height="100%" />
<h2>第五期電子報</h2>
<p><h3>本期電子報的技術專欄是一篇關於重力式、懸臂式及景觀加勁擋土牆生命週期減碳的評估報告
，去年行政院規範公共建設的64項子計畫須有10％的比例，採用綠色工法、綠色材料或綠色商品
，從這篇報告結果顯示重力式及懸臂式擋土牆之CO2排放量幾乎為景觀加勁擋土牆的5~8倍
，此外加勁格網具有對土壤加勁的功能，牆面可噴植草籽或施工中於層間塞植具生根發芽能力的活枝條<h3></p></a></li>
<li style="height:20%"><a href="http://www.gold-joint.com/upload/epaper/20110627142420_5.html">
<img src="http://www.gold-joint.com/upload/epaper/photo_5_130802188871.jpg" width="30%" height="100%"/>
<h2>第四期電子報</h2>
<p><h3>仿岩預鑄疊磚以鋼筋混凝土為素材，由工廠一體成型生產出自然岩面造型並具結構安全性
，磚體之多階設計可加強上下磚体之互鎖性降低牆面因基礎差異沉陷及被填土壓造成之牆面局部破壞。
另外，可配合連結件結合格網施工，做垂直、退皆、交丁與不交丁之堆疊方式設計出符合現地之坡度及樣式
，提高擋土牆穩定性<h3></p></a></li>
<li style="height:20%"><a href="http://www.gold-joint.com/upload/epaper/20110627142447_4.html">
<img src="http://www.gold-joint.com/upload/epaper/photo_4_130802185946.jpg" width="30%" height="100%"/>
<h2>第三期電子報</h2>
<p><h3>本期案例介紹摘選的是墨西哥海岸保護的成功案例，該海岸內側是當地極具經濟價值之鹽湖
，為避免海岸遭受侵蝕而導致鹽湖受到破壞，因此採用兼具環保且經濟之海岸保護工法 – 地工砂腸
，此案例不僅達到保護鹽湖的功效，對於海岸環境的影響也減到最小<h3></p></a></li>
<li style="height:20%"><a href="http://www.gold-joint.com/upload/epaper/20110627142525_3.html">
<img src="http://www.gold-joint.com/upload/epaper/photo_3_130802182712.jpg" width="30%" height="100%"/>
<h2>第二期電子報</h2>
<p><h3>本期電子報工程案例『仙區3林班9號隧道口邊坡處理工程』，是成功使用矩形錐立體植生網的實際案例
，技術專欄主題延續工程案例，介紹植生網相關的抗拉強度試驗規範，發燒話題是本期主角矩形錐立體植生網
，內容有植生網特色及不同的應用範圍及施工方式<h3></p></a></li>
<li style="height:20%"><a href="http://www.gold-joint.com/upload/epaper/20110627142548_2.html">
<img src="http://www.gold-joint.com/upload/epaper/photo_2_130802172775.jpg" width="30%" height="100%"/>
<h2>創刊號電子報</h2>
<p><h3>九月發行首期電子報，主要介紹國內外常用之各種生態工程之工法規劃設計、施工及相關地工合成材料之應用資訊
、國內外技術專欄、相關論文等深入之專業技術內容，期望提供國內相關工程設計單位
、主辦機關及學術單位對於生態工程應用之參考與交流。<h3></p></a></li>
</ul>
</div>
<!-- /content -->
<div data-role="footer" data-theme="b" style="height:8%">
<h4>作者：Jim</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
說明：Logo頁面2秒後就會跳到此主要內容頁面，條列方式出現個期電子報，點擊電子報就會開啟瀏覽器連結至網站的電子報
畫面：
後記：
整支程式其實不是很難，都是HTML，只寫到一點點JQuery，然後了解一下JQuery Mobile的ListView用法就能輕鬆寫出這支漂亮又實用的程式了。
開發此種Mobile App需有的認知：
1.雖然是內嵌在手機內的網頁，不過總歸它還是網頁，所以需要能連結網路
2.如果想離線的形式的話也是可以，但必須把圖片都存在APP內，這樣APP會很龐大
在手機應用程式如此計較儲存空間及效能的情況下，全放在APP內其實不太建議。
3.應用程式其實除了我這種寫法之外，其實還能用比較動態的寫法，就是用JSON
，打開APP後，應用程式會去遠端的網站抓資料(用JSON或XML傳送)，抓下來後
用JQuery轉出寫入到手機內的html中，這種方法也是可以，可以省掉需要一直更新
我這種方法需要更新APP來更換APP的內容，有機會再來實作用JSON及WebService
的動態更新方式，謝謝歡賞，有問題歡迎留言或寄信給我。
沒有留言:
張貼留言
您的寶貴建議是我前進的動力!