成都APP开发

成都APP开发  ››  新闻动态  ››  业界资讯

iOS混合App开发案例讲解

如今,手机App呈现多元化发展的趋势,业务覆盖了生活的方方面面,传统原生App已经无法满足开发需求,混合App应运而生。什么是混合APP开发,混合App,结合了原生App和web端灵活的特点,克服了原本迭代周期长和界面修改复杂的缺点,完美地跟上了市场频繁迭代更新。【未来久科技】就用典型的新闻类App开发—网易新闻来介绍iOS端如何利用html代码来进行页面布局。

一、原生应用、Web应用与混合应用的介绍

1.原生应用(Native App):在不同平台(如安卓、iOS、Windows等)下,利用自身平台的API和特性开发的应用。此类应用是大部分App采用的开发形式,优点是完美利用了该平台的特性,在视觉和使用上也是最贴合该平台用户的习惯;缺点是,同一款App在不同平台上需要开发多套应用,进行版本迭代周期较长,成本相对较高。

2.Web应用(Web App):基于html网页和JS框架,通过浏览器访问和获取web页面。此类应用开发简单,各个平台通用,访问方便,对移动端开发人员来说,工作量也比较小;缺点是界面无法集成各个平台的特性,比如动画,手势等。也无法访问系统底层设备和功能。在开发中,局限性比较大,成本较低。

3.混合应用(Hybrid App):将web端页面嵌入移动端App,延用了web页面制作简单,更新方便的优点,可以调用系统API,完美解弥补了纯web应用的劣势,也是目前App中使用较多的技术。相对于原生App,不需要每个平台都开发一套界面。

在实际项目中,产品经理需要综合各方面因素来考虑具体使用哪一种技术,才能高效地完成项目交付;对于开发人员,怎样和其他平台人员合理沟通也是十分必要的。尤其是混合App,对开发人员的技术多面性有着不小的考验。

二、常见的混合App

电商类APP 新闻类APP

在App市场,新闻类APP和电商类APP的应用使用混合开发最为频繁。在形式上,此类App都有共同的特点:页面内容元素数量庞大,内容更新频繁;页面布局复杂,使用原生API会耗费大量开发时间。

混合App的出现,既满足了迭代的短周期特点,又完美解决了web页面单一,不够灵活的缺点,在开发人员日益紧缺的现在,在节约成本方面,也为很多公司解决了一大难题。这也是混合App如此火热的原因之一。

三、准备工作

1.效果演示:单页控制器页面,嵌入导航栏,仿网易新闻详情页面。

新闻类APP内页

2.JSON数据:

IOS开发JSON数据

3.创建单页工程(SingleView Application):

IOS开发单页创建

四、内容显示

1.拼接html基本框架(拼接html、head、body)

2.拼接新闻标题和时间

IOS新闻类APP开发代码

3.加载css文件

APP开发CSS文件

效果图:

新闻APP开发效果图

4.重要的步骤:在正文中插入图片

注意到JSON数据是以开头的,这部分在html中是一句注释内容,在这里是专门用来替换为图片内容的,所以我们要将此部分替换为html中的图片标签。

APP开发图片标签

效果:

新闻类APP开发

大功告成!


五、总结:

混合App开发需要特定的环境,也需要与后台开发人员紧密配合。如案例中的数据,需要将数据格式和JS代码准确注入。在iOS开发中,UIWebView和WKWebView两个控件是专门用来加载html网页的,需要对其API加以了解和熟悉,才能将跨平台技术融会贯通,开发出更多功能强大的App!