深度支持Android平臺，基於Rexsee的移動Web應用實現

時間 2019-11-08

標籤深度支持 android 平臺基於 rexsee 移動 web 應用實現欄目 Android 简体版

原文原文鏈接

2008年11月，《連線》雜誌主編Chris Anderson一文「Web已死，Internet永生」在移動互聯網大幕拉開之際引發軒然大波。應用交付的轉變註定了傳統Web模式已再也不知足用戶的需求與體驗，Web應用向移動終端的滲透變得異常重要。javascript

對於須要吸引不一樣羣體用戶，知足不一樣業務需求的應用而言，如何使用一個實用、成本合理，且可支持大量應用的開發方式來實現咱們的移動願景？在不少狀況下看來，答案是使用Web技術。php

伴隨着移動設備與網絡結合緊密度的提高，移動平臺的普遍支持，以及以HTML5爲驅動的Web技術不斷演進發展，以Web爲中心的移動應用趨勢愈發明顯。原生應用和移動Web應用的界線也開始逐步縮減。css

同時，衆多移動Web開發框架的升級發展也加速了Web應用向移動終端的滲透。以國內開源的移動Web開發平臺Rexsee（www.rexsee.com）爲例，基於大量的擴展API，經過Javascript實現Web應用對移動終端功能的直接調用，創建起了Web應用與移動終端的橋樑。html

模糊Web應用與原生應用界線前端

原生應用，也就是Native App，能夠充分的發揮硬件設備和操做系統的功能特性，並能夠徹底不受網絡限制，運行效率高，且在用戶體驗方面有着突出優點。但同時，由於技術門檻的緣由，原生應用在具體實現上須要面對開發週期較長、成本較高、調試與發佈以及後期管理維護相對複雜的問題。java

對比Web應用，雖然在複雜的用戶交互界面效果，以及對硬件功能的實現方面有着明顯劣勢，但使用標準化的Web技術爲開發者帶來了很大的自由度、普遍的應用範圍和低廉的成本。android

但即使如此，以瀏覽器爲平臺的Web應用相較於原生應用仍舊面臨着諸多難以逾越的困境，其中最明顯的則是對網絡的依賴以及對移動終端的功能支持。web

出於安全考慮，瀏覽器沒法讀取本地資源，對於移動設備的不少功能不能直接調用，好比通信錄、GPS、藍牙；基於瀏覽器的Web應用嚴重依賴網絡，一旦網絡狀況不佳，不少交互沒法進行；因爲HTTP協議自己的限制，對於消息、推送等功能也會有所影響； ……

讓Web應用脫離網絡，超出瀏覽器範圍運行，並可直接調用移動終端功能。基於這樣的價值實現，Rexsee（ www.rexsee.com）經過實現一種混合應用的形態，進一步模糊了原生應用與Web應用的界線。

Rexsee支持開發者以標準化Web開發模式，即便用HTML五、CSS3和JavaScript開發，並可經過在線編譯生成原生應用客戶端，快速實現移動應用。瀏覽器

以Webkit爲內核，在應用中保留瀏覽器元素，強化HTML5在瀏覽器以外的高度交互特性。
基於原生開發，擴展接近2000個API，經過Javascript直接調用移動終端功能。
符合W3C標準，徹底兼容Sencha Touch、jQuery Mobile等第三方JavaScript工具包。
提供雲端應用與本地應用的不一樣展示形態，可徹底脫離網絡運行。

跨平臺的取捨價值安全

iOS和Android的首當其衝，Symbian、黑莓、Meego、WebOS的夾縫求生，多種移動操做系統平臺在當前的移動互聯網中各自有着大批用戶支持。擺脫平臺和硬件環境的差別，讓應用適配於所有平臺，成爲了移動Web應用一開始就須要承擔的責任。

下降了對平臺和底層的學習成本，提升代碼複用以及最終應用交付的適用範圍，這是跨平臺的優點所在。可是，劣勢一樣明顯：爲兼顧不一樣平臺，開發框架會相對臃腫，開發模式也會被動調整；其次，對於不一樣硬件功能的調用不免會由於迎合不一樣功能交集而作出捨棄，沒法全面實現。

以當前最受關注的iOS平臺和Android平臺爲例。前者因爲不支持js調用，本來在Android平臺上最爲便捷的開發模式需在iOS變成一種「hack」行爲，異步調用也成爲了讓開發者頭疼而又不得不採起的選擇。

「一次開發，處處運行」成爲了開發人員指望實現但又難以作到的問題。基於這樣的一個魚與熊掌的取捨，Rexsee選擇深度支持Android平臺，從而保證了高效同步的開發方式，以及全面功能的應用交付。截至目前爲止，Rexsee提供了接近2000個擴展API，覆蓋95%的Android原生功能實現。

同時，針對於目前移動Web開發框架所面對的一個通病，即缺少對系統原生UI控件的調用能力，難以實現等同於原生應用的界面展示這一問題，Rexsee在最新發布的2.8版本里（infoQ報道：http://www.infoq.com/cn/news/2012/02/rexsee2.8-release）擴展多個對象，主要用於建立和管理原生界面元素，支持Android系統的原生UI佈局（目前已支持Android SDK Platform API8的所有佈局）。

開發者能夠經過JS直接生成androidSDK中定義的佈局對象和基本對象，對這些對象經過設置樣式屬性能夠很靈活的控制其樣式，徹底實現等同於原生應用的界面展示與交互體驗。

基於Rexsee的標準化Web開發模式

基於Rexsee的Android應用可使用標準化的Web開發模式進行開發。全部的Rexsee代碼僅體如今Web前端，放在HTML頁面的<script>標籤內。

編寫Rexsee客戶端，實際上就是編寫Rexsee所能理解、渲染的HTML、CSS和Javascript代碼。與瀏覽器不一樣，Rexsee這個「瀏覽器」除了支持Webkit支持的全部對象外，又擴展了100多個Javascript對象及相應的2000個方法和事件。

Rexsee自己具有了瀏覽器的全部功能，可以加載任何網頁代碼，並渲染效果。在此以外，Rexsee提供了本地功能的調用接口，能夠實現對本地存儲、通信錄、傳感器、定位信息等本地功能的調用。同時，還提供了離線提交、push推送等原生應用功能。而這些，都是普通瀏覽器沒法作到的。

界面：Rexsee的頁面設計支持Web佈局和原生布局兩種形態：針對於原生布局，能夠經過Javascript語言構造出AndroidSDK中的佈局和基本對象，結合相應的觸屏事件，能夠有很好的用戶體驗。且支持2D和3D的繪圖功能；針對Web佈局有兩個不一樣類的對象，一是頁面內對象，一是頁面外對象。

頁面內對象指的是網頁對象，如表格、DIV層、圖片、畫布等。能夠用CSS來控制其樣式，其渲染效果由Webkit引擎負責展示。
頁面外對象是指網頁之外的元素，如各類Bar，對話框（Dialog），彈出窗口等。使用Rexsee的樣式表定義，如該對象的位置、寬、高、透明度、顏色、字體等。頁面外元素的樣式是經過相關對象的樣式設置方法來操做的。

功能調用：同時支持同步和異步兩種調用方式。實現多媒體支持，定位、位置服務，傳感器，存儲，藍牙、wifi，以及推送和通知等功能。
交互：經過Javascript的事件接口、Rexsee的事件接口以及Rexsee私有協議實現。

特別指出，私有協議是經過諸如：rexsee:info；rexsee:about等；
Rexsee的事件接口已經由Rexsee內置註冊，使用時只需在相應的事件函數中編寫用戶代碼便可，在事件觸發時，用戶代碼會被執行。

調試：和原有的Web前端開發一致。同時，Rexsee自己也提供了異常事件，用於捕捉錯誤。
編譯：整個過程其實就是將Rexsee代碼和Rexsee客戶端關聯的過程。

能夠體如今B/S架構下，只需將Rexsee代碼所在的URL和Rexsee客戶端首頁綁定。這種架構下，Rexsee代碼其實是部署在服務器端，客戶端體積小，無需下載更新便可實現應用升級。
也能夠在C/S架構下，須要將Rexsee代碼、資源文件打包進Rexsee客戶端，這種架構模式更加相似於原生應用，徹底擺脫網絡束縛，啓動和運行效率較高。
同時，Rexsee還提供了B/C/S混合架構模式，即整合B/S和C/S的優點。

對於開發者而言，只需在掌握Web前端開發的基礎上，按需選用Rexsee提供的Javascript對象，按照Rexsee對象的方法、事件編寫代碼即可實現相應功能。

RexseeHello World

Rexsee開源技術社區在去年年末推出在線開發服務，登錄社區並訪問「項目中心」就可在線建立、開發應用。同時，該服務更強化了開發者之間的應用源碼分享。在Rexsee項目中心，咱們能夠很方便的在線實現第一個Hello World程序。

進入項目中心（http://www.rexsee.com/project/index.php）後，點擊左側頭部的「建立新項目」開始我們的Hello World應用建立。只需在對應的信息錄入框中填寫應用信息，並勾選權限設置便可建立成功。

編寫index.html頁面，輸入以下代碼：

<html>
<head>
<title>Rexsee Hello World</tiltle>
<script type=text/javascript>
//Rexsee代碼從這裏開始
window.onRexseeReady=function(){
  rexseeDialog.toast('系統加載完畢！');//出現後隨即消失效果
}
</script> 
</head>
<body></body>
</html>

說明：

Rexsee提供的是JS API，能夠在HTML中加入<scripttype=text/javascript></script>標籤；也能夠在外部文件中添加JS代碼，而後引用；
本段代碼中用到了window.onRexseeReady=function（），即當系統加載完畢後，自動執行{}中的JS語句；
rexseeDialog.toast()，這行代碼執行時會彈出一個隨即消失的對話框；
更多詳細的JS對象和事件說明能夠在Rexsee社區的「手冊與源碼」中獲取，或者直接下載Rexsee開發手冊：

手機在線版手冊：http://www.rexsee.com/rexsee/rexseeReference.apk
手機本地版手冊：http://www.rexsee.com/rexsee/rexseeLocalReference.apk

隨後，利用Rexsee開發版能夠方便的查看應用效果並快速調試。

圖1. Rexsee Hello World應用截圖

Rexsee的開發手冊便是一個具體的APK應用程序，具體對象和事件函數的示例演示可在手機上直接運行。

Rexsee開發版是一個專門用於調試Rexsee應用的軟件。開發者能夠訪問以下連接，免費下載Rexsee開發版，並安裝在測試用的Android手機，或者模擬器上。Rexsee開發版：http://www.rexsee.com/rexsee/rexseeDeveloper-release.apk ；Rexsee模擬器（有點大）：http://www.rexsee.com/rexsee/RexseeEmulator.rar

在代碼編寫完成以後，點擊項目右上角的「編譯」按鈕就能直接得到一個APK下載地址和該應用的二維碼圖形。我們的第一個應用開發流程也就所有結束，你能夠將編譯完成的APK應用投放到任何一個第三方應用市場，並加以推廣和運營。

除了基於項目中心的在線開發，你也能夠在本地進行。只需將上面示例中的代碼編寫到index.html文件中，而後打包爲zip格式文件，再利用Rexsee的在線編譯功能實現封裝，一樣得到APK程序。

理論上你能夠把除了後臺代碼以外的東西都打包到ZIP包裏，好比一些圖片，音視頻文件，或者HTML的框架文件，CSS文件，JS文件。但考慮到安全、網絡速度、流量、交互體驗等各方面需求，建議根據具體應用項目來安排。

五分鐘建立指南針應用

在熟悉了一個簡單的應用開發流程之後咱們能夠結合Rexsee的擴展對象，快速實現一個具體的Android應用。在此，咱們以指南針應用爲例。

首先須要開啓Android的傳感器功能，利用Rexsee的「rexseeOrientation.start()」，而後把方向改變時觸發的事件寫上。

function onOrientationChanged(){   //方向傳感器事件,即當方向發生改變時觸發的動做
  var x = rexseeOrientation.getLastKnownX();
  x = 90 - x;
  document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
}

其次則是處理應用展示中的圖片問題，只須要找兩個好看的圖片，一個羅盤，一個指針就能夠搞定。

<div id='Layer1'>
  <div id="northDiv"><img src="img/north.png" width="300" height="300" /></div>
  <div id="oriDiv"><img src="img/compass.png" width="260" height="260" /></div>
</div>

發佈後咱們就能夠獲得一個最基本的指南針應用。

圖2. 指南針應用截圖

該應用完整源碼以下。（一樣是在index頁面進行編輯）

<html>
<head>
  <style type="text/css">
#Layer1 {
	position:absolute;
	top:20px;
	z-index:1;
}
#northDiv {
	position:absolute; 
	z-index:2;
}
#oriDiv {
	position:absolute;
	top:23px;
	left:22px;
	z-index:2;
}

</style> 
<script >
  rexseeOrientation.start();
  rexseeDialog.toast('準備啓動');

function onOrientationChanged(){   //方向傳感器事件,即當方向發生改變時觸發的動做
  var x = rexseeOrientation.getLastKnownX();
  x = 90 - x;
  document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
}
</script>
</head>
<body align='center'>
<div id='Layer1'>
  <div id="northDiv"><img src="img/north.png" width="300" height="300" /></div>
  <div id="oriDiv"><img src="img/compass.png" width="260" height="260" /></div>
</div>  
</body>
</html>

結語

移動互聯網大幕纔剛剛拉開，原生應用與Web應用的並存也會在很長一段時間內持續，誰會最終佔據主導其實並不重要。基於開放的平臺策略，穩定提高應用性能，爭取更多用戶並創造更佳用戶體驗，將是推動這浪潮創新發展的關鍵所在。Rexsee也將致力於此，不斷完善，打造更加普遍的開發者基礎。