Hybrid开发

元元 2019-11-17

1. 为什么选择Hybrid开发方式

  • Hybrid开发效率高、跨平台(M /58APP/英才APP)
  • 维护成本低,功能可复用
  • 针对新手友好,学习成本较低
  • 功能更加完善,性能和体验要比起web app好太多
  • 部分性能要求的页面可用原生实现
  • Hybrid从业务开发上讲,没有版本问题,有BUG能及时修复
  • 缺点

    • 相比原生,性能仍然有较大损耗
    • 不适用于交互性较强的app

2. Hybird 提前掌握那些问题

  • Hybrid中Native与前端各自的工作是什么
  • Hybrid的交互接口如何设计
  • 资源缓存策略,白屏问题

2-1 Hybrid中Native与前端各自的工作是什么

  • Native与前端的界限,首先Native提供的是一宿主环境,要合理的利用Native提供的能力,要实现通用的Hybrid平台架构
  • nativeUI组件、消息类组件
  • 通讯录、系统、设备信息读取接口
  • 与Native的互相跳转,比如H5如何跳到一个Native页面,H5如何新开Webview做动画跳到另一个H5页面
  • 账号信息管理 Native需要设计良好安全的身份验证机制
  • 资源访问机制

    • Native首先需要考虑如何访问H5资源,做到既能以file的方式访问Native内部资源,又能使用url的方式访问线上资源
  • 前端要做的事情就是封装调用Native提供的各种能力-Hybrid开发调试

Hybrid开发

2-2.webview 生命周期函数

// 网页开始加载的时候调用
- (void )webViewDidStartLoad:(UIWebView  *)webView{
}

// 网页加载完成的时候调用
- (void )webViewDidFinishLoad:(UIWebView  *)webView{
}

// 网页加载错误的时候调用
- (void)webView:(UIWebView *)webView  didFailLoadWithError:(NSError *)error{
}

2-3 Hybrid交互设计-JSBridge

  • 1.Native调用前端页面的JS方法
  • 2.前端页面通过JS调用Native提供的接口
  • 两者之间的桥梁是Webview。app自身可以自定义url schema,并且把自定义的url注册在调度中心
  • Hybrid开发
  • Hybrid开发

1.JS to native

  1. 在每个版本会提供一些API,前端会有一个对应的框架团队对其进行封装,释放业务接口
    Hybrid开发

    /**login*/
     CHRJSBridge.call("pagetansNative", {
     action: "pagetansNative", //type类型是跳转native的
     params: {
       controllername: "to_login" //跳转native的对应页
     },
     isbacktomain: 0, //跳转后是否关闭当前,默认false
     callbackFun:(params)=>{this.id=params.id}// 回调函数
     });
    handleConfirm(params) {
      let jsonStr = JSON.stringify(params);
      if (this.isIOS()) {
        window.webkit.messageHandlers.testMethod.postMessage(jsonStr)
      } else {
        javascript: chrclient.onJsActionRequest(jsonStr)
      }
    }

    ## native to js

    window.nativeMethod = function(methodrParams) {
     console.log("nativeMethod");
     let actionName = JSON.parse(methodrParams).action;
     let actionParams = JSON.parse(methodrParams).params;
     //console.log("methodrParams=====", actionName, actionParams);
     window[actionName](actionParams);
    }

## 2. 封装的CHRJSBridge/JavaScriptCore
主体内容:
Hybrid开发

  • 小的DEMO

Hybrid开发

## 3. 这样做有一个前提是,Native本身已经十分稳定了.测试包

- 1.设置里面清除缓存。
    
   - 2.查看安装包版本信息
    
   - 3..查看cookie信息
   - 4.提供扫描二维码打开网页。供前期没有开通入口,FE自测


## 4. H5-native

  • url scheme Native能捕捉webview发出的一切请求

    • chrmain://nativejump/main/web?params=
    • Native是有能力为前端注入所有需要的方法了
var messagingIframe = document.createElement('iframe');

messagingIframe.style.display = 'none'
document.documentElement.appendChild(messagingIframe);

messagingIframe.src = url

注意,正常来说是可以通过window.location.href达到发起网络请求的效果的,但是有一个很严重的问题,就是如果我们连续多次修改window.location.href的值,在Native层只能接收到最后一次请求,前面的请求都会被忽略掉。所以JS端发起网络请求的时候,需要使用iframe,这样就可以避免这个问题

Hybrid开发

5.参考资料

相关推荐