2019-01-10 13:11:42 qq_26780317 阅读数 1789
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1532 人正在学习 去看看 张鹏

前言:随着前端技术的更新,Vue,React,Angular等JS类框架不断的深入使用,各种WebApp、混合App、微信H5等应用的发展,各种配套的前端UI框架应运而生。最近,通过在Github、前端社区、掘金等平台上,对当下流行的前端UI框架进行了小小的整理与记录,希望以此来找到适合公司项目改版的移动端UI框架。(PS:前端UI框架通过GitHub star数,社区热度和使用范围进行汇总。)

一、UI框架选取原则             

       ①丰富强大的组件库,能适应多种场景,并且还在不断更新中;

       ②轻量,无限制,可以结合任何主流JS框架的使用(比如:"Vue,Angular,React"),没有特别的使用限制,可以做到拿来即用;

       ③高性能的CSS3动画,低端手机上依然可以较流畅运行;

       ④标准稳定的API,基本可以保证版本的透明更新;

       ⑤详尽完善的官方文档,方便前后端协作;

       ⑥基于MIT协议发布,免费开源。

二、选取的相关UI框架详情     

       1、MUI--最接近原生APP体验的高性能前端框架

       官方地址:http://dev.dcloud.net.cn/mui/

       Star:10,605 Fork:5,588

       优点:①原生UI--追求原生UI感觉,以iOS7为基础,补充部分Android特有控件(共24个基本组件);

                  ②轻量--追求性能体验,MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K;

                  ③流畅体验--下拉刷新,mui通过双webview解决DIV的拖动流畅度问题,回弹动画使用原生动画。    

       2、BUI--快速开发WebApp

       BUI是一个开放式的UI交互框架,用于快速定制开发WebApp,微信公众号,还可以开发混合移动应用(例如:Bingotouch,Link,Cordova,DCloud,ApiCloud,Appcan),钉钉的轻应用,前海圆舟等第三方平台。专注webapp开发,组件非常详细全面,多终端适配,一次开发,多平台适配,完美还原设计稿,在微信、手机游览器,安卓,iOS保持一致的效果。

      官方地址:http://www.easybui.com/

      优点:①BUI支持两种开发方式,多页开发和单页开发基本保持一致(多页指传统的web开发,类似a标签跳转,可以跟后台语言结合;单页开发不受平台限制,保持一致交互体验);

                 ②快速融入各种平台,保持原平台的交互操作(包含11类组件可供选择);

                 ③简单的路由,丰富的切换效果;

                 ④模块化开发,按需加载;

                 ⑤开发一次,多平台适用,适合原生开发以后移植微信等其他平台;

                 ⑥兼容requirejs,seajs模块;

                 ⑦支持第三方打包,Cordova\DCloud\APICloud\AppCan\前海圆舟;

                 ⑧游览器支持:系统自带webkit游览器,魅族游览器,微信,QQ,淘宝,支付宝,钉钉,UC游览器。  

     3、HUI3.0更轻、更快、更漂亮的UI框

     HUI旨在打造最好的移动端UI框架,适用于基于H5+的移动app开发并完美兼容移动端web开发。

     官方地址:http://www.hcoder.net/hui

     优点:①更小、更快、灵活的dom操作,核心CSS文件26K、核心js文件26K,同时提供灵活的选择器及dom操作方法来完成复杂的dom操作;

                ②插件拆分更轻、更快,将较复杂且不常用的组件进行拆分,保证框架核心加载和运行速度;

               ③丰富的组件、界面库,提供了列表、图文排版、表单元素、表单验证、轮播组件、加载、刷新等很多UI库(38个组件)。

     4、WeUI

     WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含表单、基础组件、操作反馈、导航相关、搜索相关五大类。但没有可用的组件。

    官方地址:https://weui.io/

    5、jQuery WeUI--微信公众号开发的瑞士军刀

    官方地址:http://jqweui.com/

    Star:4,025 Fork:1,128

     优点:①专为微信公众账号开发而设计的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,可以极大减少前端开发时间;

                ②只提供UI组件,并不会对项目的框架和其他库有任何的限制,几乎可以在任何环境下使用;

                ③提供了总共30+个非常实用的组件:列表、表单、卡片、对话框、下拉刷新等;

                ④简洁而不简单,所有JS组件都是标准的jQuery插件。

     6、AUI--为您提供基于AUI的H5定制服务

     官方地址:http://www.auicss.com/

     AUI Mobile结合实际项目出发,站在开发者和项目的角度,重新定义AUI框架。

     优点:①组件丰富,模块化。使用容器+布局+模块的架构方式,JS组件辅助(27个组件),更自由灵活,更易扩展使用;flex弹性布局更灵活;

                ②原生体验--遵循Google Material设计规范,标准严谨的语法,更细致的处理,让APICloud开发像素级应用,完美适配各个机型;

                ③轻量级,高性能--几十K的核心CSS文件,移动设备优先,面向HTML5开发,使用CSS3来做动画交互,平滑、高效,更适合移动设备;

                ④MIT License--AUI使用MIT协议,用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售AUI及其副本;

                ⑤开源模板示例--丰富的多行业模板示例;

                ⑥定制服务--为客户提供更方便快捷的AUI模板定制服务。

       提供27个组件,其中,aui-skin.js为控制皮肤主题样式显示的插件。

     7、SUI Mobile--轻量,小巧且精美的UI库,方便迅速搭建手机H5应用

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

     Star:5,888

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

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

                 ②炫酷的iOS风格--组件都是按照iOS风格设计的,所以有很多组件都是iOS独有的炫酷设计;

                 ③功能强大的组件--实现了下拉刷新、日历、省市区选择器等功能非常强大的组件,并且他们在安卓上也是同样好的体验。

        其他特点:

        ①使用rem来定义。rem是相对于html元素的font-size的一个单位,如果html上定义了font-size:20px,则无论在任何地方都是1rem = 20px这个大小不会受到父元素的影响。统一使用rem对页面进行整体缩放,强烈建议大家对需要适应页面大小的任何元素都使用rem为单位来定义;

       ②SUI PC端中,组件换肤支持自定义下载功能(通过引用不同的CSS文件可以实现换肤功能),也可自定义皮肤。

      8、FrozenUI--简单易用,轻量快捷,为移动端服务的前端框架

      FrozenUI是一套基于移动端的UI库,轻量、精美、遵从手机QQ设计规范。

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

       Star:2,753

       优点:①适用于使用手Q规范的Web页面,而针对非手Q规范的页面,可通过修改变量定制界面主题;

                  ②可以按需选择需要的组件,也可以采用cdn和combo的方式按需加载;

                  ③使用iconfont展示图标,包含了按钮,列表,表单,提示,弹框等常用组件,新增文本,布局,1px,rem,文字截断,占位;

                  ④两端留白,两端对齐等解决方案,同时解决了移动端屏幕适配问题;

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

                  ⑥兼容android2.3+,iOS 4.0+。

       工具方法:常用的工具方法,包括1px边框、rem适配、两端留白等常用场景等解决方案。

      9、Framework7--特色的HTML框架,可以创建精美的iOS应用

      Framework7是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发iOS&Android风格的WEB APP。也可以用来作为原型开发工具,可以迅速创建一个应用的原型。

     Framework最主要的功能是可以使用HTML、CSS和JS来开发iOS应用。Framework7是完全免费开源的。

     Framework并不能兼容所有的设备。她只专注于为iOS和和Google Material设计提供最好的体验。

     如果你想开发iOS或者Android混合应用(Phonegap)或者你想开发iOS和Google Material风格的WEB APP,那么Framework7将会是你的首选。

     官方地址:http://framework7.taobao.org/

     Star:4,025 Fork:1,128

     优点:①简单易用,像写网页一样简单--使用Framework7创建iOS应用就和搭建一个网站一样简单。你只需要一个基本的HTML布局,并且把Framework7的CSS和JS文件引入即可;

                ②专注iOS--Framework7是一个针对iOS7的框架。从一开始,她就考虑到如何最方便快捷地实现iOS上各种惊艳的UI组件,以及复杂的动画和灵活的触摸交互;

                ③UI组件--可以直接使用的UI组件和工具,比如modals、popup、action、sheet、popover、list views、media list、tabs、side panels、layout grid、preloader、form elements等;

                ④杀手锏--滑动返回,Framework7的一个最大特色就是提供了的滑动返回功能,当你从屏幕左侧向右滑动的时候可以返回到上一个页面。并且,这不是一个A-B动画,她完全跟随你的手指触摸而移动,滑动返回;

                ⑤自定义--Framework的所有样式文件都被放在了一个个小的less文件中,所以你可以只选择自己需要的部分文件;

                ⑥原生滚动条--Framework7最大的特点之一就是使用了原生的滚动条。所以你的滚动条会有原生滚动条一样的加速度和回弹,没有任何bug和性能问题;

                ⑦不依赖第三方框架--Framework7不依赖任何第三方框架。所以它很轻量、高性能和灵活;

                ⑧高性能的动画--Framework7使用硬件加速的CSS动画以达到最好的性能;

                ⑨多个视图--Framework7支持多个独立的视图(view),并且你可以不用写任何的JS,只需要在链接上加一个data-view就可以控制每一个视图;

                ⑩简洁的JS API--使用Framework7不需要学习任何新的知识,她的JS接口非常简洁易用并且功能强大。比如,当你需要弹出一个alert的时候你只需要app.alert("Hello World!");

                 ⑪页面动画--Framework7最主要的一个目的就是让你的应用和iOS7本地应用有相同的外观和交互体验。并且Framework7 是唯一一个提供了1:1精确平滑的页面切换动画的框架;

                 ⑫Dom7--自定义的DOM库,Framework7不依赖任何第三方框架,包括dom操作,包括jquery。她有一个自带的高性能dom库-DOM7。并且,你不需要因为DOM7而学习任何新的知识,因为DOM7的接口和大名鼎鼎的jQuery几乎是一样的;

                 ⑬XHR+Caching+History+Preloading--这几个功能的组合可以让你的应用的路由功能变得非常强大。Framework7通过Ajax来加载新页面,并且可以通过缓存配置让页面的加载速度变得非常快。她会在一定的时间内缓存Ajax请求的结果(默认10分钟),在缓存有效期内不会发送新的请求而是直接从缓存中取出结果。

       10、NEC--更好的CSS方案

       官方地址:http://nec.netease.com/

       特色功能:①读规范,让你的代码更具有智慧和美丽的方法;

                         ②用框架,选择一份合适的HTML和CSS基础代码;

                         ③找代码,在这里找到她,或给你启发,或她就是你的;

                         ④装插件,帮助你快速有效的使用代码库。

     (1)规范:

        你是否常常碰到一下问题:你总是看不懂他写的代码,或者读起来很吃力:你需要改他的代码却无从下手,或总是要去问他这里是什么改了会不会影响其他代码;你和他一起开发一个产品,你总是怕代码和他有冲突或互相影响;你的代码在多次维护任务之后变得越来越臃肿,越来越难以维护。

       ①CSS规范--一系列规则和方法,帮助你构架并管理好样式;

       ②HTML规范--一系列建议和方法,帮助你搭建简洁严谨的结构;

       ③工程师规范--前端页面开发工程师的工作流程和团队协作规范。

     (2)框架:

        你是否为新建一个空空的html文件或css文件而烦恼?来这里,选择一份适合的基础文件,然后在她的基础上开始你的代码!

       ①css reset--重置样式,清除游览器默认样式,并配置适合设计的基础样式;

       ②css function--功能样式,从常用样式方法中抽离,按需使用;

       ③css media--媒体查询,为不同的设备和大小配置不同的样式;

       ④css animation--常见动画效果的集合,主要用于效果演示和参考,基于css3;

       ⑤html template--包含完整头部信息和主体结构的HTML模板;

       ⑥html email--用于制作邮件内容的HTML模板。

    (3)代码库:

       这里有各种常见布局、模块、技巧等代码,在这里找到她,或给你启发,或她就是你的。为满足产品对不同的平台和设备的要求,NEC代码库中的代码开发使用了三种版本:兼容、优雅、高级,以下为对这三个版本的详细说明。

      a.兼容【1】:支持包括IE6在内的所有主流游览器和设备,UI效果可能有所退化;

      b.优雅【2】:在高级游览器中有“高级”效果,在低级游览器中有“兼容”效果,是高级版的“优雅退化”,也是兼容版的“渐进增强”;

      c.高级【3】:支持IE9+、Chrome、Safari、Firefox等主流游览器,至此移动设备和所有智能系统,具有优越的UI效果。

      ①布局--提供各种常见的页面布局方法,比如定宽布局、自适应布局等;

      ②模块--提供各种常见的网页内容模块,比如导航、菜单、幻灯、图文列表等;

      ③元件--提供各种常见的网页内容元件,比如按钮、标题、输入框等;

      ④BUG--展示了游览器的BUG及其解决方案,比如IE双倍边距、3像素问题等;

      ⑤技巧--提供各种较难或特殊设计的解决技巧,比如垂直居中、自适应等;

      ⑥动画--使用CSS3实现的各种常见动画效果,比如淡入淡出、弹出等。

   (4)插件:

      帮助你快速有效的使用代码库(布局、模块、元件)。支持多种常见流行的前端开发软件:Eclipse、Vim、Sublime Text2......

      ①Eclipse插件--xml文件,通过软件自带的Snippets视图导入,可视化的代码片段插入;

      ②Eclipse插件2--xml文件,通过软件自带的模板功能导入,自动代码提示;

      ③Vim插件--snippets文件,通过结合其他插件实现,自动代码提示;

      ④Sublime插件--snippets压缩文件,通过软件自带的Snippets工具实现,自动代码提示。

     其他:

     layui经典模块化前端框架  https://www.layui.com/ 

     UIkit(YOOtheme团队)兼容IE9以上游览器  http://www.getuikit.net/docs/documentation_get-started.html

   (日期选择器较适用/Datepicker,感觉更适用于PC端)

 

2015-11-02 00:05:06 CiuPasswort 阅读数 2299
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1532 人正在学习 去看看 张鹏

开发hybridapp或者webapp少不了前端UI框架的支持,在这里推荐本人常用的几款前端框架给大家。


1.Frozen UI


出品:腾讯社交用户体验设计 - 增值UI开发团队

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


2.AUI


出品:apicloud社区-流浪男

官网:http://www.auicss.com/


3.WEUI


出品:微信

官网:http://weui.github.io/weui/


4.JingleUI


出品:shixy

官网:https://github.com/shixy/Jingle


5.AmazeUI


出品:云适配

官网:http://www.amazeui.org




暂时推荐这些,开发hybridapp或者webapp够用了,有新的框架比较好我会再补充的。



本文出自http://blog.csdn.net/ciupasswort 转载请注明出处,谢谢合作


2016-01-08 08:43:03 zhyooo123 阅读数 1471
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1532 人正在学习 去看看 张鹏
Agile Lite是一个HTML5移动前端框架,支持jQuery和Zepto双引擎,并且提供与UI无关的独立框架,内置了Flat UI样式和Ratchet样式,同时也支持单页模式和多页模式开发。对于目前比较流行的微信内置浏览器APP,Agile Lite可以轻松的使用不同模式来开发。
下面就来介绍基于Agile Lite的微信webapp的特点,了解使用Agile Lite可以适应哪些场景。


特点一:丰富的UI组件
Agile Lite设计了众多的UI组件,包括一些基本的组件,如:按钮、颜色、字体图、表单、列表、详情等页面,也对一些特殊的控件和性能效率的优化提供的组件,比如:slider滑动组件、sliderPage滑动页、下拉上拉刷新组件、懒人加载组件、滑动删除组件、动态编辑列表组件以及日历组件等。组件的设计符合移动端的操作习惯和风格,并完全遵循HTML5的规范。


特点二:无关UI的独立扩展
Agile Lite的基础UI仅仅包含一个layout的CSS样式表,再此框架内的所有具有独立UI特性的样式都可以加入到Agile Lite中,比如,我们在源码中内置的Recthet样式完全可以在Agile Lite中使用。
所以,对于开发者来说扩展自己的UI是非常方便的,不受限于现有样式


特点三:jQuery和Zepto双引擎支持
无论是jQuery还是Zepto都有各自的优劣势,给很多开发者带来了选择的困扰。Agile Lite对两者都做了很好的适配,无论使用哪种引擎都可以顺利完成Agile Lite的逻辑操作,不同页面可以使用不同的引擎。
所以,对于开发者来说,如果使用了特定引擎的第三方插件都可以很好的融合进来。


特点四:完整的控制器逻辑操作
Agile Lite的所有组件切换都是通过控制器来完成的,控制器的写法支持标签属性调用也支持JS方法触发,控制器也可以设置参数给组件调用,比如:section页面、Modal页面、tab页、滑动页等的切换,都可以很方便的使用控制器实现。而且所有控制器都是可以扩展的,对于新的控制需求可以通过对控制器的扩展做到。


特点五:完全事件驱动的架构
从Agile Lite启动,到各个组件的创建、显示、隐藏、销毁等生命周期都有相应的事件触发,所有业务逻辑均在事件内完成,并且这些事件如果与宿主容器的原生事件绑定,就可以完成跟原生程序完全一样的生命周期交互逻辑,更符合app的效果。比如微信的ready事件和close关闭页面函数都可以绑定到Agile Lite中。


特点六:单页模式和多页模式共存
Agile Lite的开发模式既支持单页模式也支持多页模式,原则上单页模式适合单窗口宿主容器(如:PhoneGap等),多页模式适合多窗口宿主容器(如ExMobi等)。但是,在微信中却很特殊,对于办公类APP一般使用单页模式,可以使页面DOM结构得到最大限度的重用,以及最方便的页面交互(无须跨页操作),而对于营销类的APP,多数页面需要被转发传播,具有相对的独立性,可以使用多页模式。


特点七:微信JS SDK无缝集成
微信本身提供了丰富的JS SDK,可以帮助开发者在应用中使用一些本地能力以及针对微信内操作的一些事件监听以实现更复杂的逻辑。
Agile Lite对微信的JS SDK实现了config的鉴权,简单配置即可实现JS SDK的无缝调用,并支持微信支付的快速实现,帮助开发者更快更灵活的使用微信的JS SDK。


最后还是要韶一韶Agile Lite的短板。Agile Lite在架构之初是为具有宿主容器的框架而设计的(比如PhoneGap、ExMobi等),所以,业务逻辑更偏向于原生APP,所以对于很多基于浏览器这类单窗口的营销页面和游戏是不适合的,因为单页模式中仅含有一个页面,也就是一个URL地址,对于页面分享和转发有一定的局限,而采用多页模式虽然可以解决此问题,但是单页模式的很多特点就丧失了。另外,Agile Lite的多页模式也更适合在ExMobi这类可以支持多窗口打开的宿主容器中,多页与多窗口匹配才能发挥更到的效应。

好了,说了这么多,该是到体验的时候了,下面奉上几个Agile Lite的示例,以供参考。

     

             Agile Lite 示例                                         EDN Lite版本(discuz论坛)




     

               商城微店类示例                                        Agile Lite微信JS SDK



官方地址:http://www.agilelite.net/index.html

2019-07-22 16:07:58 owilson 阅读数 558
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1532 人正在学习 去看看 张鹏

继上一篇一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源

大纲

在线查看大纲

1. 框架设计

框架介绍

简介

BUI 是用来快速构建界面交互的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( Link, 微信, 小程序, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台打包成独立应用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圆舟 等), 最终可以全跨平台展示.

用途

  1. 快速开发webapp应用
  2. 结合原生平台打包独立安装应用
  3. 快速开发微信公众号的应用
  4. 推广类的制作

……

特点

  1. UI设计稿还原定制能力,移动端适配机制, 跟原生DPI缩放保持一致;
  2. 快速上手,学习几乎零成本;
  3. 快速融入各种平台,保持原平台的交互操作;
  4. 简单的路由,丰富的切换效果;
  5. 模块化开发,多人协作,按需加载;
  6. 开发一次,安卓IOS适用;
  7. 兼容requirejs,seajs模块;
  8. 可以结合数据驱动
  9. 支持不同平台打包

Cordova
DCloud
APICloud
AppCan
前海圆舟

  1. 开发运行效率快

……

适合

  • 前端开发者
  • 后端开发者
  • 安卓开发者
  • IOS开发者

2. 开发方式

  1. 支持传统多页开发

    • 优点

      1. 支持php,java等后端语言
      2. 与web开发保持一致,上手简单
      3. 可以结合 loader 模块化开发
      4. 打包状态,可以使用原生路由跳转
      5. ……
  2. 支持单页路由模块化开发(推荐)

    • 优点

      1. 解决多人协作问题
      2. 解决多页开发的问题

        问题1:滑动列表到很多页,进去详情,回来以后页面回到第一页
        问题2:模块的访问只能局限于当前页,无法实现页面之间互通
        问题3:缓存问题,比方微信默认会有缓存静态文件,那你列表进去详情或者表单,处理以后想要后退刷新那是很困难的
        ……
      3. 页面之间共享,可以相互访问
      4. 页面切换动画多以及可以定制
      5. 页面切换速度快,交互效果及体验佳
      6. ……
    • 注意:

      1. 单页开发里面的事件绑定,需要使用 router.$ 替换 $选择器,这样才不会导致操作到其它页面的相同选择器。
        例如1: $("#id").on("click",function(){}) 改成 router.$("#id").on("click",function(){})

        例如2: $("#id").height(300) 改成 router.$("#id").height(300)

  3. BUI+Hybrid = Hybrid App; 以上两种开发方式都可以结合原生平台打包成独立应用。

3. 设计稿还原方式

  1. 设计稿转换成750px宽度(1.5以下版本是540px)
  2. 量取页面的元素的大小,比如 宽100px高360px 那么写成 1rem, 3.6rem,精确到小数点后2位

4. 规范

  • 目录规范
  • 页面结构规范
  • 样式规范
  • 开发规范
  • 模块化规范

5. 数据交互

  • 数据请求
  • 数据存储

6. 页面交互

特点:多页单页保持一致的API,如果某一需求无法实现,可以用最少的成本切换成另外一种开发模式

7. Dom操作能力

基于H5原生Dom操作,Zepto或jQuery,跟Web开发保持一致

8. 调试方式

  • chrome PC调试
  • 移动端调试

    注意:移动端调试必须使用 npm run dev 工程,并且配置了 app.json 才行,又或者接口自行解决跨域问题
  • debugtool 安装在手机调试

    适用于Bingotouch, Link, cordova 平台
  • 微信调试

9. 打包及原生能力

来源于打包平台或运行平台环境,需要引入对应的脚本

  • Bingotouch
  • Link
  • Dcloud
  • APICloud
  • Appcan
  • 钉钉
  • 微信

……

打包注意事项

  1. bui.isWebapp = false 时
  2. 请确保你的 bui.js 是对应的原生平台版本 bui.currentPlatform 可以查看, webapp 没有 false 状态;
  3. BUI 1.5.1 以上版本,只切换多页开发的路由为原生
  4. BUI 1.5.1 以下版本,切换多页开发的路由为原生,并且会影响数据请求,上传等切换为原生方法

10. 扩展能力

  1. 内部扩展 bui.extend
  2. 支持第三方相互配合

在线查看脑图

在线查看脑图-BUI入门指引

图片描述

2018-05-30 10:20:42 owilson 阅读数 3242
  • MUI+HTML5plus混合应用开发视频教程(微信APP实战)

    MUI+HTML5plus混合应用开发(微信APP实战)的课程主要介绍了如何使用移动端框架(mui)完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信app项目为目标,介绍MUI框架的使用,包含移动端排版布局,借助HTML5Plus来手机摄像头调用、手机相册调用、手机重力感应调用,并终完成微信案例项目。

    1532 人正在学习 去看看 张鹏

BUI 是用来快速构建界面交互的UI框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( 微信, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台打包成独立应用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圆舟 等), 最终可以全跨平台展示.

点击在线阅读


webapp学习

阅读数 613

没有更多推荐了,返回首页