专栏首页javascript艺术用于H5的移动开发框架

用于H5的移动开发框架

用于H5的移动开发框架

今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架,能够帮助开发者更加高效的开发移动Web应用。.

十款移动APP开发框架

1.jquery mobile框架 2.bootstrap框架 3.ionic框架 4.Mobile Angular UI框架 5.Intel XDK框架 6.Appcelerator Titanium框架 7.Sencha Touch框架 8.Kendo UI框架 9.PhoneGap框架 10.mui框架

1

jquery mobile框架

  jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。

2

bootstrap框架

  Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

3

ionic框架

  Ionic 是一个强大的 HTML5 应用程序开发框架,可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

4

Mobile Angular UI框架

  Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。

  Mobile Angular UI的关键字有:

1. Bootstrap 3

2. AngularJS

  Bootstrap 3 Mobile组件,比如switches, overlays和sidebars,这些都是bootstrap中没有的。

  AngularJS modules, 比如 angular-route, angular-touch 和 angular-animate

  响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。

5

Intel XDK框架

  Intel发布了其首个版本基于web的编程工具,可帮助开发者为Android和iOS开发移动应用。这款免费的软件名为Intel XDK,实际上这是今年2月份Intel收购的AppMobi软件的重新包装后的版本,所以并非新鲜事物。开发者可用此软件开发基于HTML5的应用,并 用于移动设备中。

6

Appcelerator Titanium框架

  Titanium 是一个跟手机平台无关的开发框架,用来开发具有本地应用效果的Web应用。当前主要支持 iPhone 和 Android 手机。

  主要提供的API包括:

  2D/3D animations

  Geo-location, compass, and maps

  Augmented reality features

  Social app authentication and native client support for email

  SOAP or REST API calls

  Audio, video, and image capture and playback

  Taps into local filesystem and SQL lite databases

  Accesses photo gallery or address data

7

Sencha Touch框架

  Sencha Touch框架是世界上第一个基于HTML5的Mobile App框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。提供了丰富的 WEB UI 组件,可以快速的开发出运行于移动终端的应用程序。

8

Kendo UI框架

  Kendo UI的每个方面都从底层开始构建,以提供强大的JavaScript应用程序性能。Kendo UI不是另一个jQuery UI的克隆,它的每一个决定都是从优化性能出发。从轻量级的、执行明显快于jQurey模板的内置模板库,到利用CSS3硬件加速的(如果可能)优化动画 和先进的虚拟化用户界面,Kendo UI不遗余力地提供高性能的客户端UI。

9

PhoneGap框架

  说到跨平台开发工具,很多人首先会想到PhoneGap。这样一款能够让开发者使用HTML、JS、CSS来开发跨平台移动App的开源免费框架,一直以来都深受开发者喜爱,从iOS、Android、BB10、Windows Phone到Amazon Fire OS、Tizen等,各大主流移动平台一应俱全,还能让开发者充分利用地理位置、加速器、联系人、声音等手机核心功能。

  业界很多主流的移动开发框架均源于PhoneGap。较著名的有Worklight、appMobi、WeX5等。其中WeX5为国内打造,完全Apache开源,在融合Phonegap的基础上,做了深度优化,具备接近Native app的性能,同时开发便捷性也较好。

10

mui框架

  最接近原生APP体验的高性能前端框架,具有以下特点:

  轻量

  追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征;

  MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K

  原生UI

  鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标

  MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件

  流畅体验

  • 下拉刷新

  为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。

  • 侧滑导航

  mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。每种侧滑实现模式,有不同的侧滑动画效果,主要分为四类:

  动画1:主界面移动、菜单不动

  动画2:主界面不动、菜单移动

  动画3:主界面和菜单同时移动

  动画4:缩放式侧滑(类手机QQ)

  • 滑动触发操作菜单

  在手机应用中(特别是iOS平台),很多操作菜单都是滑动触发的,比如短信界面,左滑显示“删除”按钮,点击可以删除该短信对话;邮件列表界面,左滑可以删除,右滑可以标注为"已读/未读"状态; mui的列表控件也支持滑动触发操作菜单功能,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5开发移动端APP基于H5+

      一直从事iOS原生APP开发,对H5前端开发那一套因为无知所以一直生畏,所以很长的一段的时间里只做原生的开发,但对跨平台的这种技术操作始终抱有很大兴趣。由于...

    Light413
  • 移动端常用开发框架

    框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。

    星辰_大海
  • H5开发移动端APP基于uni-app

    编译模式:自定义组件模式,这个默认自动设置的。这方面比较复杂,曾经的叫非自定义组件模式官方不在支持。

    Light413
  • 基于Mono跨平台移动应用开发框架发布Xamarin 3.0

    跨平台移动应用开发框架Xamarin可以让你完全用C#编写你的应用程序,在iOS、Android、Windows Phone 8、Windows8和mac平台上...

    张善友
  • 移动端常用开发插件和框架

    移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢?

    清出于兰
  • 06-移动端开发教程-fullpage框架

    CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

    老马
  • 06-移动端开发教程-fullpage框架

    CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

    老马
  • Native和H5分久必合,Weex会带来移动端的巨变吗?

    Weex是一个移动端的动态化框架,它允许开发者用轻巧的 HTML/JS/CSS 开发多个端的 NativeApp。用 Weex只需写一份代码,便可运行在Andr...

    博文视点Broadview
  • 最好的10个移动 Web 应用程序开发框架

    在最近几年里,移动互联网高速发展、市场潜力巨大。继计算机、互联网之后,移动互联网正掀起第三次信息技术革命的浪潮,新技术、新应用不断涌现。今天这篇文章向大家推荐1...

    用户4962466
  • 干货 | React Native实践之携程Moles框架

    因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套程...

    携程技术
  • React Native之携程Moles框架

    因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套...

    xiangzhihong
  • App、H5、PC应用多端开发框架Flutter 2发布

    Flutter框架已经推出有两年了,但是之前一直在移动端App发力,慢慢发展到了PC端。在window电脑的应用程序和mac电脑的应用程序。

    快跑
  • 介绍几个移动web app开发框架

    jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化...

    Java架构师历程
  • 开源移动端 IM 框架 MobileIMSDK v6.0 发布!

    本次为主要版本更新(本次更新内容见文末“MobileIMSDK v6.0更新内容 ”一节),强势升级,将同时支持TCP、UDP、WebSocket三种协议,精心...

    JackJiang
  • Ionic:高级的 HTML5 移动APP(Web App)开发框架

    Ionic 是一个用HTML, CSS 跟JS 开发的一个用于移动设备的混合APP 开发框架,采用 Sass与AngularJS 开发。目前,Ionic 仍然处...

    Jeff
  • Android 开发 - 基于okhttp框架封装的开发框架oknet

    在android开发中经常要访问网络,目前最流行的网络访问框架就是Okhttp了,然而我们在具体使用时,往往仍然需要二次封装。我使用Builder设计模式进行了...

    zhangyunfeiVir
  • 移动端UI框架

    UI框架作为前端一门必须要了解并且熟练掌握的一门技术,关于目前不同的js框架对应的不同的框架还是有必要说说。

    踏浪
  • 收藏 | 移动端H5开发常用技巧总结

    在 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:

    @超人
  • Native地图与Web融合技术的应用与实践

    有用户反馈美团打车地图的性能有一些问题,美团打车技术团队在调研分析之后,采用了一套Native地图与Web的融合框架,不仅实现了用户手势事件智能分发的机制,还解...

    美团技术团队

扫码关注云+社区

领取腾讯云代金券