android cordova hybrid app總結

越做越害怕，底子不足就是心虛，呵呵，所以是該從新審視基礎的時候了！放棄一些浮華的技術，向着根基出發！

        寫了一段h5的界面，又回到了android中，有一種回到初終的感覺，android始終是個系統，不只是只有apk的容器，所以有必要看看linux的相關東西，真的這個挺重要的！

        先從工具說起吧，這個可是走了好多彎路的地方，頁面先可以用webstorm寫代碼很方便，開服務還是用idea，當然集成到apk還是android studio，頁面調試用的chrome，重點要說手機頁面調試也是chrome，現在地址欄輸入chrome://inspect/#devices，勾選usb devices，找到相應的inspect，然後就和F12一樣了，如是碰到了白屏就不去那就需要翻牆，然後就能進去了，我爺被這個害了好久，還有Ripple也很好用謝謝大牛提供的資源學習 大神神作

        工具完成就說說集成和插件吧，cordova5.1.1版本：

      （1）activity集成  佈局如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <org.apache.cordova.engine.SystemWebView
        android:id="@+id/cordovaWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

public class CordovaActivity extends org.apache.cordova.CordovaActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        super.init();
        final String packageName = CordovaActivity.this.getPackageName();
        final PackageManager pm = CordovaActivity.this.getPackageManager();
        ApplicationInfo appInfo;

        try {
            appInfo = pm.getApplicationInfo(packageName, PackageManager.GET_META_DATA);
            if((appInfo.flags & ApplicationInfo.FLAG_DEBUGGABLE) != 0 &&
                    android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT)
            {
                setWebContentsDebuggingEnabled(true);
            }
        } catch (PackageManager.NameNotFoundException e) {
            e.printStackTrace();
        }
        launchUrl = "file:///android_asset/www/index_b.html";
        loadUrl(launchUrl);
    }

    @Override
    protected CordovaWebView makeWebView() {
        SystemWebView webView = (SystemWebView)findViewById(R.id.cordovaWebView);
        return new CordovaWebViewImpl(new SystemWebViewEngine(webView));
    }

    @Override
    protected void createViews() {
        if (preferences.contains("BackgroundColor")) {
            int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);
            // Background of activity:
            appView.getView().setBackgroundColor(backgroundColor);
        }
        appView.getView().requestFocusFromTouch();
    }
}

      （2）fragment集成  佈局給個相對佈局就行

        

public abstract class CordovaFragment extends Fragment {

    private CordovaWebView webView;

    protected CordovaPreferences preferences;
    protected String launchUrl;
    protected ArrayList<PluginEntry> pluginEntries;
    protected CordovaInterfaceImpl cordovaInterface;

    protected void loadConfig() {
        ConfigXmlParser parser = new ConfigXmlParser();
        parser.parse(getActivity());
        preferences = parser.getPreferences();
        preferences.setPreferencesBundle(getActivity().getIntent().getExtras());
        launchUrl = parser.getLaunchUrl();
        pluginEntries = parser.getPluginEntries();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_home_cordova, container, false);
        cordovaInterface =  new CordovaInterfaceImpl(getActivity());
        if(savedInstanceState != null)
            cordovaInterface.restoreInstanceState(savedInstanceState);

        loadConfig();

        webView = new CordovaWebViewImpl(CordovaWebViewImpl.createEngine(getActivity(), preferences));

        RelativeLayout.LayoutParams wvlp = new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT);
        webView.getView().setLayoutParams(wvlp);

        if (!webView.isInitialized()) {
            webView.init(cordovaInterface, pluginEntries, preferences);
        }
        cordovaInterface.onCordovaInit(webView.getPluginManager());
        ((RelativeLayout)rootView).addView(webView.getView());
        webView.loadUrl(getHtmlUri());
        return rootView;
    }

    @Override
    public void onDestroy() {
        webView.handleDestroy();
        super.onDestroy();
    }

    abstract protected String getHtmlUri();
}

public class HomeFragment extends CordovaFragment {
    @Override
    protected String getHtmlUri() {
        return "file:///android_asset/www/home.html";
    }
}

說完界面集成，說說插件plugin

           注意config的配置src中的包名，cordova_plugins配置www下plugin中的文件名（這塊建議一個自定義的文件夾，然後www，自己的js就行了，要不容易給自己挖坑，我被坑過，不知道是文件名，就各種/換成了.然後就各種插件找不到了），注意html要引入cordova.js否則一切都白玩，呵呵（我犯過錯）

           幾種插件： 

           exec(成功回調,失敗回調, 插件名, action匹配的string,傳遞參數json);

           （1）js傳回參數

             app：

             JSONObject options = args.getJSONObject(0);
             String location = options.getString("location");

             this.cordova.getActivity();處理相關的事情

             js：

            exec(null, null, "Homeplugin", "start_location", [options]); 

            （2）給js傳參的

             js：

            exec(success, null, 'Homeplugin', 'get_location', []);

            app：

            callbackContext.success(new JSONObject("{'location_city_code':"+12121+"}"));

            在html中的js調用

            如homeplugin.show_toast();

說完插件和集成，說說h5中踩過的坑，呵呵，都是前人總結的

           （1）使用過的js，zepto（jqurey的使用，說是很適合移動開發），swipe（實現輪播圖很好，），iscroll-probe,

             swipe源碼需要給點東西，實現點擊後繼續循環

function stop() {
//    delay = 0;
    delay = options.auto > 0 ? options.auto : 0;
    clearTimeout(interval);
  }

           iscroll-probe 5點擊事件（android版）

           有click根據

var UA = navigator.userAgent;

function iScrollClick(){ //設備識別來控制iscroll的click真假
    if (/iPhone|iPad|iPod|Macintosh/i.test(UA)) return true;
    if (/Chrome/i.test(UA)) return (/Android/i.test(UA));
    if (/Silk/i.test(UA)) return false;
    if (/Android/i.test(UA)) {
        var s = UA.match(/Android [\d+.]{1,5}/)[0].replace('Android ','');
        return parseFloat(s[0]+s[2]+s[4]) <= 442 && parseFloat(s[0]+s[2]+s[4]) > 430 ? true : false} //測試大量機器總結的規律,可能會有極小部分機器在選擇功能上依然出現問題
}

判斷的，反正我查了很大資料，最後是這樣搞定android點擊事件的 click: false,taps:true，呵呵這個是我今天搞定的，很高興（也是這件事讓我感覺到自己的危機，基礎差，出點問題自己都不知道解決的辦法，只能查別人的經驗，要是自己理解其中的實現，何必這麼難呢！）

           （2）cordova插件的初始化時機也需要注意

document.addEventListener('deviceready', function () {
    scale = $('body').width() / 720;
    $('html').css('font-size', 100 * scale + 'px');
}, false);

           要等到插件初始化成功後，再去調用，特別是需要給js傳參的時候

           （3）記住計算機始終都只是機器，只能按設定的規則走，只能處理數據，所以完全可以自己設定規則，指定處理數據的規律，所以需要做的還有很多。。。