1。为什么选择Hybrid开发方式?混合开发效率高,跨平台(M/58APP/英才APP)维护成本低,功能可复用。对新手友好,学习成本低。更完善的功能、性能和体验比webapp好很多。一些有性能要求的页面可以原生实现。从业务发展来看,不存在版本问题。有bug可以及时修复。与native相比,性能还是有较大的损失。不适合强交互。应用程序2。Hybrid提前掌握那些问题Native和前端在Hybrid中各自的工作是什么?首先,Native提供了宿主环境。需要合理利用Native提供的能力,实现H5等通用Hybrid平台架构的nativeUI组件、消息组件、通讯录、系统、设备信息读取接口之间的相互跳转。如何跳转到一个Native页面,H5如何打开一个新的Webview制作动画跳转到另一个H5页面账号信息管理Native需要设计一个好的安全的认证机制资源访问机制Native内部资源的访问方式,以及使用url访问在线资源的方法。前端要做的就是封装调用Native-Hybrid开发调试提供的各种能力2-2。webview生命周期函数//当网页开始加载时调用-(void)webViewDidStartLoad:(UIWebView*)webView{}//当网页加载完成时调用-(void)webViewDidFinishLoad:(UIWebView*)webView{}//调用当网页加载错误时-(void)webView:(UIWebView*)webViewdidFailLoadWithError:(NSError*)error{}2-3混合交互设计-JSBridge1.Native调用前端页面的JS方法2.前端页面通过JS调用Native提供的接口。两者之间的桥梁是Webview。app本身可以自定义urlschema,将自定义url注册到调度中心1.jstonative在每个版本都会提供一些api,前端会有相应的framework团队对它们进行封装并发布业务接口/**login*/CHRJSBridge.call("pagetansNative",{action:"pagetansNative",//type类型为跳转到native的参数:{controllername:"to_login"//跳转到native对应的页面},isbacktomain:0,//跳转后是否关闭当前,默认为falsecallbackFun:(params)=>{this.id=params.id}//回调函数});handleConfirm(params){letjsonStr=JSON.stringify(参数);if(this.isIOS()){window.webkit.messageHandlers.testMethod.postMessage(jsonStr)}else{javascript:chrclient.onJsActionRequest(jsonStr)}}##nativetojswindow.nativeMethod=function(methodrParams){console.log("原生方法");让actionName=JSON.parse(methodrParams).action;让actionParams=JSON.parse(methodrParams).params;//console.log("methodrParams=====",actionName,actionParams);window[actionName](actionParams);}##2.封装CHRJSBridge/JavaScriptCore主要内容:小DEMO##3.这样做的一个前提是Native本身已经很稳定了。测试包-1.清除设置中的缓存。-2.查看安装包版本信息-3.查看cookie信息-4.提供扫描二维码打开网页。前期不开入口,FE自测##4.H5-nativeurl方案Native可以捕获所有webview发送的请求chrmain://nativejump/main/web?params=Native可以注入所有需要的前端的方法varmessagingIframe=document.createElement('iframe');messagingIframe.style.display='none'document.documentElement.appendChild(messagingIframe);messagingIframe.src=url注意,通常可以启动网络通过window.location.href请求的效果是不错的,但是有一个很严重的问题,就是如果我们连续多次修改window.location.href的值,只能在最后一次收到请求Native层,之前的请求会被忽略。所以,当JS端发起网络请求时,需要使用iframe,这样就可以避免这个问题。原理4.JSBridge原理5.JSBridge实现示例6.WebView三部曲:基本使用
