Jndroid是一個JavaScript框架,能夠讓開發者使用Android的方式開發網頁。Jndroid基於Android的視圖樹架構,在Html Dom樹的基礎上,封裝了動態布局,事件分發,canvas繪製等技術。Jndroid集合了前端開發和Android開發的優勢,可以幫助開發者更加高效的開發出互動性更強的WebApp。
基本介紹
- 中文名:Jndroid
- 外文名:Jndroid
- 出現時間:2015年6月
- 類別:網頁開發技術
基本概念,HelloWorld,建立HTML頁面,引入Jndroid框架,開始套用開發,核心技術,動態布局,事件分發,Canvas繪製,核心優勢,vsHTML+CSS+JS,vsAndroid,
基本概念
Jndroid 是把 Android 寫 App的一套思路和 API 放到了寫 WebApp 上。主要是方便移動App 開發者需要寫一個 WebApp 的時候,如果並沒有很好的前端基礎,那么可以簡單的學一下 Javascript 的基礎語法,便可以開始寫 WebApp 程式。
Jndroid 的開發團隊認為,既然現在 WebApp 是一個 App 而不是一個頁面,那么我們就應該去借鑑移動端開發已經很完善的一套開發思路去進行開發,這樣不僅僅開發上面會更加合理和容易,而且做出來的 App 也會顯得非常有邏輯性和很好的互動性。
HelloWorld
建立HTML頁面
創建一個Demo.html檔案,用你喜歡的編輯器輸入以下內容。
<!DOCTYPE html><html> <head> </head> <body> </body></html>
引入Jndroid框架
<!DOCTYPE html><html> <head> <script src="/jndroid.js"></script> </head> <body> </body></html>
僅需在head中引入jndroid.js,便可開始正式開發了。
開始套用開發
Jndroid的API參考了AndroidAPI的格式,所以基本的邏輯就是創建View,把View的層級安排好,通過調用setContentView以及addView這些API來把界面插入到頁面中去。
<!DOCTYPE html><html> <head> <script src="/jndroid.js"></script> </head> <body> <script> /* 創建一個 FrameLayout 用來作為當前的 RootView */ var mLayout = new FrameLayout(); mLayout.setBackgroundColor(0x1a000000); /* 沒有Activity,直接setContentView就可以得到一個全螢幕的視圖 */ setContentView(mLayout); var mTextView = new TextView(); mTextView.setText("helle world"); mLayout.addView(mTextView); </script> </body></html>
至此,HelloWorld就開發完成了。
核心技術
Jndroid在HTMLDOM樹之上,封裝建立起一套Android視圖樹,並在該視圖樹上,實現動態布局、事件分發、Canvas繪製等技術。
動態布局
Jndroid中不使用CSS進行頁面布局,而使用View的onMeasure和onLayout方法進行布局。每個View在其onMeasure方法中對其子節點進行尺寸的測量,並最終確立自身尺寸。每個View在其onLayout方法中確定子節點的坐標。動態布局理論上比CSS擁有更強的布局能力,從而可以實現更為複雜的布局。[2]
事件分發
Jndroid中不使用Html默認的Touch事件及Mouse事件處理流程,而是對其封裝,建立一套基於MotionEvent的事件分發體系。在該體系中,dispatchTouchEvent方法負責向子節點分發事件,onInterceptTouchEvent方法用來確定是否要在分發前攔截該事件,onTouchEvent方法為View自身對Touch事件的處理,requestDisallowInterceptTouchEvent可以通知父節點及祖先節點不要對事件進行攔截。
Jndroid中的dispatchTouchEvent方法和onTouchEvent方法對應原生Html事件的分發和冒泡,除此之外還引入了onInterceptTouchEvent方法和requestDisallowInterceptTouchEvent方法,因此比原生Html擁有更強的事件處理能力,從而可以實現更為複雜的互動。
Canvas繪製
Jndroid中封裝了Htmlcanvas的繪製,將context的繪製封裝在View的onDraw方法中,同時封裝了不同螢幕密度的處理以及重繪機制。使用Jndroid,可以方便的實現Htmlcanvas的移動、調整、切分、疊加、重繪等操作。
核心優勢
vsHTML+CSS+JS
·Jndroid具有更強的布局能力
·Jndroid具有更強的事件處理能力
·Jndroid可以方便的實現封裝和繼承
vsAndroid
·Jndroid是跨平台的
·Jndroid的開發效率遠高於Android開發
·Jndroid可以方便的實現圓角、陰影、字型設定等