Android混合式开发.pptx

单击此处编辑母版标题样式,单击此处编辑文本,第二级,第三级,第四级,第五级,0,Android,混合式开发,概括：,Android,混合式开发其实就是在一个App中内嵌一个轻量级的浏览器，一部分原生的功能改为Html 5来开发，这部分功能不仅能够在不升级App的情况下动态更新，而且可以在Android或iOS的App上同时运行，跨平台性更好，支持热更新。,Hybrid App开发关键知识点,Html 5,Html 5,特点，技术的掌握,JavaScript,JavaScript,语言的学习,Html 5和Native的交互,Html 5和Native如何交互,WebView,如何在,Android,中展示,Html 5,主流框架,PhoneGap,、,React Native,等。,Html 5,中一些新特性,LOREM,1,canvas,元素,LOREM,2,video,和,audio,元素,LOREM,3,本地离线存储,LOREM,4,特殊内容元素，如,article,、,footer,、,nav,LOREM,5,表单控件：,calendar,、,date,、,time,、,email,webView,加载内容，,loadUrl(),，可以是本地内容，也可以是网络地址。,01,webView,的常用设置，,webset,，可以设置,webview,的各种属性。,02,webView,中打开新链接，用,setWebViewClient,方法设置,webView,的客户端，重写如,shouldOverrideUrlLoading,（,Webview,，,String,）。,03,WebView,展示,Html 5,Html 5和Native的交互,A,方式一,js调用Native中的代码。,WebViewbe本身就是支持js调用Native代码的，不过WebView的这个功能在Android 4.2（API 17）一下存在高危的漏洞。这个漏洞的原理就是Android系统通过 WebView.addJavascriptInterface(Object o,String interface)方法注册可供js调用的Java对象，但是系统并没有对注册的Java对象方法调用做限制。导致攻击者可以利用反射调用未注册的其他任何Java对象，攻击者可以根据客户端的能力做任何事情。,出于安全考虑，Android 4.2以后的系统规定允许被js调用的Java方法必须以 JavascriptInterface 进行注解。,B,方式二,Schema：WebView拦截页面跳转。,当我点击一个,WebView,中的用户名的时候就请求跳转到 orpheus:/user/,xxxxx,，因为WebView可以拦截跳转的url，所以App在拦截每一个url，如果host是 orpheus 的话就启动用户首页。,用法,如何开始,初始化Webview WebSettings时允许js脚本执行，同时使用你的注入名和注入类来实例化一个InjectedChromeClient对象，然后关联到你的Webview实例：,WebView wv=new WebView(this);,WebSettings ws=wv.getSettings();,ws.setJavaScriptEnabled(true);,wv.setWebChromeClient(,new InjectedChromeClient(HostApp,HostJsScope.class),);,wv.loadUrl(file:/android_asset/test.html);,自定义WebChromeClient子类,如果你需要实现自己的WebChromeClient子类，然后设置到WebView。为了保持InjectedChromeClient的功能，你需要将此类继承自InjectedChromeClient，同时像下面这样覆盖这三个方法。,public class CustomChromeClient extends InjectedChromeClient,public CustomChromeClient(String injectedName,Class injectedCls),super(injectedName,injectedCls);,Override,public boolean onJsAlert(WebView view,String url,String message,final JsResult result),return super.onJsAlert(view,url,message,result);,Override,public void onProgressChanged(WebView view,int newProgress),super.onProgressChanged(view,newProgress)；,Override,public boolean onJsPrompt(WebView view,String url,String message,String defaultValue,JsPromptResult result),return super.onJsPrompt(view,url,message,defaultValue,result);,移动应用开发比较,Hybrid开发适用于哪些功能,Hybrid开发就是Native客户端中嵌入了Html App的功能，这方面微信、淘宝等都有很好的使用案例，由于Html 5的效率以及耗电问题，Hybrid App也只适用于某些场景。一些基础的功能，比如调用手机的摄像头，获取地理位置，登录注册功能等等，做成Native的功能，让Html 5来调用更好，这样的体验也更好。,如果你把一个登录和注册功能也做成Html 5，在弱网络环境下，这个体验应该会非常的差，或许你等半天还没加载出页面。你可能会说，我可以预先加载Html 5的代码，打开App时直接加载，那么我说你在给自己找麻烦，如果要这样的话，Native开发或许更快一点。,那么什么情况适合Html 5开发呢？像一些活动页面，比如秒杀、团购等适合做Html 5，因为这些页面可能涉及的非常炫而且复杂，Html 5开发或许会简单点，关键是这些页面时效性短，更新更快，因为一个活动说不定就一周时间，下周换活动，如果这样的话，用Native是肯定不行的。,原生开发,A,混合开发,B,React Native使用 JavaScript 构建原生应用,React Native的优点：,可以基于 React Native使用 JavaScript 编写应用逻辑，UI 则可以保持全是原生的。这样的话就没有必要就 HTML5 的 UI 做出常见的妥协；,React 引入了一种与众不同的、略显激进但具备高可用性的方案来构建用户界面。长话短说，应用的 UI 简单通过一个基于应用目前状态的函数来表达。,