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

什么是混合开发

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

目前的混合开发方案

1.（Hybrid） *** Bridge2.reactNative、weex3.小程序等... 我们的项目采用Hybrid app的方式进行混合开发

Hybrid app

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

*** Bridge

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

开发具体流程

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

Android

提供给web端调用的 *** ：

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

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

var result = window.Android *** Bridge.fnName(); log(result);

web提供给native的 ***

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的 *** '; }