混合开发，原生app内嵌h5页面

什么是混合开发

混合开发，也就是我们平时听到的Hybrid app,由原生（native）开发技术和web开发技术一起进行开发，然后以native app的方式进行展示的应用。

目前的混合开发方案

1.（Hybrid）JSBridge
2.reactNative、weex
3.小程序
等... 我们的项目采用Hybrid app的方式进行混合开发

Hybrid app

在原生 app中， 使用webview来加载html页面，把web端的页面展示出来，然后在Native app中的网页就像被放在了一个沙箱中，与外界隔离，访问不到一些外部的方法，无法调用一些手机端的api。

JSBridge

它就像一个桥梁，连接这web端和native端，让native可以调用web端的代码，让web端可以调用native端的代码。

开发具体流程

1.native app 开发人员完成webview布局
2.通过webview去给window对象里面添加JSBridge对象
3.提供文档

Android

提供给web端调用的方法：

1.fnName(str) 传参的情况
--fnname:方法名，web端通过 window.AndroidJSBridge.fnName('xxxx') 调用, window.AndroidJSBridge.XX为固定写法，后面加方法名，参数类型为字符串，传入对象时，要转一下JSON.strinify

2. fnName() 不传参的情况,获取函数的返回值

var result = window.AndroidJSBridge.fnName();
            log(result);
复制代码

web提供给native的方法

方法必须绑定在window对象下

window.fnName = function (str) {
            return 'web提供给native的方法';
        }
复制代码

IOS

提供给web端调用的方法：

固定写法window.webkit.messageHandlers.xxx.postMessage({...})

window.webkit.messageHandlers.fnName.postMessage({
                msg: str
            });
复制代码

web提供给native的方法

方法必须绑定在window对象下

window.fnName = function (str) {
            return 'web提供给native的方法';
        }
复制代码