webapp框架_webapp前端框架 - CSDN
精华内容
参与话题
  • webapp开发框架

    万次阅读 2017-11-16 14:38:08
    介绍几个移动web app开发框架     jQuery Mobile  jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格。jQuery ...

       快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业APP开发企业,和APP服务提供商。 安卓和IOS的操作方式,开发模式,界面UI显示方面的差别,也使得原生APP的不同版本体验有很大的区别,光是做兼容性调测,都要花费开发企业不少的时间。
    
       近年来,另一种应用形态——基于HTML5技术的Web App也如雨后春笋般出现,于是关于原生APP与HTML5 APP 谁将成为未来的王者,APP开发者们一直争论不休。
    
    html5最主要的优势: 
    1、一套HTML5 APP 即可同时适用安卓及IOS平台,甚至WP平台,适配性和统一体验较好。
      2、版本服务器端更新,用户永远看到的都是最新的APP端信息。
      3、手机客户端及存储数据较少,节约用户手机空间
      4、技术难度较低,开发工作量小,开发成本低。
     **局限性:**
     用户体验大幅落后于原生APP,操作的流畅度,程序的执行效率,与原生APP都有较大差距;HTML5 APP 受网速的影响较大,在网络情况较差的情况下,HTML5 APP 往往连打开都困难,而原生程序,基本都能顺利打开运行(只是速度较慢)。
    
     因公司项目需求,近端时间研究html5 app开发框架,发现有很多,查资料总结下。
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    介绍那些app适合html5开发:http://www.educity.cn/wenda/11971.html

    1.框架:PhoneGap 
    官网:http://phonegap.com/ 
    简介: PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用。 
    优点:1.可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。成为连接移动终端的适配器,或者说中间件。 
    2.提供硬件访问控制。可调用加速计、摄像头、罗盘、通讯录、文档、地理定位、媒体、网络、通知(警告、声音和振动)、存储。 
    3.可利用成熟javascript框架。如:Ext js、jQuery。 
    缺点:1.性能差。运行速度慢,UI反应延时——这是个致命伤。(高端机影响不大) 
    2.不能完全跨平台。不同平台代码需要微调。 
    3.内存消耗大。 
    4.调试难度大。

    2.框架:Ionic 
    官网:http://ionicframework.com/ 
    简介: Ionic 是一个强大的 HTML5 应用程序开发框架,号称 Advanced HTML5 Hybrid Mobile AppFramework 是 AngularJS 移动端解决方案 可以帮助您使用 Web 技术,比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。 Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 Ionic 是一个轻量的手机 UI 库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI 库在手机上运行缓慢的问题。 
    优点:1.追求性能 运行速度快 
    2.轻量级框架 
    3.基于 Angularjs,支持 Angularjs的特性, MVC ,代码易维护 
    4.通过 SASS 构建应用程序。它提供了很多 UI 组件来帮助开发者开发强大的应用。 
    5.接近原生。 
    6.强大的命令行工具 
    3.可利用成熟javascript框架。如:Ext js、jQuery。 
    缺点:1.Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用 
    2.需要结合插件使用。

    3.框架:Hbuilder(国产) 
    官网:http://dcloud.io/ 
    简介: HBuilder是DCloud推出一款支持HTML5的Web开发IDE。“快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、js、css的开发效率。 
    优点:1、HTML5语法、HTML5+语法、三大浏览器扩展语法,尽收HBuilder中。 
    2、每个浏览器发布新版后,一周内,其新增语法就收录入HBuilder。 
    3、强大到令你震惊的Jquery语法提示! 
    4、每个语法在哪个浏览器、哪个版本上是否可运行,这里都有。 
    5、没有比这里更全的语法库,也没有比这里更全的浏览器兼容性数据库。 
    缺点:1.云端编译,无法保证安全性。 
    2.不能完全跨平台。不同平台代码需要微调。

    4.框架:appcan(国产) 
    官网:http://www.appcan.cn/ 
    简介:AppCan是国内Hybrid App混合模式开发的倡导者,AppCan应用引擎支持Hybrid App的开发和运行。并且着重解决了基于HTML5的移动应用”不流畅”和”体验差”的问题。使用AppCan应用引擎提供的Native交互能力,可以让HTML5开发的移动应用基本接近Native App的体验。 
    与Phonegap支持单一webview使用div为单位开发移动应用不同。AppCan支持多窗口机制,让开发者可以像最传统的网页开发一样,通过页面链接的方式灵活的开发移动应用。基于这种机制,开发者可以开发出大型的移动应用,而不是只能开发简易类型的移动应用。 
    AppCan提供强大的设备调用能力,电话、短信、相机、LBS、传感器、数据库等常用的手机功能,开发者可以通过JS接口调用,轻松构建移动应用。 
    优点:1.跨平台:同时支持iOS、Android、Symbian、Windows Phone 
    2.原生体验:引入原生UI控件与交互支持(如Action Sheet等) 
    3.开发工具:基于Eclipse的开发工具,集成UI控件与应用管理 
    4.UI框架:提供强大的UI框架,更加易于实现页面布局与交互 
    5.设备API:支持各种手机设备调用,如电话、相机、传感器、定位等 
    6.本地打包:无需配置环境,无需编译,本地一键打包 
    7.插件机制:支持第三方原生插件,支持JS插件 
    8.代码加密:基于密钥的加密方式,无法破解,像混编一样保护html代码 
    统计分析:应用分平台安装数统计,应用启动和使用情况统计 
    9.开放平台:更具本土优势,已经对接Sina、QQ、百度等开放平台 
    10.技术支持:技术支持及时响应,重视开发者建议和反馈 
    缺点:1.AppCan免费版因需要把源代码上传到厂商的服务器上打包,对于企业开发来说源代码泄露安全性上有一定风险。企业版虽然可以解决,但企业版稳定尚待观察。 
    2.AppCan采用封装的组件,依赖性比较高。不是开源代码。 
    3.AppCan 不能很好的解决原生代码的功能。

    5.框架:Wex5(国产) 
    官网:http://wex5.com/ 
    简介:WeX5应用快速开发框架(含完整的SDK API及全部源码),一次开发、跨端运行。 
    【定位】开发面向消费者和公众的开放应用系统 
    【适用】一般app、电商app、客服app、会员app、微店微商等 
    【前端】安卓app/苹果app/微信服务号/PC web app 
    【后端】后端数据处理组件,对接各主流技术平台 
    【费用】完全开源,彻底免费,无任何限制 
    优点:1.高效精致的UI组件体系,基于jquery和bootstrap技术,采用增强的RequireJS模块化技术。 
    2.基于phonegap(cordova)框架,如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池等。 
    3.可视化拖拽式集成开发环境IDE,全能力的调试支持和智能代码提示 
    缺点:1.使用范围有限:适用:一般app、电商app、客服app、会员app、微店微商等 
    2.用户量小,存在不稳定因素。

    6.框架:ApiCloud(国产) 
    官网:http://www.apicloud.com/ 
    简介:APICloud是中国领先的“云端一体”的移动应用云服务提供商。APICloud推行“云端一体”的理念,重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成,可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。 
    APICloud致力成为中国领先的移动垂直领域云服务商,帮助传统软件公司从B/S架构成功走向APP,帮助中国数百万web开发者转化成移动APP专家!。 
    优点:1.提供开发的IDE。 
    2.提供数据云API、统计云API、推送云API 
    缺点:与Hbuilder存在版权问题,抄袭Hbuilder

    7、JQuery Mobile 
    1.官方网站:http://jquerymobile.com/ 
    2.性质:UI框架 
    3.说明:这个大名鼎鼎的JQuery的移动版本。跟JQuery一样是一个轻量级的JS库,一样使用HTML5+CSS+JS的技术。应为轻量级,所以在web加载时比Sencha有一点优势。缺点显而易见,UI控件太少了。因为JQuery Mobile 太普及了,也有很多第三方的扩展控件库例如JQuery Mobile Touch。比较有意思的是Sencha Touch 也融合了JQuery Mobile Touch。 
    4.授权:完全开源,放心使用


    14年之前用过一段时间,全是html5+js的,过了2年了,出现了一些比较好的原生效果的开发框架:react native 和fuse

    不同的开发框架有不同的优缺点,使用哪个还需要根据需求针对性的选用

    展开全文
  • 移动WebApp开发 JS框架对比

    千次阅读 2014-11-12 19:56:30
    1 目的 本次评比的目标是以移动Web App开发为基础的JS框架,会有意的排除部分不适用于移动Web ...由于JS框架在功能、特性和应用领域不同,所以,我将现在的主流JS框架分成四个大类: Mobilie Javascript


    1  目的

    本次评比的目标是以移动Web App开发为基础的JS框架,会有意的排除部分不适用于移动Web App开发的JS框架,如 jQuery、ExtJS等。希望通过这次评比结果,能找到最合适你移动Web App应用开发的JS框架。

     

    2   方法

    由于JS框架在功能、特性和应用领域不同,所以,我将现在的主流JS框架分成四个大类:

    • Mobilie Javascript Library。移动JS框架,在Desktop Javascript开发中具有代表性的JS框架有jQuery、ExtJS等,而在Mobile Javascript开发中比较成熟的有Sencha Touch、jQuery Mobile等;
    • Javascript Template Engine。JS模版引擎,Javascript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰。Sencha Touch自带XTemplate模版引擎,完美的应用在组件渲染中;
    • Javascript MVC Framework。JS MVC框架,如Backbone、Ember等。在ExtJS 4的应用架构中就设计有MVC模式,同时Sencha Touch很好的继承了ExtJS在MVC方面的优秀架构思想;
    • Javascript Module Loader。JS模块化加载,在CommonJS提出AMD规范时,就得到了大多数开发者的积极响应,同时诞生了一批符合 AMD规范的优秀的框架,如RequireJS,现在主流的JS框架都陆续开始支持AMD规范 ,如Dojo等。

    本篇文章主要对Mobilie Javascript Library进行对比,针对移动JS框架中的两类特性:

    • 支持平台与兼容性
    • 开发与学习

    作为参考指标,最后分析总结。 

     

    3   Mobile Javascript Library

    Mobile Javascript Library 包含两种类型的JS库:UI框架、类库

    • UI框架包含一套完整的WebApp用户体验,提供一组功能丰富的控件,并允许开发者方便地依照自己的需要加以扩展;
    • 类库仅是一些类与函数的集合,类库中的一个个“完整的概念”之间是无关的或是关系松散的。

    以我们接触得比较多的两种Desktop Javascript Library为例,ExtJS属于UI框架,而jQuery就是一个类库。

     

    3.1 选择移动JS框架思考的问题

    • 优秀的触摸屏交互体验:手指作为输入设备代替鼠标光标提供了一个额外的用户界面设计的挑战。Mobile Javascript Library提供标准的用户界面元素和事件处理模型。
    • 跨平台:支持多种移动设备平台,如 iOS和Android等 。
    • 轻量级:由于移动网络带宽的限制,会更加重视文件大小 。
    • 使用HTML5和CSS3标准:大多数主流移动设备的网页浏览器支持HTML5和CSS3,移动WebApp使用W3C规范的新功能与特性为用户提供更好的体验。

    下面,通过比较Mobile Javascript Library的特性,找到一个最适合的JS框架帮助你创建移动WebApp应用。

     

    3.2 特性比较

     

    3.3 分析

    Sencha Touch

    优点

    •   用户体验最接近Native App, 具有整体的UI组件、布局解决方案;

    •   统一的编程代码结构和要求,良好组织的代码易于维护;

    •   继承ExtJS 4的应用程序MVC架构;

    •   完善的API文档,示例;活跃的社区,网上有大量的文档书籍帮助学习;

     

    缺点

    •   兼容性差,仅支持webkit内核的浏览器;

    •   框架比较重量级,学习成本比较高;

    •   商业化使用有版权问题;

     

    jQuery Mobile

    优点

    •   跨浏览器兼容性最好,几乎兼容所有的平台和浏览器;

    •   入门简单,语法简洁,编码灵活,一些简单的应用直接用HTML既可实现,无需Javascript

    •   开源插件与第三方扩展网上资源丰富;

    •   完善的API文档,示例;活跃的社区,网上有大量的文档书籍帮助学习;

     

    缺点

    •   jQuery Mobile对代码没有特定的要求,后期维护难度较大;

     

    Zepto

    优点

    •   学习成本低,Zepto保持了与jQuery几乎一样的功能,使用gzip压缩只有5-10k;

     

    缺点

    •   Zepto不支持Windows Phone下的IE ;

     

    Jo HTML5 Mobile App Framework

    优点

    •   没有什么突出的优点,感觉是与Sencha非常相似的一个框架;

     

    缺点

    •   兼容性相比Sencha Touch稍好一点,但是也不支持WP IE、Firefox、Opera;

    •   网上文档、资料太少,中文资料几乎没有,英文资料也非常少;

     

    Wink Toolkit

    优点

    •   Wink的核心库是轻量级的,支持AMD规范的模块化加载,功能接口相比Zepto更丰富;

    •   提供很酷的2D、3D效果UI组件;

     

    缺点

    •   组件对 Android的支持程度不好,3D组件无法使用 ;

     

    ChocolateChip-UI

    优点

    •   组件样式模仿iOS界面,用户体验与iOS非常相似;

     

    缺点

    •   兼容性差,仅支持webkit内核的浏览器;

    •   API文档太简单,网上资料非常少,社区没有活力;

    •   组件扩展难度高,要熟悉WMXL标签语法;

     

    XUI

    优点

    •   XUI有多个版本,跨浏览器支持的代码都被剥离,使用GZIP压缩之后最小只有4.2kb。学习成本低,与jQuery相似的链式语法。

     

    缺点

    •   XUI的优点也是缺点,有的Web App应用可能并不希望将跨浏览器支持拆分为多个版本使用;

     

    Dojo Mobile

    优点

    •   Dojo本身有很多优秀的设计,面向对象、MVC、JS模块化加载;

    •   完善的API文档,示例;活跃的社区,网上有大量的文档书籍帮助学习;

     

    缺点

    •   Dojo Mobile需要依赖完整的dojo库,压缩之后的代码140k,gzip压缩之后在40k;

    •   兼容性差,仅支持webkit内核的浏览器;

    •   学习成本高;

     

    4   总结

    想要最好的用户体验Sencha Touch会是最好的选择,想要最好的兼容性应当选择jQuery Mobile,如果有相当强大的UI团队,Zepto、XUI会是更好的选择,适合的才是最好的。

     

    对于我个人而言,我比较青睐Zepto这种小巧灵活的类库,能让我有最大的自由发挥空间。我在面向对象、UI组件、MVC方面拥有多年的开发经验,有能力去设计、编写 UI框架,当然,这些都离不开我的UI团队的支持。虽然Zepto不兼容IE,但是这在可接受的范围之内, 如果未来官方不能支持IE 的话,我的团队有足够的实力与时间实现Zepto对IE的兼容 。

     

    选择一个适合的移动JS框架只是开始,移动WebApp开发才是真正的挑战,如何解决跨平台的各种兼容问题?如何保证基于HTML5的WebApp的稳定性?如何平衡动画效果的性能问题?等等。

     

    5   参考资料

    下载Sencha Touch源代码、阅读文档并加入社区。

    下载jQuery Mobile源代码、阅读文档并加入社区。

    下载Zepto源代码、阅读文档。

    下载Jo HTML5 Mobile App Framework源代码、阅读文档并加入社区。

    下载Wink Toolkit (http://www.winktoolkit.org/)源代码、阅读文档并加入社区。

    下载ChocolateChip-UI源代码、阅读文档并加入社区。

    下载XUI源代码、阅读文档 。

     

    js模块化开发---js大项目代码组织和多人协作的解决之道

    The Top 10 Javascript MVC Frameworks Reviewed

    Web App 被看衰,Hybrid App 才是新王道

    Sencha Touch or jQuery Mobile? – Read This Before You Make a Decision

    几种常用HTML5移动应用框架的比较

    5个jQuery的备选轻量级移动客户端开发(Mobile development)类库

    使用 Jo 和 PhoneGap 构建本地移动应用程序

    使用 Dojo Mobile 为 iOS 智能终端开发 Native-like Web 应用

     

    原创文章,转载请注明出处http://zhangdaiping.iteye.com


    展开全文
  • 5大最流行手机webAPP框架之Ionic

    千次阅读 2016-10-28 08:53:01
    摘要: 说实话,webApp这两年大有赶超原生app的势头,就webApp本身来讲还有很多缺点,执行效率就是其中一个硬伤。但是国外又有个安迪的人说过,只有软件吃掉硬件的时候硬件才需要跟新换代,这样硬件才有生命力。这个...
    https://my.oschina.net/u/2496664/blog/524295
    摘要: 说实话,webApp这两年大有赶超原生app的势头,就webApp本身来讲还有很多缺点,执行效率就是其中一个硬伤。但是国外又有个安迪的人说过,只有软件吃掉硬件的时候硬件才需要跟新换代,这样硬件才有生命力。这个用来证明webApp存在的意义未免有些牵强。但除此之外,webApp生成应用的速度短,产品迭代快,也正是小资本的创业团队推崇它的原因。

     

    Ionic 框架

    Ionic框架是我们前五个web app框架中最年轻的,阿尔法版本是在2013年11月下旬发布Ionic是建立在google的AngularJS框架上的,它利用AngularJS提供应用结构,而本身关注的用户界面。换句话说,我们将会看到强大的Angular和美妙的Ionic的一个完美的组合

    Ionic(自定义HTML元素)为它的组件提供了一组Angular指令,使其很容易使用小部件,简单的就像写一行HTML代码一样。除了指令,Ionic使用Angular的触摸识别器,视图动画逻辑,HTML生态和异步通信。

    虽然可以在克隆和解压以后直接使用,同样你也可以使用npm包管理器来安装基于node-js的客户端,然后迅速开始你的种子项目。

        尽管Angular是目前Ionic的主力,但是仍然允许开发人员以开放的选项来支持该框架,例如Knockout或者Emberjs。这个特别的审查AngularJS强烈影响着,随着Ionic渐渐的支持其他框架,并不保证其准确性

    MV* Pattern

    Angular JS过去被用来作为MVC框架,但是随着时间的推移,当$scope对象作为一个视图模型的情况下,就视图模型来讲它通过控制器来进行操纵,这也使得Ionic变得更接近MVVM框架。这样一个灵活的方法开发人员可以根据他们喜好来使用MVC或MVVM,只要他们的目标能被事项就行,MVVM框架将显示从从业务逻辑分离从而提高可维护性和生产力。

    类系统

    Angular JS或Ionic都不是面向对象的JavaScript框架,因此它们无法使用类系统这可能被视作该框架的弱点或强点,其仅仅取决JavaScript前端需要的简易程度

    DOM 控制

    Angular 嵌入了jqLite,jqlite是jQuery的一小部分,允许跨浏览器兼容的方式进行DOM操作。就扩展功能而言的话,jQuery可以加载文档。

    UI and Theme

    谈及到UI,Ionic显示其内在的潜力Ionic真正的美在于它的简单性。几乎所有的google风格中,它使用现有HTML5和CSS3功能提供快速的体验。速度是完全在它的简单-没有不必要的阴影,圆角,梯度,只需要扁平简洁活力,,清洁简单,强大,纯粹的HTML5。Ionic并不保证你原生外观UI,但它确实提供非常快的和一致的接口,即使在你认为HTML5应用程序渲染效果很慢

     

    通过SASS来进行定制,Ionic有方便的变量和mixin扩展定制的外观。此外,它的开源图标库有440多个图标可供选择。

    小部件

    Ionic的组件是非常简单的。他们可以根据Angular指令的原型来定制HTML元素,Ionic还提供控制器来补充配置和交互。虽然有些框架可以提供更复杂的小部件,Ionic提供了一些简单的构建块,这些构建块可以提供丰富的用户界面。alpha版本,该框架提供了大量的表单元素,页眉和页脚、按钮、一个简单的和可定制的项目列表,网格元素等等。

    响应式设计

     

    在内部,Ionic利用响应Web设计原则根据屏幕大小或像素密度产生优化的体验。任何app-specific RWD场景将受到欢迎合很好地实现。

    桌面支持

     

    用于混合移动应用程序(可安装在移动设备上通过应用程序商店),Ionic并不意味着用于桌面web应用程序/网站。虽然内容将会显示的很好,它任然需要做一些优化才能目的。那些希望创建应用程序,适合这两种环境中可以留在角JS,但是使用Zurb开发基础上,Twitter引导或类似的UI库。

    第三方插件

        当前没有第三方插件或扩展可用

     

    扩展

    多扩展性会从CSS(S)或Angular指令和控制器衍生出来。这将会使得扩展成为应用程序的一个组成部分,,不可避免,但不要求。即使开发人员Ionic的新人,Angular也不需要斗争。

    构建工具

    Gulp是用来构建Ionic  # 1 JavaScript构建工具,为你的项目目的更加具有吸引力。

    打包(原生)

    Ionic应用程序将需要外部工具用于包装。这来和PhoneGapCordova和Trigger.io一起工作

    设备APi

         Ionic不支持设备api。

    文档

    Ionic文档是合适的完成的alpha阶段框架。示例丰富,文档显示大多数的组件将在移动设备上显示一个预览。预览是很有吸引力的。

    Angular的文档会满足开发人员中的初学者,但很快就会变得不足。作为信息的欲望达到专家水平,开发人员可能会被迫诉诸源代码或其他地方。

    离子的文档是体面完整考虑的alpha阶段框架。示例丰富,大多数的文档显示预览组件将在移动设备上。预览是很有吸引力的。

    角的文档会满足初学者开发人员,但很快就会变得不足。作为信息的欲望达到专家水平,开发人员可能会被迫诉诸源代码或其他地方。

    License

    Ionic和AngularJS都在MIT许可下可用。

    Community

    因为它还处在一个生命周期的早期阶段,Ionic还没有一个成熟的社区。然而,考虑到相同的情况下,它的受欢迎程度的提升速度比许多其他框架要快

    这些人会说什么呢?

    JavaScript 开发者

    这是一种全新并且直的构建丰富的应用的方式。MVC和MVVM模式被实现·,像拉丁会说他们有机会与Angular JS一起工作。此外,使用HTML定义视图和使用js对象定义数据模型,最终开发人员很容易编写更少的代码和使用更少的时间生产高质量的应用程序。

    设计人员

    充满激情的设计师会喜欢Ionic,因为它允许他们按自己的喜好自定义布局,而不必修改别人的复杂的小部件和破坏应用的功能。定制的UI需要Zurb开发基金会或者是推特bootstrap一起工作.

    产品经理:

    开始学习AngularJS的障碍非常低,根本不需要知道整个框架就可以构建一个简单的应用程序。然而,初学者在复杂的应用程序面前,将面临着更高级的任务将会需要来应对一个越来越陡峭的学习曲线。

    请记住Ionic被用来使用混合的应用而不是手机网站。

     翻译网页:

    http://moduscreate.com/5-best-mobile-web-app-frameworks-ionic-angulalrjs/

    展开全文
  • 1.5 版本更新说明 BUI 1.5版本以后变化很大,统一新的风格,新的规范750,新增基于Dom的数据驱动,完善了单页路由页面的生命周期等等,在...后续我们还会整理一些实战类的教程,欢迎关注BUI Webapp专栏。 一...

    原文地址: https://segmentfault.com/a/1190000012994082

     

    1.5 版本更新说明

    BUI 1.5版本以后变化很大,统一新的风格,新的规范750,新增基于Dom的数据驱动,完善了单页路由页面的生命周期等等,在好用的路上越走越远,如果你也觉得好用,帮我们推荐给您身边的朋友,谢谢。后续我们还会整理一些实战类的教程,欢迎关注BUI Webapp专栏

    一、案例代表

    点击预览QQ交互效果GIF

    这是你看下去的动力, 我用BUI仿照QQ的手机截图做出来的一个demo, 包含QQ的常见交互, 侧滑边栏,TAB切换,侧滑列表,下拉刷新,下拉菜单,弹窗搜索等交互操作, 这几种操作很多UI框架都有, 但几种操作结合在一块, 不同方向之间的交互冲突, 不是那么简单的事情. 使用BUI耗时1天.

    通过这个看似简单的例子, 使用BUI快速开发出来的应用是可以上得了台面的.在没有设计稿的情况下, 我们可以仿照任何一款APP开发,并且按照APP的相同比例完美还原. 另外一个是在各种复杂的手势操作交互里面, BUI游刃有余.

    请使用手机扫码操作看看.

    QQ演示地址

    建议扫码在手机预览, PC预览不支持手势操作.

    点击PC预览Demo

    BUI控件demo

    二、前言

    今天的主角就是BUI交互框架, 又不仅仅只是框架, 这是一整套快速开发Webapp的解决方案. 请查看BUI官网, 里面有DEMO演示, 给你最直观的感受.

    如果你也跟我一样在寻找一款快速开发的Webapp框架, 相信我,你来对地方了. 欢迎加入BUI 移动开发交流群: 691560280满 
    BUI 移动开发交流群2: 4170980

    我自己从2011年开始接触移动混合app开发至今, 开发的应用也有几十个了, 这些经验可能对别人也会有所帮助. 于是我把它整理出来, 围绕着快速开发,BUI做了很多事情, 看完你就会明白, BUI的快是有意义的.

    面向的开发者

    • 混合App开发者
    • 后端开发者
    • 前端
    • 美工

    我对框架的要求

    我找过很多框架, 对框架有一些要求:

    1. 简单学习上手快;
    2. 能够轻松定制UI;
    3. 开发一次,跨平台全适配,什么安卓,IOS,微信,淘宝,支付宝,钉钉,浏览器等等;
    4. 控件要多,至少满足平常所需;
    5. 能结合第三方打包平台,打包成独立应用;
    6. 有案例或者模板可以参考;
    7. 支持物理按键后退;
    8. 支持后退刷新;
    9. 支持后退到指定页面带动画;
    10. 模块化开发;
    11. 反应速度快;

    ...

    这样的要求不过分吧? 
    但发现每个UI框架都有自己的定位, 跟我要的还不太一样, 于是我们只能自己造轮子.
    既然自己造轮子,那就要先做最适合自己的,然后才是适合别人. 这里有必要交待一下背景.

    三、背景

    早在2011年, 品高公司就开始接触移动互联网, 并有了第一个基于Cordova的混合app开发框架及打包平台--Bingotouch (那个时候除了Appcan,没有像Dcloud,APICloud等比较成熟的平台) ,为了配合Bingotouch开发框架, 我们需要有一个UI, 于是我们有了一个简单的UI, 那时只有一些简单的基础控件, 简单的适配(可以在打包自适应,但无法在浏览器预览), 页面切换传参使用原生的切换, 其它复杂点的就用第三方的插件, 下拉刷新就用iscroll, 投入到项目开发中就没去管UI了, 一晃就4年过去了, 简直就是奇迹.

    但随着混合应用的技术推广及系统的升级,手机屏幕越来越大,我们的UI存在的一些不足,我们意识到,我们的UI必须升级了. 经过4年的移动开发项目经验沉淀, 于是2015年底我们就开始着手UI的改造.

    四、移动开发的难点

    这里顺便交待一下我们的旧UI存在的问题吧.

    1.viewport问题

    旧UI采用viewport固定宽度的方式适应, 把设计稿更改成320大小, 然后我们按这个大小量取间隙,还原设计稿, 这样会导致在浏览器整个页面变大, 之前不考虑浏览器,所以问题还不大, 但随着viewport在不同手机设备的表现, 这种方式瓶颈越来越大, if else 越来越多.

    2.UI组件少

    早期的时候,基于zepto的控件还要适应移动端, 是少之又少, 所以我们经常需要上网找或者自己写控件, 这样就造成每个控件的使用方式不一, 兼容不一, 较难上手.

    3.不同平台需要多次开发

    由于页面切换是使用原生切换,这样体验较好, 但是也带来一个问题,跟框架结合过于紧密, 有些项目需求, 开发以后,客户要求在微信上线, 这样就得开发2次, 如果还要在其它平台呢? 不敢想象.

    ...

    正是因为有了这些问题, 才让我们的新BUI适应性越来越强.

    五、设计思路

    很多看完文档不太理解BUI的更多是Native模块, 这里是我们区别于其它webapp开发框架的地方, BUI的一个控件或者一个方法不止做一件事情. 我们这里主要分析一下Native模块的设计.

    前面谈到我们的页面切换传参是用的原生切换, 在安卓2.多的系统,如果使用location.href跳转会泛白,单页在不同安卓下的表现也不尽完美, 所以我们这里采用的原生, 而原生在web浏览器是不能运行的. 于是我们想采用一种兼容的方式, 像混合应用一样, 中间做一层转换, 这样就可以各取所需, 需要web时, 整体切换成web.

    Method <- web <- BUI -> Bingotouch -> Native

    1. 思路1

    BUI设计思路1

    思路解析: bui 通过 bui.isWebapp (旧版是bui.debug) 来选择是web,或者native, 所有native模块需要在 bui.ready 里面去初始化, 就这样,我们把Bingotouch 里面常用的交互, 页面跳转, 传参, 刷新, 回退, 请求, 上传, 下载 等常用的功能模块做了封装统一API, 每个native模块的方法都对应两个不同的方法, 这样在使用过程,用户不需要关注是原生还是web, 只需要知道,我在浏览器运行, 就设置 bui.isWebapp 为true, 需要打包, 就用 bui.isWebapp 为false;

    BUI设计思路2

    以上就是我们的BUI 为我们公司的Bingotouch而实现的一套UI思路, 细心的你可能会发现, Bingotouch 跟互联网上的第三方平台很像, 没错的, 但是我们出来比较早. 这点我觉得很引以为豪. 所以看下那个设计思路, 我们也是为了扩展到第三方平台预留了接口. 于是我们有了不同版本的 bui.js .

    2. 思路2

    BUI设计思路3

    场景1: 客户指定要使用第三方平台打包;

    我们的Bingotouch就派不上用场,即使我们很优秀, 但是客户不放心, 用第三方平台后面可以不依赖于某一家公司, 可以很容易找到其他开发者, 客户的担心也不无道理.

    第三方平台的出现方便了开发者,但也带来了新的难题, 一个第三方平台,会有自己的开发生态, 工具, API, UI, 开发者要学习的东西太多.

    于是我们BUI又可以派上用场了, 我们还是用我们熟悉的方式开发, 只是特殊部分原生接口,使用第三方的就可以了, 这样你只需要学习一次BUI,就能开发其它平台,使用其它平台的部分原生接口,想想是很美好的事情. 后面发现每个平台的上传,下载,文件处理等的方式都不同, 处理起来很耗费时间, 针对第三方平台我们精简了部分Native方法, 只保留了 页面加载,传参,后退,请求,刷新这些.

    这样, 客户不管指定哪个平台,都可以使用我们的UI来做开发交互, 开发人员都不用再学习新的UI, 能减少一点是一点啊.

    六、框架特点

    围绕这个想法去设计, 再分析了互联网上的一些UI的特点, 我们的框架应该是这样子的:
    介于webapp跟混合app开发之间, 大部分应用有80%以上的功能都是由UI实现的, 这样通过学习一次BUI, 你就可以游刃于不同平台之间.

    BUI成本优势

    1. 简单学习,快速上手

    在软件公司里面, 开发者占多数以及人员的流动等因素, 如果开发者愿意去学习使用, 可以解决招不到合适的前端问题. 所以学习要快,简单.

    技术选型

    我们在技术上没有依赖于vue,react等先进理念, 我们就是要简单, Dom是最基础也是最容易理解的, 所以我们基于zepto或者jquery.

    工具

    开发者习惯用什么工具,就用什么工具.习惯用什么 webpack,gulp,sass,less 完全由自己做主. 但是如果使用我们推荐的sublimetext工具, 我们有针对这个工具的一个插件, 可以快速书写,事半功倍.

    丰富的文档及入门视频

    BUI的入门文档只需要5分钟 
    BUI的控件API文档 
    BUI的规范文档
    BUI的FAQ

    2. 多终端多平台适配

    我们采用独有的规范,使用REM适配,开发出来的页面,能够在各种安卓IOS系统,webkit浏览器(淘宝,微信,QQ,钉钉),第三方打包平台(Dcloud,APICloud,APPCan等) 不同分辨率,保持一致的缩放效果. 跟web保持一致的切图习惯,只是在做单位转换的时候, 是基于540px设计稿,1rem=100px
    这是很多UI欠缺的, 给你一个设计稿,没有什么指引告诉你图要怎么切, 大部分是采用响应式自适应出来的效果, 看上去一样,实际效果是跟效果图有出入的.

    如图, 其它UI的适配的高度是固定的, 随着屏幕增高, 底部的空白会越来越多, 而BUI是整体等比缩放, 像一张大图缩放到合适的屏幕一样. 真正是一次开发,多平台适配.

    其它UI的适配:

    其它UI的适配

    BUI的适配:

    BUI的适配

    3. 丰富的交互组件

    BUI控件演示Demo

    前面我们也说过,旧UI我们需要经常找插件,找来的插件也不一定能用, 调用系统原生的交互,在安卓跟ios会有不同的表现, 为了避免这种情况, 我们把互联网上常见的插件都统一开发出来, 一致的交互, 一致的使用方式, 一致的API.

    BUI的组件还有些不太一样的地方, 我们关注控件的交互,主张相同交互由同一个控件实现. 我们的组件是内容跟结构交互分离, 一个组件可以做多件事情, 例如:

    bui.slide 是一个焦点图组件, 它除了自身支持, 横向,纵向,全屏,自动播放等功能以外, 我们稍微改变了参数, 它就变成了 tab 组件.

    **(这里不能直接上传gif交互图,我把重要的交互展示一下,想看更多交互请直接点击预览交互效果)**

    bui.slide 焦点图控件

    预览交互效果

    js:
    var uiSlide = bui.slide({
        id:"#uiSlide",
        height:200
    })
    html:
    <div id="uiSlide" class="bui-slide">
        <div class="bui-slide-main">
            <ul>
                <li>
                    <!--第1屏-->
                    <img src="" alt="">
                    <div class="bui-slide-title">图片标题</div>
                </li>
            </ul>
        </div>
        <!-- 分屏菜单 -->
        <div class="bui-slide-head">
            <ul >
                <li>1</li>
            </ul>
        </div>
    </div>

    TAB 选项卡

    TAB初始化

    js: 
    var uiSlideTab = bui.slide({
        id:"#uiSlideTab",
        menu:".bui-nav",
        children:".bui-tab-main ul",
        scroll: true
    })
    html:
    <div id="uiSlide" class="bui-tab">
        <div class="bui-tab-head">
            <ul class="bui-nav">
                <!-- 分屏菜单 active 是激活的TAB样式 -->
                <li class="bui-btn active">Tab1</li>
            </ul>
        </div>
        <div class="bui-tab-main">
            <ul>
                <li>
                    第1屏
                </li>
            </ul>
        </div>
    </div>

    仔细观察下这两个的结构及交互,变的只是父层的样式, 其它结构及操作都是一样的. 我们把TAB的结构再拆分一下, 就变成了 TAB在顶部以及在底部的效果.

    TAB在顶部
    TAB在顶部

    TAB在底部
    TAB在底部

    TAB在侧边
    TAB在侧边

    这样是方便了,但是要记住的参数很多,怎么破? 这就要谈到我们的BUI Fast插件了, 一个快速书写的 Sublimetext插件, 这个后面篇幅再介绍. 我们把比较重要的组件给大家介绍一下.

    还有什么是bui.slide能做的? 例如: 微信里面的推广,经常是整屏往上滑动, 我还用过 bui.slide 去拓展了一个简单的有动画效果的路由. 发挥你的想象前, 先仔细了解控件的特性. 后面我们有自己更简单的单页路由.

    bui.list 下拉刷新及上拉加载控件

    bui.list是基于 bui.scroll 扩展的一个加载分页及刷新的一个控件, 默认把分页都处理好了,你只需要配置一个数据请求的地址, 能返回一个数组就行了, 如果返回的字段不一样, 也是提供了字段映射的配置, 开发一个加载及下拉刷新功能的列表, 只要5分钟. 如果这个满足不了你的需求, 你可以再看 bui.scroll 及 bui.pullrefresh 这两个控件.

    bui.list

    bui.dialog 弹出层组件

    bui.dialog 弹出层插件同样是一个扩展性特别强的插件, 支持从不同方向进入, 支持关闭打开, 支持全屏等, 支持动态创建以及静态渲染,
    这两者的区别 例如,

    动态渲染
    bui.confirm, bui.alert, bui.prompt 都是基于dialog动态创建的控件, 这种方式简单,只需要传入content参数;
    静态渲染
    还有bui.select,bui.actionsheet, bui.pickerdate 等控件. select及actionsheet 的底层都是一个静态渲染的对话框, 这样有个好处就是, 对话框的内容都自由定义.

    预览交互效果GIF

    bui.select 选择控件

    选择控件,支持单选,多选, 支持弹窗或者不弹窗, 支持静态或者动态渲染.

    图片描述

    bui.actionsheet 上拉菜单控件

    上拉菜单控件, 常用于分享

    图片描述

    bui.swipe 滑动组件

    bui.swipe 也是很强大的一个控件, 解决同一个页面的各种手势操作冲突. 像 bui.sidebar ,bui.listview 都是基于bui.swipe扩展的插件.

    图片描述

    bui.sidebar 侧边栏组件

    支持左边跟右边,支持同时, 但还是建议同一个页面不要出现太多这类交互.

     

    bui.listview 侧滑列表组件

    侧滑列表控件,支持菜单在左边或者右边

    图片描述

    bui.hint 自动消失提醒组件

    消息提醒自动消失, 支持上中下等方向, 并且支持自动关闭或者手动关闭, 可以指定在某个容器内.

    图片描述

    bui.accordion 折叠组件

    折叠菜单, 显示隐藏, 支持全部显示,或者一次只能显示一个.

    图片描述

    bui.dropdown 下拉菜单组件

    下拉菜单, 常用于搜索旁边的选择, 选项不宜过多.

    图片描述
    这些都是基本的组件, BUI官网其实还有很多, 就不一一列举了.

    4. 轻松定制UI

    BUI是有规范可循的,这个在输出设计稿的时候,尤其有用. 而且BUI更多的是关注UI交互这块, 只要遵循BUI的结构规范, 里面的内容是可以自由定制的, UI也是随你怎么修改,只要ID不变, 交互就不变.

    5. 快速开发

    重头戏来了, 前面这些都只是铺垫, 只有简单的文档, 丰富的组件, 这些每个框架都有, 不能算快. 
    我们围绕着开发人员快速开发, 做了很多事情, 让你如虎添翼.

    5.1 BUIFast插件

    BUIFast 是Sublimetext的一个插件, 前面我们也说了,我们并不要求用户使用某个工具, 但如果用户使用我们推荐的工具, 那就是如虎添翼. Sublimetext是一个优秀的编辑器. 安装好BUIFast插件以后, 你可以使用BUI的快速书写.

    规则如下: 
    ui- 生成结构, bui- 生成脚本

    ui-html 生成BUI的标准引用
    ui-page 生成BUI标准结构页面

    ui-控件名 生成 控件的结构;
    bui-控件名 生成 控件的初始化; 
    两个前呼后应.

    后面我们新增了 bu-控件名-demo 直接生成示例代码. 所以前面说的, 你根本不需要去记住结构,你只需要记住有什么控件名. 比方 bui-slide-tab

    点击预览效果22

    5.2 buijs Node命令行工具

    全局安装buijs以后,每次创建如果有新版本都会从github获取, 可以在任意地方创建, 并且可以指定模板及打包平台.

    安装

    sudo npm install -g buijs

    简单创建工程包(默认webapp平台)

    buijs create demo

    指定模板 
    同一个工程可以重复新增模板, main- 开头会覆盖main 模块, page-开头是新增模块. 点击查看更多模板预览 部分模板我们还增加了常用的交互处理, 比如登录输入框的删除, 注册发送验证码的倒计时, 如果不需要可以自行删除.

    buijs create demo -t main-tab

    指定dcloud平台
    指定平台以后,创建的工程可以直接覆盖到平台新创建的应用目录, 默认bui绑定了物理后退按键的处理.

    buijs create demo -p dcloud

    点击预览效果23

    5.3 模板库

    模板库有2个,一个是配合buijs工具创建的, 但由于每次创建都会获取最新,如果太多模板,这里创建工程就会偏慢, 所以我们只把常用的模板放github上面, 我们还有一个新模板库, 那里下载下来每个都是 CSS,js,html 一起的.

    模板库

    5.4 插件库

    bui的官方组件只是一些基本的组件, 后续还会扩展.

    5.5 案例库

    除了插件,模板,官网还提供了一个案例库, 这个案例是一些通用的例子, 下载下来就能拿去开发. 
    这里比较有代表性的一个案例是仿照QQ的一个交互, 交互复杂,但开发起来我们只耗时1天.

    BUI代表案例QQ

    点击预览
    建议扫码在手机预览, PC预览不支持手势操作.

    七、设计思路改进

    1. 去平台化

    从BUI出来诞生到现在, 在品高内部已经两年了, 服务了近百个项目, 其中也暴露出来了一些问题.

    1.第三方打包平台如雨后春笋般增长, 我们的兼容何时才休?

    用户在做开发的时候,一开始选择了平台其实也不会再转换其它平台了, 虽然我们提供了这种可能, 对于用户来说, 在webapp及打包平台间切换用场会比 APICloud 平台转换到 Dcloud平台之类的场景要多得多, 所以我们目前只兼容 Bingotouch, APICloud, Dcloud 有对应的 bui.js , 其它平台暂时不考虑.

    2.由于我们基于DOM开发,入门门槛低,带来的问题是开发过程中的代码质量无法保证;
    3.每个人喜欢用的模块化不一样, 有人喜欢用requirejs, 有人喜欢用seajs, 同样的模块不能在项目之间共享;

    2. 单页路由

    在用第三方平台的原生跳转里面, 也有一定的局限性, 比方, 后退刷新, 后退多层到指定页面 等, 这些每个平台的处理都不一样, 而且有的都不允许这么处理. 我们需要更灵活的路由, 支持效果自定义, 支持后退刷新, 支持后退到指定页面, 支持物理后退 等, 这一切创建对应工程包的时候, 你就已经拥有.

    路由效果

    这里我们默认采用的是微信的切换效果, 你还可以选择其它交互, 例如 dcloud 的 cover, QQ 的slide 切换效果, 这些效果都是为了让你的应用更好的嵌入对应的平台. 这种特别在原生跟轻应用之间切换较为常用.

    预览交互效果26

    3. 模块化

    我们使用我们自己的模块化,跟路由一起配合使用, 开发的模块在项目之间的共享成为了可能, 我们还按照requirejs,seajs 的接口设置, 可以兼容之前的模块.

    4. 路由及模块化的原理

    当你打开index.html的时候,就会自动加载main模块, 模块的命名, 除了main, 其它匿名模块默认都是.html前面的路径名, 比方: main 模块有个按钮, 按钮有个链接(注意不能使用a标签)

    main模块, 路径: pages/main/main.html

    <div class="bui-btn" href="pages/sidebar/sidebar.html">跳转到sidebar</div>

    点击会自动跳转到 pages/sidebar/sidebar.html , 这时会自动加载 pages/sidebar/sidebar.js

    sidebar.js 路径: pages/sidebar/sidebar.js

    loader.define(function(require,exports,module){
        
        module.exports = {};
    })

    这样, 如果其它页面要调用sidebar的模块

    loader.require("pages/sidebar/sidebar",function(sidebar){
       //  
    })

    这是路由最简单的用法, 当然他还有很多其它定义, 具体需要自己查看API了.

    路由

    八、总结

    与其说bui是一个交互框架,我觉得我们更像是一个移动快速开发解决方案, 围绕开发过程中的效率,一点一点的进步优化, 我们也针对了常用的平台的快速创建工程包, 创建完覆盖到对应的平台应用包里面就能使用了, 是不是开发最快的webapp框架? 我希望是, 但我更希望整理的这些内容对别人有所帮助.

    BUI的目的不是要成为一个很优秀的框架, 而是可以帮助大家解决80%问题的框架.

    一个人快, 节省的只是一个项目的时间, 如果每个人都能开发更快, 节省的是N个项目的时间. 后面我们会在 segmentfault的 BUI的专栏 里,把一些常用的技巧,及使用上的FAQ整理一下, 欢迎一起理性探讨.

    展开全文
  • 点击链接
  • HTML5 webapp框架

    2019-07-07 13:48:50
    1.Sencha Touch 注:jQTouch主要用于手机上的web Kit浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、Android 等手机。...Raphael:强大的矢量图形库。...
  • webapp前端框架汇总

    千次阅读 2015-03-31 14:31:48
    sencha touch ...前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Raphaël库,推出适用于最前沿Touch Web的Sencha Touch框架,该框架是世界上第一个基于HTML5的Mobile
  • webapp框架

    2020-07-25 23:30:46
    包含登录、主界面框架、播放器Demo可直接运行。包含登录、主界面框架、播放器Demo可直接运行。包含登录、主界面框架、播放器Demo可直接运行包含登录、主界面框架、播放器Demo可直接运行
  • 前言由于自己平时做项目(自己做或者帮朋友做的移动APP,webAPP,机器学习算法类)比较多,做的东西大多没有整理成文档,现在就把之前做的项目整理成文档分享给大家,好大家以后做相关项目有个参考! 在做HTML5开发时一直在...
  • SpringBoot添加webapp目录

    万次阅读 2018-07-05 10:36:52
    一、文章简述 使用IDEA工具创建的SpringBoot项目本身是没有webapp目录的。如果我们想要添加webapp目录的话,可以手动添加。二、操作步骤1)点击IDEA右上角的Project Structure2)先点击下图中的+号,再点击Web3)...
  • IntelliJ IDEA 创建maven管理的webapp项目

    千次阅读 2018-04-08 14:38:44
    因为使用框架时基本需要使用maven管理项目,所以单独写一个搭建maven项目的流程第一步: File--&gt;New--Project第二步: 选择maven框架第三步: 输入工程id和工程名第四步: 配置maven 第五步: 确认项目名和...
  • VUE实战项目之喵喵电影

    千人学习 2019-05-13 17:27:50
    2019全新打造Web前端教程,Vue实战项目之喵喵电影,详细讲解项目演示与开发流程。
  • 基于Vue2 搭建移动端 webapp 框架

    千次阅读 2019-01-02 16:31:50
    https://blog.csdn.net/mergerly/article/details/79356277
  • springboot 添加webapp文件夹

    千次阅读 2018-12-28 19:32:25
    spring boot框架本身他没有webapp文件夹的,如果要实现前后台不分离,就需要手动创建webapp问价夹。 这是一个刚创建好的spring boot项目。接下来我们手动用idea给这个项目创建一个webapp。 这里先新建一个空的...
  • IDEA中maven项目webapp目录未被识别

    万次阅读 2016-12-31 17:12:41
    maven项目中默认的web root 目录就是main/webapp目录。如果发现你的webapp目录没有被idea识别。不要试图通过project structure强行配置。肯定是你的项目结构或者pom.xml的配置有问题导致的。 首先检查项目结构:是...
  • webapp是什么?

    千次阅读 2018-07-03 14:49:12
    Webapp网络应用程序WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能。从一个简单的帮助消费者计算汽车租借费用的网页,到为商业人员和度假者提供...webapp 框架是一种简单的与WSG...
  • 推荐下面6款常用的webapp开发框架。 有兴趣可以阅读《HTML5移动webAPP和Hybrid APP开发的优缺点分析》和2014年webAPP UI设计和前端JS特效案例集萃 第一款:Sencha Touch Sencha Touch 是世界上第一...
  • H5+CSS3移动商城实战课程

    千人学习 2019-05-20 10:11:59
    本课程是实战课程,需要了解html和html5的基础知识,掌握css和css3的知识;主要讲解移动商城的首页、商城的分类、商城的购物车、商城的会员等...
  • 页面修饰框架SiteMesh的简单使用

    万次阅读 2012-06-13 08:35:53
    SiteMesh 是一个网页布局和修饰的框架,利用它可以将网页的内容和页面结构分离,以达到页面结构共享的目的。 Sitemesh是由一个基于Web页面布局、装饰以及与现存Web应用整合的框架。它能帮助我们在由大 量页面构成...
  • 问题:使用springboot写一个微服务,将pdf以模板形式导出,pdf模板放在webapp下,在eclipse中运行没有问题;以maven打成jar包,导出pdf时,提示找不到该模板; 打开jar包,其中没有静态文件 解决思路:将该模板放在resource...
1 2 3 4 5 ... 20
收藏数 46,555
精华内容 18,622
关键字:

webapp框架