阅读更多

0顶
0踩

移动开发

原创新闻 Touch UI:基于vue的移动端UI框架

2018-05-31 09:01 by 见习记者 uileader 评论(0) 有10454人浏览

 

Hi,我们做了一款高质量的、免费的移动端UI框架。

经过将两年多开发和项目实践,我们终于把Touch UI开放出来了。这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应用的所有细节

 

TouchUI 有何亮点?

 

我们认为,一套足够好的移动端UI框架应该满足4个要素。

 

1、丰富的组件和易用的API

 

我们在做这套UI框架时,分析了大量的主流的移动应用,从中抽象出将近100种组件。囊括了容器布局、切换、模态、表单、列表、文本、多媒体、图形图表、地图等各个方面。我们希望开发者在开发移动应用时,不必把精力花在到处找组件、处理兼容等事情上,而是能够专注于业务,真正实现组件拿来即用,像搭积木一样开发移动应用。

 

 

2、友好的移动交互

 

跟PC开发不同,移动端的UI应该具备友好的移动端交互,例如上拉下拉、手指滑屏、按下滑动等等。我们在这些方面做了充分的考虑,每个组件都是针对移动端精心打造,追求原生级别的操作体验。

 

 

3、优秀的性能

 

如何在功能丰富的基础上还能保证高性能,是我们做这套框架的一个很大挑战。为此,我们做了大量的工作来优化性能,例如按需编译、资源拆分加载等等。现在基本可以达到点击页面秒开的效果。

 

4、良好的开发体验

 

前端工程化的出现,大大提高了前端项目的开发效率并降低维护成本,但对于完全没有经验的传统前端工程师来说,各种的环境配置和依赖安装还是有不小的门槛。基于微软VSCode编辑器的插件机制,我们把前端工程化所需要的做的各种构建、编译环节全部封装起来,给开发者提供可视化右键菜单,从而简化环境配置并降低入门门槛。同时,Touch UI框架和组件也都在插件里面,这样当框架有升级时,开发者通过在线升级插件的方式就可以更新Touch UI,非常方便。

 

 

One More Thing

 

我们同时还推出了一套微信小程序UI框架:TouchUI-WX,它增加了30多种常用的组件用于官方组件的补充,并且扩充了不少功能,例如支持阿里的iconfont矢量图标库,支持less语法等。

最重要的是,你可以将Touch UI工程与TouchUI-WX工程相互进行转换。实现开发一套代码,发布H5和微信小程序两种应用。

 

官网:https://www.touchui.io

Github:https://github.com/uileader/touchui

0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    //msgTarget :'title' //显示一个浏览器原始的浮动提示信息 //msgTarget :'under' //在字段下方显示一个提示信息 //msgTarget :'side' //在字段的右边显示一个提示信息 //msgTarget :'none' //不显示提示信息...

  • ext panel添加html,Ext panel的用法

    首先是一个简单的demonew Ext.Panel({title:'panel学习',width:300,height:200,html:"panel的内容",renderTo:Ext.getBody()});效果如图: 下面是一些常用的参数://配置参数(只列举部分常用参数)1.autoLoad:有效的...

  • Ext.tree.Panel 属性 方法

    xtype: treepanelvar store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [ { text: 'detention', leaf: true }, { text: 'homework', ex...

  • Ext Panel 改变背景颜色

    var north = Ext.getCmp("welcome-north-panel").body;north .update().setStyle(background, #f0f0f0); 

  • Ext panel的属性用法

    Ext.Panel主要配置表: animCollapse Boolean 设置面板折叠展开是否显示动画,Ext.Fx可用默认true,否则false applyTo Mixed 面板定位 autoDestroy Boolean 是否自动销毁从容器中移除组件(默认true) autoHeight ...

  • 记录下如何动态更新ext中panel的title

    1:最近有个疑问对viewport...2:想在title上当用户登录的时候显示点信息啥的 3:开始通过json的方式,因为panel的配置是json的配置,发现无效,后来发现一个方法 setTitle() 搞定 4:知识就是在于积累。。记在这里吧

  • 面板Ext.Panel使用

    面板Ext.Panel使用 概要 1、Ext.Panel概述 2、面板的五大组成部分 3、面板的特点 4、面板中的内容 5、面板内容动态控制 6、API概述   1、Ext.Panel概述 面板Panel是ExtJS控件的基础,很多高级控件...

  • Ext2.2设置Panel中Title的样式

    效果图:   <html> <head> <meta http-equiv="Content-Type" content="...title>04.form</title> <link rel=

  • EXT根据数据绘制chart柱状图和饼图,动态改变坐标轴

    首先说明引用背景:需要通过柱状图或者饼图来比较多个公司在营业额、研发投入、产量、等方面的数据,由于比较的方面较多,不能够一次在图表中全部显示,如下图: 若需要比较的数据只有3到5个则可以如下实现,但是当...

  • Ext.Panel

    Ext Panel 使用过Delphi、Visual Basic或Java Swing等开发语言的读者对面板(Panel)一定非常熟悉,我们可以在面板随意地排版布局,它就像是一副骨架撑起了整个用户界面,在ExtJS中面板同样起着页面骨架的作用...

  • Ext属性详细信息

    Ext.window属性详细信息 Ext.Window扩展自Ext.Panel,其xtype值为window。 1、主要配置项 closable:是否允许关闭窗口,默认为true。  closeAction:关闭窗口的动作,包括以下两种:  close:从DOM删除窗口,...

  • Ext.NET panel控件属性

    Title:标题,这里可以自定义窗口显示的文字。 Collapsed:是否可折叠 true:折叠 false不折叠 Collapsible:是否显示折叠按钮 true:显示 false:不显示 Draggable:是否可拖曳 true:可以 false不可以 Html:设置...

  • EXT.Panel 总结

    我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化、最小化、关闭、置前、置后、动画引发目标设置、可调整大小这些功能。像什么标题栏、工具栏之类的东西在Ext.Panel早就封装好了。...

  • ext panel设置背景图片以及页面居中

    ext panel设置背景图片以及页面居中

  • 关于ext 的Ext.tab.Panel一些属性和方法

    2、写一个Ext.tab.Panel 的属性吧, Ext.tab.Panel页签组件的每个tab都是一个Ext.panel.Panel,一般情况会有多个tab同时存在,但是同一时刻只有一个处于激活状态,就是说,每一个tab底下是对应一个item的,默认情况...

  • [Ext JS6实战]动态数据绑定

    文章目录问题提出问题解决实例代码 关于Ext JS的View Model,参见: ...使用ViewModel的data属性可以绑定数据和视图的显示,类似: data : { firstName : ‘chen’, lastName : ‘oscar’ } 但是如果使用JsonSto...

  • 如何显示或者隐藏Ext.grid.Panel

    在Ext api中找到grid.Panel的hide()方法,如图所示,发现panel隐藏了,但是标题却没有隐藏, 然后找到设置标题的方法setTitle(“”),发现文字隐藏掉了,但是后面的背景没有隐藏掉,显然也是不行的 /** * ...

  • Ext.Panel 动态添加组件后,没有显示组件 。需要调用Ext.Panel 的doLayout()函数

    [code="js"] Ext.onReady(function () {  var panel = new Ext.Panel({  layout: 'table', //table 布局  layoutConfig: { columns: 4 }, //四列  title...

  • ExtJs 4.x 学习小记:Ext.TabPanel动态隐藏及显示

    Ext.TabPanel页签关闭时,Ext.TabPanel本身已经从DOM中销毁了,但是其上的子项,比如嵌入的Grid,Panel等依然存在,如果创建时为这些子项设置了id属性,那么当你再次创建Ext.TabPanel时,就会报id重复的错误,如果不...

  • ExtJS 基础解析之【Ext.Panel】

    今天我来和大家分享一下最近学习ExtJS的成果,这两天主要是对Panel组件的...var p=new Ext.Panel({  title:'My Panel',//标题  collapsible:true,//右上角的收缩按钮,设为false则不显示  renderTo:'container'

Global site tag (gtag.js) - Google Analytics