ybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的?
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:
mWebView.loadUrl("file:///android_asset/test.html")
mWebView.loadUrl("http://www.baidu.com")
如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时,页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话,那么就得设置setWebViewClient:
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
一.先说一下Hybrid App Hybrid App目前主流就是两种,Cordova平台的和React Native平台的。
1.Cordova平台一般会使用样式组件库,比如Framework7,比如ionic或者OnsenUI等,使用样式组件库的好处就是避免重复的造轮子,可以在样式库提供给我们的基础上进行改造,改成我们想要的效果
2.Cordova平台一般都是Js+HTML+CSS的形式进行开发(我们团队用的是AngularJS+SCSS+HTML)
3.Cordova本身就是一个Webview,安装了一个HybridApp就相当于安装了一个浏览器然后在这个浏览器上跑本地的Html+Js
4.React Native平台目前是0.31版本(截止到16年8月8日),React Native虽然也是所谓的用Web技术来开发App,但是JSX语法和对于ReactJS所需要的了解也导致了这种上手难度和学习成本大于Cordova平台那种,而且在React Native平台Android和iOS的组件是分开的,现有组件满足不了项目需求的情况也是常事,这时我们还要单独开发组件
5.性能方面ReactNative平台优于Cordova平台 开发效率方面ReactNative平台要比Cordova平台差
二.聊聊Native App(以Native Android为例)和Hybrid App(Hybrid App由于不区分平台也不存在拿谁举例了) 1.由于Hybrid App在开发时所见即所得,Js和Html不需要编译,直接跑在浏览器上,所见即所得,遇到界面的bug直接打开Chrome开发模式改代码就可以
2.开发Native Android App,当我在用XML画界面时,会觉得和HTML+CSS3这种模式相似,但却不像HTML+CSS这么灵活
3.Native App中的Activity生命周期,Activity间通信,广播等概念在Hybrid App的开发中也是有的,只不过变成了angular的路由,以及具体的服务等
4.以实现一个列表为例,Native Android中要用带有泛型的ArrayList配合ListView实现,也很有可能要根据具体类型来写自己的类,并且在重写Adapter的getView方法中要把优化ListView滑动的代码一同写入;Hybrid中的列表直接通过一个Object类型的数组实现,并在html上配合ng-repeat指令就可以做到,在这个基础上如果加上ng-show,ng-class,ng-if等指令甚至可以完成更复杂的功能、