越做越害怕,底子不足就是心虚,呵呵,所以是该从新审视基础的时候了!放弃一些浮华的技术,向着根基出发!
写了一段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集成 布局如下
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/cordovaWebView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
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 ArrayListpluginEntries; 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)记住计算机始终都只是机器,只能按设定的规则走,只能处理数据,所以完全可以自己设定规则,指定处理数据的规律,所以需要做的还有很多。。。