大话WebNative混合开发同城.pptx

大话 Web&Native混合开发,For Android,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,2,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web or Native,Hybrid技术实现,Hybrid经验分享,3,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web App,一个项目到处运行，因为只运行在设备浏览器上,没有标准的SDK，任意选择,html,css,javascript和服务器端语PHP,Python,4,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web App,Web App,浏览器,用户界面 html/css,Flash Canvas Audio/Video,web服务器,数据,JSON,XML,JavaScript,HTTP WebSocket,WebDatabase LocalStorage SessionStorage GeoLocation,5,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Native App for Android,针对某一类系统，有标准的SDK，跨平台移植难,利用httpclient/socket等与服务器通信,利用系统的底层支持和框架层去支撑应用层,Java Linux,6,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Native App for Android,7,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web vs Native,8,of,39,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web vs Native,复杂的交互,数据更新较快,紧跟数据更新脚步,迭代太频繁,产品说变就变,9,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web&Native合体,合体,扬长避短,10,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web vs Native,11,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,12,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,/wap.html,13,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Lets Goooooo!,14,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,技术实现,15,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,WebView,Webview,Websettings,Webkit,16,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,WebView,setWebChromeClient方法 -Native: webview.setWebChromeClient(mWebClient); /设置webviewchromeclient对象，实现监听webview 加载进度，js确认框，js操作超时等等 - onProgressChanged(WebView view, int newProgress) - onCloseWindow(WebView window) - onJsAlert(WebView view, String url, String message,JsResult result) - onJsConfirm(WebView view, String url, String message,JsResult result) - onJsPrompt(WebView view, String url, String message,String defaultValue, JsPromptResult result) - onJsTimeout(),17,of,39,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,WebView,setWebViewClient方法 -Native:webview.setWebViewClient(mClient); /对webview设置webviewclient，可以控制其内部跳转机制，加载进度监控。 - shouldOverrideUrlLoading(WebView view, String url) - onPageStarted(WebView view, String url, Bitmap favicon) - onLoadResource(WebView view, String url) - onReceivedError(WebView view, int errorCode,String description, String failingUrl) - onPageFinished(WebView view, String url),18,of,39,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web调用Native,addJavascriptInterface方法 -addJavascriptInterface(Object obj,String interfaceName) /将一个java对象绑定到一个javascript对象中,19,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Native调用Web,loadUrl方法 /让webview去load js,20,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Web&Native性能,缓存,图片异步加载,21,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,WebView缓存,WebView 全页面缓存 - websettings.setAppCacheEnable(boolean); - websettings.setCacheMode(int) WebView 清除缓存 - CacheManager.getCacheFileBaseDir() - file.delete,22,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,WebView缓存,ContentProvider使用本地资源 /拦截网页加载的资源链接，使webview使用本地缓存的资源 - public ParcelFileDescriptor openFile(Uri uri, String,mode) - uri: 拦截到网页加载的地址，但是会屏蔽掉？之后的内容 content:/xxx/xxxxxxx?os=“android” - mode: r/rw/rwt,23,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,WebView缓存,contentprovider,openFile,Content:/xxxxx,Content:/xxxxx/url,Xxx_1.xx(mclient_1.js),比较版本,Native,web,Native 保存文件,比较版本,24,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Cookie&Header,Header Cookie,25,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Header,浏览器或客户端,server,客户端向服务器发送请求，在请求头中包含请求方法，协议版本，客户端信息等内容，这些内容以key,value形式组合，我们称这些内容为http header。,Messageheader,Message body,26,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Cookie,Header,Cookie,27,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,Cookie vs Header,28,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,经验分享,【 Webview长按出现文字复制框？,重写webview的performLongClick(),让其方法体为空,Override public boolean performLongClick() return false; ,29,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,经验分享,【 Android系统如何加载图片？,将默认占位符图片放在内容中，只加载一个。 将图片的url保存在自定义属性中，js执行加载首屏图片。 滑动页面时遍历所有图片是否在可视区域，加载显示可视区域图片。 页面加载完后等待一段时间，达到异步。,30,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,经验分享,【如何处理加载失败？,vs,PageStart,31,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,经验分享,【 如何处理加载失败？,loadResource,Receive error,PageFinished,PageStart,PageStart记录url，每次load比较参数url和记录的url，一致即为错误，将webview隐藏。 receive error时调用webview.clearView 重试加载时，在loadResource中让webview显示,32,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,经验分享,【 如何处理加载超时？,网页加载由于受各种因素影响会有长时间加载现象，为了更好的用户体验，我们需要设定超时时间。Webview本身没有提供处理超时的方法。我们利用计算时间来处理超时。,Webview.postDelayed(new Runnable(),long),mHandler.sendMessageDelayed(message,long),33,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,经验分享,【如何从web端获取cookie或header?,混合模式下开发客户端，web需要获取native设备的信息，以备后端统计监控使用。 Android2.2以上支持传递header,但是ajax内部请求不能获取header，所以采用cookie方式。,CookieSyncManager.createInstance(this); CookieManager cookieManager = CookieManager.getInstan ce(); cookieManager.setAcceptCookie(true); cookieManager.setCookie(key,value); CookieSyncManager.getInstance.synn();,34,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,经验分享,【何时消失loading框？,Webviewchromeclient.onProgressChanged 页面onDomReady后通知native关闭加载框,35,of,38,张炎 58同城-无线&LBS事业部 北京五八信息科技有限公司,经