跨平台的html5移动app开发框架都有哪些

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨平台的html5移动app开发框架都有哪些相关的知识，希望对你有一定的参考价值。

jquery mobile和bootstrap都是较好的框架
　　jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
　　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源码进行性能优化而来。 参考技术A

以下集中供你参考，已经说明了利弊，望采纳~

Cordova

    生态成熟，有更多可搭配工具使用，开源代码可自由定制；

    前端框架： famous 或 Framework7

    DCloud

    国产中的开源，免费，性能不错

    提供云服务帮助打包和部署、测试，降低一部分门槛，减少时间；

    前端框架：MUI

AppCan

    闭源，商业化产品，免费版限制太多；

Ionic

    AngularJS 学习曲线陡峭，需要时间；

React Native

    学习成本高

 参考技术B 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选择器，高效的动画播放，强大的，包扩展机制，支持类的继承等。

几款移动跨平台App开发框架比较

原文地址：https://www.cnblogs.com/songxingzheng/p/6482697.html

 

整理目前流行的跨平台WebApp开发技术的特点，仅供参考。

每个框架几乎都包含以下特性：

  • 使用 HTML5 + CSS + JavaScript 开发
  • 跨平台重用代码
  • 丰富的UI库
  • 提供访问设备原生API的 JavaScript API 包装器
  • 解决原生开发中机型适配的难题
  • 提供打包、部署的工具或服务
  • 都需要学习自身封装的 JavaScript API

筛选框架的要求：

  • 性能：运行速度快
  • UI：提供接近原生的UI体验
  • 插件多，文档丰富，开发效率高，容易扩展和维护
  • 满足业务需求

Cordova

Cordova 和 PhoneGap 的区别？
PhoneGap 是 Apache Cordova 的一个分发版，就像 Ubuntu 是 基于 Linux 的一个发行版，其代码库也基于 Cordova，只是 PhoneGap 关联了 Adobe 的一些额外的商业工具或服务，例如 PhoneGap Build 和 Adobe Shadow，来帮助开发者简化开发。
此外，两者提供的CLI工具、项目结构有差异，如：
Cordova 把 config.html 放在项目目录下，而 PhoneGap 把它放在www 目录下。

优点：

  • 开源免费，社区生态成熟，插件丰富
  • 支持离线场景应用
  • 开发工具选择空间大

缺点:

  • 只提供基础访问设备的接口，需要自己搭配其他UI框架和JavaScript框架来搭配

UI框架

参考资料

Cordova中文文档
创建第一个App（英文）
利用 Cordova+Famous 创建高性能跨平台APP
使用 Cordova 和 Vue.js 创建移动应用

Ionic

官网地址：http://www.ionic.wang/ （有案例）
Ionic = Cordova + AngularJS + 一套样式库。

技术要求

  • HTML + CSS + AngularJS

优点：

  • 基于 Cordova
  • 漂亮的界面，追求性能，专注原生，免费开源
  • Angular JS MVVM 开发理念，数据双向绑定
  • 继承自 Cordova，可以使用 Cordova 的插件

缺点：

  • Angular JS 学习路线陡峭
  • Ionic 框架相比于原生的 Cordova 有所差异，Cordova 某些官方插件可能不适用于Ionic

AppCan

通过AppCan IDE集成开发系统、云端打包器等，快速开发出Android、iOS、WP平台上的移动应用。

有两种方式创建项目：IDE 和云端，并且IDE可以同步到云端。
免费用户有100M空间、50个应用的限制。

优点

  • 提供一体化解决方案，方便环境搭建、开发、调试、发布
  • 框架自带UI包，包含常用控件样式
  • 框架对UI、动画渲染进行过优化，反应速度快
  • 支持本地打包、云端打包
  • 基于密钥的代码加密

缺点

  • 不开源，无法修改、优化底层代码
  • 分大众版和企业版，大众版免费，但功能有缺失，详细见附录
  • 暂不支持自行开发控件/，无法调取android原生功能
  • 框架自带功能过多，导致应用安装包偏大。
  • 文档偏少
  • 部分系统无法使用IDE进行调试
  • 只能在服务器端发布，无法在本地发布
  • IOS发布，需要将证书上传至服务器

参考：
Phonegap VS AppCan

使用案例：
我爱我家App 等

附录：
企业版和大众版主要有以下几点区别：

  • 开发环境：
    企业版走独立的开发环境与打包环境，企业版配备macmini打包服务器，可以实现本地环境下创建项目，调试，打包；
    大众版不管是创建项目还是打包都需要依托于官方的服务器，需要在联网的情况下进行，打包需要将源码上传到官方服务器进行打包；
  • 版本控制：企业版独立控制引擎插件的版本；
    大众版官方统一维护，官方换哪个版本开发者就需要使用哪个版本，没有选择；
  • 协同开发：企业版可通过macmini后台分配开发者或者应用管理员帐号，可实现协同开发。
    大众版不能满足协同开发
  • 企业版有推送API接口
    大众版没有
  • 售后服务：企业版有独立的售后团队
    大众版的入口是论坛

Dcloud

技术分享图片

技术分享图片

特点：
云编译必须联网获取AppId

优点：

  • 国内厂商，中文文档
  • 对HTML5的性能、工具、能力都做了深入扩展，提供 IDE 、云服务等帮助节省时间
  • MUI 更贴近国内App使用习惯，提供模块的详细例子，如登录，个人中心

缺点：

  • 部分操作需要具备原生开发经验，如离线打包App
  • 新产品仍然有bug，还需改进

学习路线：

技术分享图片

APICloud

优点：

  • 不懂原生开发，不懂后台语言就可完成APP

缺点：

  • 更新速度快，版本不够稳定
  • 面向不懂App开发人群，不适合程序员和科技公司，过度依赖会降低技术水平
  • 涉嫌抄袭DCloud大量代码

React Native

能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。
仅需学习一次，编写任何平台。(Learn once, write anywhere)

缺点：

  • 初次学习成本高
  • 必须在不同平台下写两套代码，依赖暴露的接口

总结

经过一番对比，感觉 Cordova 和 DCloud 更适合本次项目。

原因：
Cordova

  • 生态成熟，有更多可搭配工具使用，开源代码可自由定制；
  • 前端框架： famous 或 Framework7

DCloud

  • 国产中的开源，免费，性能不错
  • 提供云服务帮助打包和部署、测试，降低一部分门槛，减少时间；
  • 前端框架：MUI

其他框架不适合的原因：
APICloud

  • 生态不好，名声不好，面向群体不适合；

AppCan

  • 闭源，商业化产品，免费版限制太多；

Ionic

  • AngularJS 学习曲线陡峭，需要时间；

React Native

    • 学习成本高

 


























以上是关于跨平台的html5移动app开发框架都有哪些的主要内容，如果未能解决你的问题，请参考以下文章

html5 app开发用啥框架比较好

利用HTML5开发移动应用都有哪些优点

基于Html5的移动端APP开发框架

IT都有哪些课程呀？

移动开发技术都有哪些？

java低代码开发平台都有哪些？