HTML5移动开发的10大移动APP开发框架_html 原生移动端组件有哪些-程序员宅基地

技术标签: html5  开发框架  HTML5移动前端开发  

今天给大家介绍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框架

用于HTML5移动开发的10大移动APP开发框架

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

  2.bootstrap框架

用于HTML5移动开发的10大移动APP开发框架

  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框架

用于HTML5移动开发的10大移动APP开发框架

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

  4.Mobile Angular UI框架

用于HTML5移动开发的10大移动APP开发框架

  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框架

用于HTML5移动开发的10大移动APP开发框架

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

  6.Appcelerator Titanium框架

用于HTML5移动开发的10大移动APP开发框架

  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框架

用于HTML5移动开发的10大移动APP开发框架

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

  8.Kendo UI框架

用于HTML5移动开发的10大移动APP开发框架

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

  9.PhoneGap框架

用于HTML5移动开发的10大移动APP开发框架

  说到跨平台开发工具,很多人首先会想到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框架

用于HTML5移动开发的10大移动APP开发框架

  最接近原生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),完成操作前的确认提醒工作。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lpf_leo1992/article/details/78792825

智能推荐

辩论opener_您应该学习辩论的第一门编程语言-程序员宅基地

文章浏览阅读141次。辩论openerJS v Python… the final showdownJS v Python…最后的决战At this point there can be no doubt if you are in the tech world you have heard of both of these popular languages. Maybe if you are just start..._辩论的opener

渗透之入门准备(一)菜鸟经验_星语惜馨_新浪博客-程序员宅基地

文章浏览阅读260次。你以为这节课是vm,想太多了,怎么可能如你所愿(这节是专业知识,可以跳过)1.对于一个开始对网络安全感兴趣的脚本小子,如何入门是一件繁琐而且要碰壁很多次的事情,所以为了给后人能够开始了解,我这个菜鸟就跟大家说一下我的个人经验。(大神不喷)---很多东西估计都不懂,只是先给大家了解一下。最好就在虚拟机搭建。2.首先没有授权就对网站渗透是违法的事情,最好就自己搭建环境进行渗透,此次就以用..._网络渗透菜鸟教程

nyoj 132-最长回文子串_第一行输入一个字符串s,s的长度小于等于5000大于等于1-程序员宅基地

文章浏览阅读656次。http://acm.nyist.net/JudgeOnline/problem.php?pid=132最长回文子串时间限制:1000 ms | 内存限制:65535 KB难度:4描述输入一个字符串,求出其中最长的回文子串。子串的含义是:在原串连续出现的字符串片段。回文的含义是:正着看和倒着看是相同的,如abba和abbebba。在判断是要求忽略_第一行输入一个字符串s,s的长度小于等于5000大于等于1

华为WLAN AirEngine 9700S AC控制器如何开启双SSID_华为ac9700s-sweb配置教程-程序员宅基地

文章浏览阅读6.2k次。业务场景:家庭大户型上下2层住宅用户通过WLAN接入网络业务需求:扫地机器人只正常2.4G网络,目前默认2.4G和5G频段合二为一,导致扫地机器人不能正常接收命令上传数据,无法正常使用。目的:5G和2.4G信号都单独显示出,让扫地机器人连上2.4G网络AC版本9700S-SV200R020C00SPC300web配置步骤1.配置向导–无线业务–新建SSIDxx5G生效射频只选1(5G)其他参数和现有ssid一样,保存2.更改原有SSIDxx生效射频只保留0(2.4G)其它不变,保存3_华为ac9700s-sweb配置教程

PeakDo毫米波投屏器Hybrid新玩法-程序员宅基地

文章浏览阅读302次。毫米波在如今的网络通信领域可以称得上是第一梯队的高频词汇,作为5G时代的重要组成部分,毫米波是波长为毫米级的电磁波,通常占据了30~300GHz的网络频段,从速度来看,毫米波甚至要比我国现行5G网络普遍使用的Sub-6 GHz还要更快。不过毫米波对信号条件有着更高要求,这也是为什么如今我们能见到的毫米波实际应用并不多。但在室内良好环境下,毫米波技术仍然具备很大的潜力,替代室内场景的各种屏幕HDMI连接线材,就成了毫米波技术首先盯上的领域。在毫米波60GHz频段有着2.4GHz和5.0GHz W._毫米波投屏

超市出了新的活动:4个空汽水瓶可以换1瓶汽水。小明现在手上有n个空汽水瓶,他最多可以换多少瓶汽水喝?_商店规定每4个空瓶可以换一瓶汽水-程序员宅基地

文章浏览阅读1.5k次。#include<stdio.h>int main(){int n;//初始空瓶数int total;//总共喝到的可乐数int m=0;//上一次喝到的可乐数int t=0;//上一次喝完剩下的空瓶数int i=1;//进入循环结构while(i>0)/循环次数,可以自己定义/{total=0;scanf("%d",&n);m=n/4;t=m+n%4;total+=m;while(t>3){m=t/4;t=m+t%4;total+=m;}_商店规定每4个空瓶可以换一瓶汽水

随便推点

ES 内存使用和GC指标_es gc count多少算异常-程序员宅基地

文章浏览阅读3k次。摘录自:http://blog.csdn.net/yangwenbo214/article/details/74000458ES 内存使用和GC指标——主节点每30秒会去检查其他节点的状态,如果任何节点的垃圾回收时间超过30秒(Garbage collection duration),则会导致主节点任务该节点脱离集群。内存使用和GC指标在运行Elasticsearch时,内存是您..._es gc count多少算异常

【UML】——活动图-程序员宅基地

文章浏览阅读5.8w次,点赞25次,收藏96次。一、活动图概述1、流程图:常被用来建立算法模型,使用流程图可以表示一个算法的执行序列、过程、判定点、分支和循环 活动图和流程图十分类似,不同之处在于它支持并行活动 活动图的缺点:很难清楚的描述动作与对象之间的关系,没有交互图直接2、活动图作用描述一个操作的执行过程中所完成的工作或 者动作 描述对象内部的工作 显示如何执行一组相关的动作,以及这些动作如何影响周围对象 描..._活动图

Java并发编程:第七章 并发工具类_java并发编程的类-程序员宅基地

文章浏览阅读1.2k次,点赞32次,收藏11次。在Java并发框架中,Exchanger 是一个同步点,它允许一对线程在一个点上交换对象。Exchanger 非常适合于两个线程需要相互传递数据或信息的场景,例如遗传算法中的配对交叉操作,或者流水线设计中两个工作阶段的交互。让一组线程到达一个屏障时被阻塞,直到最后一个线程到达屏障时,屏障才会开门,所有被屏障拦截的线程才会继续干活,线程进入屏障通过CyclicBrrier的await方法。信号量主要用于两个目的,一个是用于多个共享资源的互斥使用,另外一个用于并发线程的控制。_java并发编程的类

Qt5/6Windows下使用QSettings操作注册表或者使用WindowsAPI调用Firefox浏览器打开网址_windows api打开网页-程序员宅基地

文章浏览阅读655次。在Windows下操作注册表是程序中常用的操作,这里我们借用浏览器打开网页来看看如何操作注册表,使用的是QSettings类,对于键值对的操作,使用它最为适合了。void MainWindow::on_btnSetDefaultBrowser_clicked(){#ifdef WIN32 QSettings a("HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\App Paths\\firefox.ex_windows api打开网页

SpringBoot单元测试java.lang.IllegalStateException Could not initialize plugin: interface org.mockito解决方案_java.lang.illegalstateexception: could not initial-程序员宅基地

文章浏览阅读2.8w次,点赞40次,收藏42次。本文主要介绍了SpringBoot项目单元测试java.lang.IllegalStateException: Could not initialize plugin: interface org.mockito.plugins.MockMaker,希望能对使用SpringBoot项目单元测试的同学们有所帮助。文章目录1. 问题描述2. 原因分析3. 解决办法_java.lang.illegalstateexception: could not initialize plugin: interface org.

Python淘宝电脑销售数据爬虫可视化分析大屏全屏系统 开题报告-程序员宅基地

文章浏览阅读4.4k次,点赞21次,收藏17次。Python淘宝电脑销售数据爬虫可视化分析大屏全屏系统 开题报告毕设毕业设计作品,从而节省人力、物力,只要会打字即可,不需要很高的学历;综上所述,Python淘宝电脑销售数据爬虫可视化分析大屏全屏系统的研究将为企业和市场参与者提供宝贵的市场洞察和决策支持,促进电脑市场的健康发展和竞争态势的优化。跨文化和方法的借鉴:国外的学者在电子商务、消费者行为等领域的研究,尤其是在跨文化背景下的研究,为国内淘宝电脑销售数据的研究提供了方法上的借鉴和启示。

推荐文章

热门文章

相关标签