HybridApp開發庫

開發App時, 把一些頁面使用HTML5開發, 集成到iOS和Android中, 比較省時省力. 那么來看看都有哪些主流庫可以使用呢?

本文主要關注三個: PhoneGap, DCloud, ReactNative, 并都做了嘗試.
PhoneGap: http://www.jianshu.com/p/c7fd736437b0
DCloud: http://www.jianshu.com/p/2cdf23c7c043
ReactNative: http://www.jianshu.com/p/d63c9a22973d

根據判斷, 目前使用ReactNative比較適合我們的需求.

1. 實時

PhoneGap 2.9.1最新版本竟然是2013年11月的.
DCloud和ReactNative都是最近更新的.

2. 友好

PhoneGap需要生成jar包導入, 并且不支持maven庫, 繼承CordovaActivity加載.

public class PhoneGapActivity extends CordovaActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 更換一下載入形式
        //setContentView(R.layout.activity_main);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

DCloud提供了多個jar包, 功能劃分的比較細致, 按需導入, 關聯代理和資源加載.

        if (mEntryProxy == null) {
            FrameLayout f = (FrameLayout) findViewById(R.id.js_contaner);
            wm = new WebappMode(this, f);
            mEntryProxy = EntryProxy.init(this, wm);
            mEntryProxy.onCreate(savedInstanceState, SDK.IntegratedMode.WEBAPP, wm);
        }

ReactNative提供maven庫, 配合npm加載模塊使, 啟動本地的服務, 通過自定義控件加載.

        mReactRootView = (ReactRootView) findViewById(R.id.test_js);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyAwesomeApp", null);

3. 示例

PhoneGap是apache的開源項目cordova, 文檔注釋都比較多, 項目較早.
DCloud是國內的HTML5庫, 文檔均以中文顯示, 比較方便學習, Demo提供很多示例和各種用法, 學習曲線比較低.
ReactNative是非死book公開的庫, 文檔自然比較全, 由于Android較新, 所以直到上一周才給出完整的文檔, Example是比較舊, 很難調用, 根據文檔學習如何開發, 目前關注很多.

4. 風險

PhoneGap目前看來屬于被拋棄的階段, 要不實在想不出為什么不更新文檔了.
DCloud是國內開發的庫, 目前還在迭代階段, 代碼比較混亂, jar包特別多, 但對國內的一些第三方庫支持較好.
ReactNatvie是非死book的新產品, 而且國內有些公司也在使用, 應該沒有問題, 學習之后, 知識也可以通用, 不至于太小眾.

推薦知乎的一篇關于ReactNative文章, 寫得非常好!
http://www.zhihu.com/question/27852694

5. 分享

PhoneGap的鏈接

官網: http://phonegap.com/
Cordova: http://cordova.apache.org/

ReactNative的鏈接

官網: http://非死book.github.io/react-native/
中文社區: http://reactjs.cn/
文檔: http://www.w3ctech.com/topic/909?utm_source=tuicool&utm_medium=referral

DCloud的鏈接

官網: http://www.dcloud.io/

綜上所述, 本人比較喜歡ReactNative.

ReactNative的詳細配置, 參考:
http://www.jianshu.com/p/7a6639d67783