轉戰WebApp: 最適合Android開發者的WebApp框架

原文出處： 林法鑫的博客 。 ps：原以為又是一篇前端從業者人云亦云的水文，其實是篇干貨，文中提到的 AndroidUI4Web 也是作者開發的。

為什么需要轉戰WebApp開發

隨著移動端設備越來越多, 微信應用號即將發布, 越來越多的頁面需要被移動瀏覽器承載, HTML5開發大熱, 我們需要掌握Web開發的技能來適應時代變化.

合適的WebApp框架

框架優點

1. 流暢度. 框架使用Web Canvas渲染頁面, 能有接近60fps的流暢度.

2. 原生級別體驗. 頁面過渡動畫, 滾動回彈, 點擊響應等等細節都是原生級別的體驗.

3. 穩定. 所有UI組件都是移植自Android, 組件內部邏輯與原生Android的一致, 穩定度也一致.

4. 易用. 對Android開發者可以超低成本上手開發.

5. 開發者社區. 所有API文檔用法和問題等都可以從Android社區找到.

Sample App

高性能的原因:Canvas

與Android開發相似

整個WebApp的開發流程與AndroidApp基本一致

HTML語法布局:

<FrameLayout>
    <TextView
            android:text="Hello world"
            android:gravity="center"
    ></TextView>
</FrameLayout>

TypeScript代碼:

module my.app {
    import Activity = android.app.Activity;

    export class MainActivity extends Activity{

        protected onCreate(savedInstanceState?:android.os.Bundle):void {
            super.onCreate(savedInstanceState);
            this.setContentView(R.layout.activity_main);
        }
    }
}

開始開發

Note: 代碼使用TypeScript書寫, 風格和語法與Java相似, 就算沒有接觸過TypeScript, 可以很快上手: http://www.typescriptlang.org/Handbook

準備環境

1. 下載IDE: 支持Typescript的IDE或者編輯器. (推薦使用 WebStorm )

2. 安裝Node.js: https://nodejs.org/

3. 安裝 Typescript : npm install -g typescript

4. 安裝 Babel轉碼器 : npm install -g babel-cli

5. 下載打開Hello World工程: 下載地址

6. 如果使用WebStorm, 打開工程后, 需要在設置中開啟TypeScript編譯以獲得更好代碼提示和錯誤檢查:Preferences -> Languages & Frameworks -> TypeScript: 1.Enable TypeScript Compiler. 2.use tsconfig.json

Hello World工程一覽

目錄/文件說明:

1. app.htmlApp入口頁面, 可以修改’title’標簽為你的App名字, ‘android-ui’標簽里定義activity為App的入口Activity

2. androidui-sdkAndroidUI框架存放的目錄, 如果框架版本有更新, 需要升級替換其中的文件.

3. build存放最終構建生成的js文件.

4. res & genres文件夾放圖片,布局等資源, 在構建時會生成R文件在gen目錄, 在代碼引用R文件調用資源

5. src代碼的存放目錄

查看WebApp

布局代碼

與Android工程一致, 布局文件存放在res/layout文件夾, 目前僅支持’.html’后綴的布局文件.布局代碼內容與Android工程一致, 如HelloWorld工程中的activity_main.html文件:

<FrameLayout>
    <TextView
            android:text="Hello world"
            android:gravity="center"
    ></TextView>
</FrameLayout>

需要注意的是目前不支持self-closing, 如上例中的TextView不能寫成:

<FrameLayout>
    <TextView
            android:text="Hello world"
            android:gravity="center"
    />
</FrameLayout>

另外layout_width和layout_height屬性不是必須項, 如果沒有定義則以父節點的默認定義為準. 參考ViewGroup.generateDefaultLayoutParams

如果新增了布局文件, 需要先手動執行build腳本, 才可以在代碼中以 R.layout.xxx 方式引用到這個布局:

./build.sh

TypeScript代碼

代碼存放在src目錄, 使用TypeScript書寫, 代碼風格和語法和Java較為接近, 可以很快上手并書寫代碼.框架的API和Android的一致, 上手TypeScript后, 就可以立馬開始使用框架了.

需要注意的一些事項是:

1. Java中可以省略this調用方法和屬性, 但TypeScript中必須帶上. 如: this.setContentView(…)

2. 一個類不能有多個同名的方法

3. 其他常見的Java開發開始寫JavaScript會遇到的問題.

修改代碼后必須手動執行build腳本:

./build.sh

然后刷新瀏覽器看到最新結果.

開發效率

實時查看View屬性:

代碼調試:

移動端的性能

打包成App發布

目前可以使用 Cordova(PhoneGap) 打包方案, 同時建議Android端打包進 CrossWalk 內核保證4.x系統的流暢度.

進入調試

在’android-ui’標簽加上debug屬性, 所有Android視圖節點都會以DOM節點的形式輸出到’android-ui’標簽里, 可以看到每個節點的大小位置.Chrome開發臺里選中對應節點后, 可以在節點的Properties里看到DOM節點的字段值, 所有Android節點的信息都在AndroidView字段里.