189 8069 5689

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 ,"/");


网站栏目:h5和ios混合开发,ios和h5交互
转载来源:http://cdxtjz.cn/article/dsejhed.html

其他资讯