h5和ios混合开发,ios和h5交互

移动端app开发,原生开发与混合开发的区别？

原生开发

桂阳网站建设公司创新互联建站,桂阳网站设计制作，有大型网站制作公司丰富经验。已为桂阳千余家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的桂阳做网站的公司定做！

 原生开发是在Android、IOS移动平台上利用各自的开发语言、开发API、开发工具进行App软件开发。例如Android是利用Java或者kotlin，使用Eclipse、Android studio、idea等工具开发；IOS是利用Objective-C或者Swift，使用Xcode工具等进行开发。

原生开发的优点：

可访问手机所有功能（如GPS、摄像头等）、可实现功能齐全；

运行速度快、性能高，绝佳的用户体验；

支持大量图形和动画，不卡顿，反应快；

比较快捷地使用设备端提供的接口，处理速度上有优势。

原生开发的缺点：

开发周期长；  

制作费用高昂，成本较高；  

可移植性比较差，一款原生的App，Android和IOS都要各自开发，同样的逻辑、界面要写两套；  

内容限制（App   Store限制）；  

获得新版本时需重新下载应用更新。

混合开发

混合开发，是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页的模式，通常由“H5云网站+APP应用客户端”；两部分构成。

混合开发是一种取长补短的开发模式，原生代码部分利用插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的技术进行实现的。很多APP都是利用混合开发模式而成的。  

混合开发优点：

开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；  

更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App   Store进行审核；  

代码维护方便、版本更新快，节省产品成本；  

比web版实现功能多；  

可离线运行。 

混合开发缺点：  

网络要求高：混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长，容易让用户反感。  

H5调用Android和ios原生方法(react)

混合开发中需要web需要和原生交互方式。

原生需要写方法来让H5调用，H5在window中获取方法。

ios壳中方法全部放在webkit.messageHandlers对象中，前端调用只需要

Android中调用方法，直接在window中调用安卓给的对象

H5调用原生方法后，原生怎么回调给H5?

跟原生一样，H5需要写好方法，让原生调用，这里调用就是原生直接调用了H5的方法，当然这个方法是要全局的方法，在window对象中的。

在react中写原生调用的方法，需要在调用的组件中componentDidMount里面添加方法：

原生方法可能多个地方使用，每次都去判断系统，然后分别调用不同方法很麻烦，不是前端该有范儿。应该在一个文件中统一处理，其他页面只需要调用处理好的方法就好。

例如获取当前设备号，原生封装好方法后，统一在一个文件中处理：

这样在其他页面就可以直接使用getDeviceId就可以得到得到设备号，才不管你是哪个系统呢。

APP原生开发和H5开发以及APP混合开发三者有什么区别？

这个如果详细说，那就是很复杂了，但是可以以口语方式简单的说

APP原生开发：就是安卓版，IOS版，和后台，最起码为3个人制作，3个不同的人掌握不同的技术，也就是说，这个成本最高。

H5开发：就是HTML5的网页制作，也可以理解为网页制作，然后加个壳打包，这个壳和打包对于外行也是比较模糊的概念，你只需要理解为最简单的html5制作就行，这个没有什么技术含量，也最便宜。一个人可以搞定。

APP混合开发：这个是介于原生开发和H5开发之间的，难度也是居中，相对来说，技术上由2个人完成，一个前台一个后台，APP上有H5的制作内容，也有原生开发的制作内容，所以叫混合开发，或者说也有WEB开发的痕迹，这个是不能一句话说清楚的。

从价格来说这样排列：最贵原生开发，居中混合开发，最便宜H5开发。

iOS和h5交互(WKWebView,UIWebView)

app 混合开发场景中 常常涉及到h5 和原生数据通信，大致分为2类 一个是 原生 向 h5 主动通信，一个是 h5 主动向 原生通信。

iOS 中加载h5的 控件有2种，UIWebView 和 WKWebView,目前新提交的app 必须使用WKWebView 才能提交审核。已经上架审核成功的app 目前没有强制要求必须用WKWebView。

原生通过监听url 变化实现，当url 变化的时候 ,会触发

h5 主要逻辑如下

除了 通过url 变化 的监听外，我们还有其他方法，比如通过 JSContext 向webView 注入。具体步骤如下

原生逻辑：

第一步：新建1个继承 JSExport 的 代理 ，新建1个继承该协议的类，协议中 opencame 为和 前端约定好的 通讯方法

第二步：webview 加载成功后 ，在 - (void)webViewDidFinishLoad:(UIWebView *)webView 注入,注入对象名称 为 cth5bridge

第三步：h5 调用方式如下，cth5bridge 为注入对象名称，opencame 为 约定的方法

假设1个场景，用户访问h5 界面情况下，我们要通知 用户token 要更新

原生主要逻辑

h5 主要逻辑

假设1个场景，用户点击1个活动baner,通知原生 以一个新的界面 打开1个外部活动h5界面

和上面类似，我们也可以在 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 通过监听 url 变化来实现

原生主要逻辑

h5 主要逻辑

我们也可以这么做

第一步 原生 注册 监听方法 showH5

第二步 H5 调用 和原生约定好的方法 showH5，h5 处理的时候要区分 iOS 和 android，下面 只是考虑iOS

第三步 原生在 - (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message 进行监听

和上面类似，假设1个场景 通知H5 刷新用户token

updatetoken 是和前端H5 约定好的 通信方法，123是传递的数据，一般 以 json 字符串传递

原生主要逻辑

H5主要逻辑

需要在windows 上 绑定方法

参考链接：

H5端与原生混合开发遇到的一些问题

在与原生安卓/IOS实现混合开发时，会遇到一些问题，在此做下记录（以下是目前遇到的或之前有记录到的一些问题，后续如果有遇到新的问题或整理过程中发现其他的一些问题再补上）：

1.H5页面拨打电话问题

（1）在移动端页面实现时，只需使用a标签，a href="tel:1234567"即可实现。

（2）与原生混合开发时，安卓端嵌入我们的H5页面，采用以上方式却无法实现，（IOS端是没有问题的），因此需要调用原生本地的拨打电话方法。

2.IOS时间的一个兼容性问题

H5页面实现过程中遇到了时间处理的问题。使用new Date(time).getDay()的时候，正常返回应该的是0-6，对应每周的星期日到星期一，但在IOS上，例如：我们使用的是（2018-6-4）的话，它会返回undefined。因此我们在这里应该对这个时间格式进行处理，将其改为（2018/6/4）的格式去获取。

即：new Date("2018-06-04").replace(/-/g ,"/");