189 8069 5689

ios和h5混合开发,h5 ios和安卓兼容总结

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

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

成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、成都网站制作、明山网络推广、小程序开发、明山网络营销、明山企业策划、明山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联为所有大学生创业者提供明山建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

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


名称栏目:ios和h5混合开发,h5 ios和安卓兼容总结
转载注明:http://cdxtjz.cn/article/hocido.html

其他资讯