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）记住计算机始终都只是机器，只能按设定的规则走，只能处理数据，所以完全可以自己设定规则，指定处理数据的规律，所以需要做的还有很多。。。