Hybrid开发

jiezi

5 年前

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

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

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

Native 与前端的界限，首先 Native 提供的是一宿主环境，要合理的利用 Native 提供的能力，要实现通用的 Hybrid 平台架构
nativeUI 组件、消息类组件
通讯录、系统、设备信息读取接口
与 Native 的互相跳转，比如 H5 如何跳到一个 Native 页面，H5 如何新开 Webview 做动画跳到另一个 H5 页面
账号信息管理 Native 需要设计良好安全的身份验证机制
资源访问机制
- Native 首先需要考虑如何访问 H5 资源，做到既能以 file 的方式访问 Native 内部资源，又能使用 url 的方式访问线上资源
前端要做的事情就是封装调用 Native 提供的各种能力 -Hybrid 开发调试

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

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

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

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

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

 /**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
主体内容:

小的 DEMO

## 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，这样就可以避免这个问题

5. 参考资料

1. 什么是 Hybrid App
2.Native、Hybrid、React Native、Web App 方案
3.Hybrid APP 之 Native 和 H5 页面交互原理
4.JSBridge 的原理
5.JSBridge 实现示例
6.WebView 三部曲：基本用法

Hybrid开发

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

2. Hybird 提前掌握那些问题

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

2-2.webview 生命周期函数

2-3 Hybrid 交互设计 -JSBridge

1.JS to native