大前端混合应用专题篇

1️⃣、什么是 Hybird App，与 Native App 及 Web App 有什么区别

​ 介绍：在 Google 推出 Android，Apple 推出 iOS 后，有了原生 App，在 H5 广泛流行之后出现了一种效率更高的混合 App 开发(Hybird App)，原生 APP 开发中有一个 webview 的组件(Android 中是 webview,iOS7 以下有 UIWebview,7 以上有 WKWebview),这个组件可以加载 Html 文件，之后发现可以将一些主要的逻辑都用 H5 页面来编写，然后原生直接用 webview 加载显示，这样大大提高了开发效率。

​ 区别：

区别	Hybird App	原生 App
运行速度	比较快	快
能力	能使用设备的底层功能，如摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等	只能使用有限的设备底层功能（无法使用摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等功能）
安装与更新	迭代版本时，不需要打包便可以发布（实时更新、快速迭代），与云端实现实时数据交互	每次有更新，都需要重新打包一次发布到应用平台上，且每次要向各个应用商店进行提交审核。之后用户需要手动进行点击更新安装（安装成本较高）
开发成本	需要开发 ios 与 Android 两个平台	只需要开发 H5
用户体验	在界面设计、功能模块、操作逻辑等层面相较 web 更易做到 App 的便捷性和舒适性，功能更加强大	无法全面的显示最完美的用户体验

2️⃣、什么是 Cordova，它的优缺点是什么

Cordova 是一个用基于 HTML、CSS 和 JavaScript 的，用于创建跨平台移动应用程序的快速开发平台。它使开发者能够利用智能手机的核心功能——包括地理定位、加速器、联系人、声音和振动等，此外 Cordova 拥有丰富的插件，可以调用。

优点：开源，容易开发，灵活性高，开发人员不用学习其他语言，兼容多平台，可以直接调用本机的设备的硬件功能，例如摄像头，地理位置，加速度计等等。

缺点：性能较差，功能开发受 webview 限制。

3️⃣、Cordova 插件的原理是什么

4️⃣、什么是 JSBridge，它的作用是什么

JSbridge：在 Hybrid App 开发中，H5 应用是内嵌到原生的 WebView 组件中，纯 H5 在很多功能使用都受到限制，而且功能的使用存在很多的兼容性问题，所以使用一些受限的功能时候需要依赖原生，而 JSbridge 就是 JS 与原生之间通信的桥梁。

作用：web 端唤起使用 Native 功能，通知 Native，并且使用之后将结果返回给 web 端。

5️⃣、请列举 Android 与 iOS 平台下 JSBridge 的实现方式

以 2.0 项目 angularjs+ionic1（UIWebView）为例

IOS：

1）首先 cordova.js 执行过程中，会获取了页面中所有script标签的src，并且找出了cordova.js的前缀，保存文件路径并且存为pathPrefix字段，拼接pathPrefix+cordova_plugins.js得到一个url，这个url也就是cordova_plugins.js文件的地址。

2）接着动态创建script标签，src设置为url，之后把script标签加入head内。

3）调用的时候，会先将成功回调失败回调，存进 cordova.callbacks[callbackId]，将 callbackId 等参数，push 进 commandQueue 数组。

4）pokeNative 函数是在做轮训，这个函数判断是否有 execIframe 存在，有的话就设置 exeIframe.contentWindow.location = ‘gap://ready’；否则创建一个新的 iframe，diplay 为 none，并且 src 设置为’gap://ready’，这里是为了通知原生。

5）Native 接收到消息，就可以取得这些数据。然后通过 callbackId 回调。

callbackFromNative: function(callbackId, success, status, args, keepCallback) {
       var callback = cordova.callbacks[callbackId];
       if (callback) {
           if (success && status == cordova.callbackStatus.OK) {
               callback.success && callback.success.apply(null, args);
           } else if (!success) {
               callback.fail && callback.fail.apply(null, args);
           }

           // Clear callback if not expecting any more results
           if (!keepCallback) {
               delete cordova.callbacks[callbackId];
           }
       }
   }

Android（UIWebView）：重写了 prompt 方法

IOS 和 Android(WKWebview)：使用 postMessage 方法

补充

H5 调用 native 方法梳理

native 调用 h5

ios：

1.注入

2.localtion.href 与 iframe 方式：
通过 location.href 有个问题，就是如果我们连续多次修改 window.location.href 的值，在 Native 层只能接收到最后一次请求，前面的请求都会被忽略掉。

iOS 中,UIWebView 有个特性：在 UIWebView 内发起的所有网络请求，都可以通过 delegate 函数在 Native 层得到通知。

android：

1.通过 schema 方式，使用shouldOverrideUrlLoading方法对 url 协议进行解析。这种 js 的调用方式与 ios 的一样，使用 iframe 来调用 native 代码。 2.通过在 webview 页面里直接注入原生 js 代码方式，使用addJavascriptInterface方法来实现。

3.使用 prompt,console.log,alert 方式，这三个方法对 js 里是属性原生的，在 android webview 这一层是可以重写这三个方法的。一般我们使用 prompt，因为这个在 js 里使用的不多，用来和 native 通讯副作用比较少。