使用html5开发移动端应用采用啥框架

Posted 2023-04-13

随着使用智能手机的人越来越多，手机网站开发项目也成为一种潮流。可是您知道机网站开发框架有几种吗?

　　1. LungoJS

　　这个是被认为开发移动网站最好的html5开发框架，使用 HTML5/CSS3 和 javascript 技术。可帮助创建基于 ios、 android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性，可捕捉事件包括滑动、触屏、长按等。无需使用图片，全部采用向量声称。

　　Lungo.JS 无需服务器端支持，可帮助实现 HTML5 特性，包括 WebSQL、Geolocation、 History、 Device orientation 等等。这是一个完全可定制的框架，可用来创建应用、游戏等程序。

　　2.Kendo UI

　　Kendo UI是一个HTML5平台，开发者利用它可以开发新颖的、交互的移动应用程序和网站。该框架提供了大量的动画和丰富的拖拽功能、模板功能以及提供了将近10款客户端常用的数据绑定小部件，如图表、组合框以及常用表格。

　　3.Jo

　　该框架可以创建像本地一样的应用，并且兼容任何操作系统，无论是Blackberry、iOS还是Android。并且提供许多HTML5小部件。使用它可以解决任何动画设计方面的问题。

　　4.Sencha Touch

　　Sencha Touch是第一个基于HTML5的移动应用框架，利用JavaScript、HTML5和CSS3来构建移动应用程序，该框架利用本地代理存储离线数据，具体使用HTML5来渲染视频和音频组件。

　　可以让你的Web App看起来就像本地应用程序一样。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的Web标准，全面兼容Android和Apple iOS设备。

　　5.52 Framework

　　52 Framework拥有16列的网格模板。该框架来自于CSS3样式里的新“Selection”、阴影、圆角以及有效的HTML5标记。该框架还提供了一些特殊的脚本和样式用于IE6。

　　6.LimeJS

　　LimeJS 是一个 JavaScript 游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。允许开发者创建基于 HTML5 的游戏，支持主流浏览器包括iOS。

　　7. G5 Framework

　　如果你想要快速实现Web开发，并且想要重用ant主题或应用程序或网站项目，那么G5 框架是您最好的选择，因为该框架旨在提升开发效率、减少代码。该框架采用特色的php激活类、SEO优化技术。除了G5自身所带的这些功能特性外，它还集成其他许多功能，例如Orbit Slider、CSS3 PIE、Reveal Modals、CSS3 Buttons和Tipsy Tooltips等。

　　8.jQuery Mobile

　　jQuery Mobile(jQueryMobile)是 jQuery在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。

　　9.Phone Gap

　　PhoneGap是一个开源的开发框架，使用HTML，CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone，Android，Palm，Symbian，Blackberry，Windows Phone和Beda智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等。 参考技术A Html5框架在当下火热程度不减，越来越多的人都在学习从事html5开发。前端html5框架有哪些？小编推荐五款国内较火的HTML5前端开发框架，它们分别是腾讯团队开发的JX、淘宝团队开发的KISSY、百度团队开发的QWrap和Tangram，以及上海康尚实验室推出的Como。

1. JX（腾讯），腾讯团队打造的前端开发框架JX
JX 是一个类似 Google Closure Library 的 Web 前端开发框架，服役于 WebQQ 等大规模的 WebApp。
JX 是模块化的非侵入式Web前端框架，开发于2008年，并于2009年开源于GoogleCode ，于2012年切换到Github。 JX 框架同时适用于 Web Page 和 Web App 项目的开发，特别适合构建和组织大规模、工业级的Web App，腾讯 WebQQ、腾讯Q+等产品都是采用JX框架开发，兼容目前所有主流浏览器。
2. KISSY（淘宝）
KISSY是淘宝的前端类库，几乎在淘宝的每个页面上都能看到它的身影。
KISSY提供稳定的核心，包括 oo、dom、Event、Anim、Ajax 等；强大且易用的脚本加载器，特有的 loader；丰富的UI组件，包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全等特性。

3. QWrap（百度）
QWrap是百度有啊前端团队推出的一个Javascript框架，支持IE6+、Firefox、Chrome、Safari、Opera等浏览器，在BSD协议下开源发布。
QWrap的特点如下：
1. 提供jQuery一样方便的dom功能，同时又打破jQuery“专注于dom”的约束，也提供非dom的许多功能。
2. 提供prototype方便的原型功能，同时又提供Javascript1.6的泛型功能，并且提供用户有选择方便与严谨的自由。
3. 提供YUI2一样的静态方法库，同时又用所谓的Helper规范来做到真正的绝对静态，让组件开发者可以发布出无依赖的组件。
4. 学习YUI3的use，同时又摈弃YUI3的严谨性洁癖，让use更实用。
5. QWrap独创特的Helper + Wrap + Retouch + Apps设计，让QWrap有更多的灵性等待你去发现。
4. Tangram（百度）
Tangram是一款实用的JavaScript基础库，通过它可以快速构建出高度互动的Web应用程序。Tangram具有全浏览器兼容，平滑升级体验以及自由定制输出较小尺寸的特点。
5. Como（康尚实验室）
Como JS，Como由上海康尚实验室开发，是一款简易而功能强大的JS框架，对String等原生对象进行了扩展，支持常用的CSS选择器，高效的动画播放，强大的，包扩展机制，支持类的继承等。

技术干货前端开发之IONIC移动端开发

以下正文

---

一：前言

Ionic是一套HTML5 Hybrid Mobile应用开发框架，基于AngularJS框架，使用Sass框架编写核心CSS代码，并且提供了一套CSS组件库和JavaScriptUI库,支持订制Android和IOS插件，支持PhoneGap库开发移动端原生应用，使用Ionic可以很方便的开发跨平台的移动应用。接下来介绍如何在MAC下搭建Ionic开发平台和开发移动端应用。

二：Ionic开发环境搭建

搭建开发环境主要包括以下几个步骤：

步骤一：

npm install -g cordova ionic （全局安装ionic和cordova）

步骤二：

安装Android SDK用于安装Android模拟器和将Ionic打包成AndroidAPP，在MAC下你可以使用HomeBrew安装，在终端输入：brew install android-sdk。安装成功以后在终端输入android命令，打开Android SDK Manager工具，并且选择最新的版本进行安装。

注意，如果在安装过程中出现JAVA版本问题，你需要更新JAVA版本。如果出现Ant的报错信息，你可以通过brew install ant 来安装Ant。

 

三：Ionic项目开发

环境安装好以后，开始进行我们的项目开发，创建一个Ionic的项目，在终端输入ionic start来创建我们的项目，在Ionic官网上有三个模板可供我们选择，分别是blank、tabs和sidemenu。接下来我们创建一个名为myproject的项目，并且使用tabs模板创建默认带上tabs的项目，运行ionic start myproject tabs命令，创建成功后进入该项目目录运行npm install和bower install安装依赖的包，依赖包安装成功以后我们可以用ionic serve运行我们的项目，这样我们就可以在浏览器中看到项目的运行结果。

接下来我们来看看通过命令来编译和在模拟器中查看我们的app。首先得为我们的项目添加IOS和android的两个平台。

使用ionic platform add ios 来添加IOS环境：

使用ionic platform add android 来添加android环境：

安装完成后，我们开始在ios和android平台下编译我们的项目。使用ionic build ios和ionic build android来分别编译ios平台和android平台，IOS编译最后出现BUILD SUCCEEDED 和 Android编译最后出现BUILD SUCCESSFUL及代表编译成功。编译成功后，我们可以在模拟器上查看我们的项目，首先，我们通过ionic emulate ios将项目安装到IOS simulator里面，如果出现错误：

Error: ios-sim was not found. Please download, build and install version 1.7 or greater from https://github.com/phonegap/ios-sim into your path. Or 'npm install -g ios-sim'; using node.js: http://nodejs.org/

那就执行npm install –g ios-sim。

Ionicemulate ios命令执行成功后，系统会打开ios simulator，并且安装我们的项目：

接下来我们执行ionic emulate android命令来启动我们的android模拟器安装并查看我们的项目:

在模拟器上可以看出ionic在不同的平台显示效果会有所差异，这是根据不同平台用户使用习惯来自动设置的，比如在ios下，tabs都是在下面，而在android下却是在上面，当然我们可以通过代码配置来设置tabs始终在上面或者下面，在项目目录www/js/目录下，找到app.js，在该文件中加入一段代码：

$ionicConfigProvider.tabs.position('bottom')

这样，tabs就始终被设置到底部了。

上面我们介绍完了通过命令行来编译及在模拟器中查看我们的项目，我们也可以使用ionic Lab工具来编译查看项目，如图：

 

四：Ionic+Cordova开发

Cordova插件允许通过JavaScript调用移动端原生应用及组件，比如摄像头、播放器、文件系统、弹出框等等，使得我们的应用更加接近Native App。接下来我们通过安装device插件来了解下如何使用cordova插件,在安装插件之前，我们需要先安装ngCordova依赖包，在终端输入命令bower installngCordova，然后在index.html引入ngcordova的JavaScript文件：

首先通过进入到我们的项目跟目录里面，通过命令：ionicplugin来查看项目中已经安装的插件：

当前列出来的即使项目中已经安装的插件，插件列表大家可以进入网站：

https://cordova.apache.org/plugins/?platforms=cordova-android%2Ccordova-ios中查看,如图：

接下来我们安装我们的插件cordova-plugin-device插件，在终端执行命令:ionic pluginadd cordova-plugin-device 将插件添加到项目中，如图：

然后我们在angular的controller中通过$cordovaDevice服务来获取设备信息，如：

效果如图：

五、常用命令介绍

除了上面提到的一些命令，Ionic还有其他的几个常用命令，如下：

ionic server    在浏览器中启动项目

ionic platform 查看已经安装的平台或者可以安装的平台。

onic platform add<platform_name> 添加平台

ionic platform remove<platform_name> 移除平台

ionic build  编译已经安装的所有平台

ionic build<platform_name> 编译指定的平台

ionic plugin  查看已经安装的所有插件

ionic plugin add <plugin_name>安装指定的插件

ionic plugin remove<plugin_name> 删除指定的插件

ionic emulate 启动所有已安装平台的模拟器

ionic emulate<platform_name> 启动指定平台的模拟器

ionic run 在没有连接设备的情况下相当于ionic emulate

ionic run<platform_name> 在指定设备中部署运行项目，没有设备连接的情况下相当于ionic emulate <platform_name>

 

六、其他

1、如果项目在ios9及以上版本出现显示的问题，可以打个补丁,进入github：

https://gist.github.com/IgorMinar/863acd413e3925bf282c

下载补丁，并在项目中引入该JS文件。

2、在MAC下，将应用运行在iphone上面实时查看效果：

打开xcode，选择“文件->打开”进入到项目根目录下/platform/ios,然后在“device”中选择自己的iphone手机设备然后点击左侧的运行按钮即可安装到手机中，点击如图中框住的地方进行device选择：