移动端webUI框架(HTML5手机框架)

2023-05-16

淘宝SUI Mobile框架

官网地址:http://m.sui.taobao.org/

SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。

轻量的UI库

SUI Mobile 非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K,却提供了20+个常用的组件。

对于只有HTML&CSS的组件,你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件,并且提供了 Zepto/jQuery 风格的API,你将会非常熟悉这种方式。

移动端web框架 Frozen UI

官网地址:http://frozenui.github.io/

Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。

非手Q用户不能使用离线包而直接请求核心css也仅28k,另外也可以采用cdn和combo的方式按需加载。

CSS组件包括按钮,列表,表单,通知,提示条,弹出框,选项卡,等级图标,角标,红点,1px解决方案等。

CSS使用模块化的样式命名和组织规范,使用sass编写css代码。

FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.js 和 FrozenUI,支持seajs模块化和非模块化两种方式。

FrozenJS 包括: basic:FrozenJS 的一些基础功能,包括模板引擎、tap 支持等。 ui:主要是一些触屏常用的 UI 组件,包括 dialog 等。 effect:非常用的特效库,特殊场景使用到是可以单独调用。

兼容android 2.3 +,ios 4.0 + 。

移动WebApp开发框架 Clouda

官网地址:http://clouda.baidu.com/

Clouda是基于node.js的Webapp开发框架,在使用Clouda时需要安装node.js和MongoDB。

Clouda 是百度推出的一款面向资深开发者的WebApp开发框架。在Clouda中开发app,可以在多终端下实现数据同步、任务迁移。并且Clouda支持面向数据的编辑模式,根据数据的变化自动实现界 面实时更新,开发者不需描述跃迁过程。它的核心在于云、端使用统一的Javascript语言,可以同时运行在浏览器、iOS、Android以及百度框中。另外,clouda app可以同时开发服务端和客户端,客户端的数据与云端实时同步,其内部数据也可供搜索引擎检索,解决app孤岛以及99.9%长尾应用只有30%分发量 的搜索分发问题。

HTML 移动端框架 Framework7

官网地址:http://framework7.io/

Framework7 或者叫 F7 是全功能的绑定 iOS 7 应用的 HTML 框架。Framework7 是免费开源的 HTML 移动端框架,用来开发混合移动端应用或者 iOS 7 的 Web 应用,并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。

Framework7 使用 Javascript,CSS 和 HTML 来创建 iOS 7 应用,支持多个平台的迁移(PhoneGap),但是不是支持所有平台,主要还是针对 iOS 7。

Amaze UI框架

官网地址:http://amazeui.org/

Amaze UI 开发思路

通过拆分、封装一些常用的网页组件,以规范化采用云适配平台开发的移动网站,统一用户体验逐渐形成的。

1、语义化

Amaze UI开发遵循语义化原则,意图通过类名(class)等信息直观传达元素的功能角色,同时关注结构、样式、行为分离,降低各部分的耦合程度,提高开发效率和可维护性。

2、移动优先,跨屏适配

遵循 “移动优先(Mobile First)”、“渐进增强(Progressive enhancement)”的理念,可先从移动设备开始开发网站,逐步在扩展的更大屏幕的设备上,专注于最重要的内容和交互,适应移动互联潮流。轻松创建跨屏适配的网页。

3、模块化,按需定制

AMUI使用LESS编写样式,结构良好,易扩展,易维护;使用Seajs模块化开发、组织 JavaScript,自然、优雅。

4、专注于HTML5

AMUI 基于轻量的Zepto.js开发,有效减少为兼容旧浏览器的臃肿代码;基于 CSS3 的交互效果,平滑、高效。AMUI专注于现代浏览器(支持HTML5),不再为过时的浏览器耗费资源,为更有价值的用户提高更好的体验。

5、本地化支持

相比国外的前端框架,Amaze UI专注解决中文排版优化问题,根据操作系统调整字体,实现最佳中文排版效果;针对国内主流浏览器及App内置浏览器提供更好的兼容性支持,为你节省大量兼容性调试时间。

Amaze UI 的开发历程

云适配创始人陈本峰:这个项目最开始是作为内部使用工具来开发的。我们云适配本身就是一个前端产品,Amaze UI能帮我们降低开发时间和成本,用标准化作业流程,能有更高的产出。

从云适配创立之初,我们就开始积累自己的前端框架,同时也借鉴了Bootstrap等国外框架的优点。在内部使用过程中,大家一致反映不错,我们就希望把这个产品开源,希望分享给更多的人,也希望更多的人来贡献代码,来共建中国前端开源生态环境。在最近几个月,我们投入人力将这个项目整理成一个开源产品。目前有2个软件工程师全职在开发这个产品,还有一个设计,一个PM也在尽力配合。产品发布之后,我们会投入更多全职的工程师来专心打磨这个产品,同时也呼吁更多的前端开发爱好者共同来完善这个框架。

Amaze UI的目标

帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的前端开发者不再受前端复杂代码困扰。

Jingle移动端框架

官网地址:http://vycool.com/Jingle/

Jingle是一个SPA(Single Page Application)开发框架,用来开发移动端的html5应用,在体验上尽量去靠近native应用,希望有一天html5能够做到与native一样的操作体验。

腾讯移动Web前端框架

官网地址:https://github.com/AlloyTeamDev/Pro

微信WeUI和微信支付WePayUI

https://github.com/weui/weui

https://github.com/wepayui

GMU

百度已经不更新

 

purecss

 

ionic

 

jquery mobile

 

bootstrap

 

MUI

http://dev.dcloud.net.cn/mui/

 

AUI

http://www.auicss.com/

 

 

总结:

框架固然是好,而且很多问题都已经解决,尤其是兼容性问题;但是带来的问题也很多,尤其是你只会用框架,不知道里面的原理;所以我个人建议:先静态最原始的方式实现,再到框架进行重构。

转载于:https://www.cnblogs.com/EasonJim/p/6216587.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

移动端webUI框架(HTML5手机框架) 的相关文章

  • 架构师必须学会的几种 UML图

    文章目录 一 UML 是什么定义作用 二 UML 画图的工具推荐三 UML 类图中的关系1 泛化 继承 2 实现 xff08 Realization xff09 3 关联 xff08 Association 4 聚合 xff08 Aggre
  • 算法:如何实现两个大数相加

    文章目录 问题要求思路代码实现 问题 实现两个很大很大的数相加 xff0c 求出它们的和 要求 1 是整数 xff1b 2 两个数无限大 xff0c long 都装不下 xff1b 3 不能用 BigInteger xff1b 4 不能用任
  • 关于Android 未来开发的方向探讨

    文章目录 背景Anroid 应用开发工程师技能参考Android 基础设施建设技能参考Android 逆向开发工程师技能参考Android Framework工程师技能参考 xff08 车载系统 系统开发方向 xff09 Android 性
  • Git Commit Message 规范实践

    文章目录 背景示例FeatureBugRefactorDocsTestStyleChore 每个Merge Request只有一个Commit小结附录 背景 本文总结了项目实践中的 Commit Message 规范 任何一笔提交都是有原因
  • github push 报错的问题记录

    文章目录 背景解决办法示例 背景 当 git 执行 git push xff08 origin origin master xff09 后出现错误提示 xff1a git push origin origin master Password
  • Mac 平台 Android FFmpeg 编译与集成实践

    文章目录 FFmpeg 是什么为什么要学 FFmpeg 开发FFmpeg 编译1 编译环境准备2 FFmpeg 环境配置3 完整的脚本4 FQA 编译小结在Android Studio 中的集成集成问题记录写在最后 FFmpeg 是什么 F
  • 音频中文件大小计算公式(转)

    声卡对声音的处理质量可以用三个基本参数来衡量 xff0c 即采样频率 采样位数和声道数 采样频率是指单位时间内的采样次数 采样频率越大 xff0c 采样点之间的间隔就越小 xff0c 数字化后得到的声音就越逼真 xff0c 但相应的数据量就
  • 「设计模式」六大原则之一:单一职责小结

    文章目录 1 单一职责原则定义2 如何理解单一职责原则 xff08 SRP xff09 xff1f 3 如何判断类的职责是否足够单一 xff1f 4 类的职责是否设计得越单一越好 xff1f 5 应用体现6 应用示例18 应用示例2 xff
  • 「设计模式」六大原则之二:开闭职责小结

    文章目录 1 开闭原则定义2 如何理解 对扩展开放 对修改关闭 xff1f 3 如何做到 对扩展开放 修改关闭 xff1f 4 如何在项目中灵活应用开闭原则 xff1f 5 示例 xff1a 6 小结 xff1a 设计模式 六大原则系列链接
  • 「设计模式」六大原则之三:里氏替换原则小结

    文章目录 1 里式替换原则定义2 举例说明示例1 xff1a 示例2 xff1a 3 哪些代码明显违背了 LSP xff1f 子类违背父类声明要实现的功能子类违背父类对输入 输出 异常的约定子类违背父类注释中所罗列的任何特殊说明开发 Tip
  • 「设计模式」六大原则之四:接口隔离原则小结

    文章目录 1 接口隔离原则定义2 如何理解3 接口隔离原则与单一职责原则的区别2 举例说明4 小结 设计模式 六大原则系列链接 设计模式 六大原则之一 xff1a 单一职责小结 设计模式 六大原则之二 xff1a 开闭职责小结 设计模式 六
  • 「设计模式」六大原则之五:依赖倒置原则小结

    文章目录 1 依赖倒置原则 xff08 DIP xff09 定义4 DIP举例说明2 如何理解控制反转 xff08 IOC xff09 3 如何理解依赖注入 xff08 DI xff09 4 小结 设计模式 六大原则系列链接 设计模式 六大
  • 「设计模式」六大原则之六:最小知识原则小结

    文章目录 1 最小知识原则 xff08 LOD xff09 定义2 什么是 高内聚 呢3 什么是 松耦合 xff1f 4 应用举例 设计模式 六大原则系列链接 设计模式 六大原则之一 xff1a 单一职责小结 设计模式 六大原则之二 xff
  • Android NDK 中堆栈日志 add2line 的分析实践

    文章目录 目的常用的辅助工具分析步骤参考 目的 Android NDK 中出现的 crash 日志分析定位 xff0c 使用 addr2line 对库中定位so 动态库崩溃位置 xff0c 定位到某个函数的具体的代码行 常用的辅助工具 ad
  • Android 中关于 FileObserver类监听文件状态的实践

    文章目录 需求背景走进源码实现示例参考 需求背景 当某一个目录的文件发生变化 xff08 创建 修改 删除 移动 xff09 时 xff0c 需要给一个回调事件给其他端调用 其他场景 xff1a 阅后即焚等等 比如在 Android 的 V
  • Android10 系统 Framework 中定制实现开关机动画实践

    文章目录 写在前面 需求背景 主要问题 接口测试 权限问题对比测试 最后实现方案 其他问题 总结 写在前面 本文主要记录了在Android 10 系统 定制开关机动画时遇到的权限 读写 问题以用开关机动画资源的流程 文件要求等问题 涉及知识
  • VirtualBox 报错Interface ('VirtualBox Host-Only Ethernet Adapter') is not a Host-Only Adapt

    前几天用VBox虚拟机的时候 xff0c 忽然打不开了 xff0c 提示 无法为虚拟机打开一个新任务 xff0c 详细错误信息 Interface VirtualBox Host Only Ethernet Adapter is not a
  • BT中的磁力链接(转)

    注意 xff1a 磁力链接不是迅雷的 xff0c 而是BT网络中的一种协议 磁力链接与种子文件 磁力链接并不是一个新概念 xff0c 早在2002年 xff0c 相关的标准草稿就已经制定了 但直到2012年海盗湾为规避版权问题删除了站点上的
  • 如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名

    拥有自己的个人网站 xff0c 无可否认是能增加学习Web开发的动力的 本笔记记录使用GitHub Page xff0c 免费搭建个人网站 xff0c 以及如何链接自己的域名 写在前面 xff1a 什么是GitHub Pages 根据官网的
  • 关于系统托盘图标(systemtray)无法显示问题的解决

    http blog csdn net robin7513 archive 2010 03 22 5403991 aspx 最近在一个程序中使用了系统托盘图标 xff08 systemtray xff09 xff0c 用于提示信息和快捷操作

随机推荐