澳门777娱乐官方 通讯企业 QMUI Web 是一个专注 Web UI,SASS 方法合集与内置的工作流构成

QMUI Web 是一个专注 Web UI,SASS 方法合集与内置的工作流构成



摘要今日,腾讯正式开源 QMUI Web 前端框架:一个旨在提高 UI
开发效率、快速产生项目 UI 的前端框架,来自腾讯广研 QMUI
团队。前言经过长时间的打磨迭代,QMUI Web作为腾讯广研 QMUI
团队的一个开源项目,正式发布到 Tencent Github。QMUI Web 是一个 Web UI
的解决方案,从零开始,由编码规范,到组件和工具方法的制作,再到工作流的整合,不断在迭代,也不断在优化,走过了不少的路。QMUI
Web 是一个专注 Web UI
开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的
SASS 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以很轻松地提高
Web UI
开发的效率,同时保持了项目的高可维护性与稳健。如果你需要方便地控制项目的整体样式,或者需要应对频繁的界面变动,那么
QMUI Web 框架将会是你最好的解决方案。更多详细介绍请见:《腾讯 Web UI
解决方案 QMUI Web —— 探索与沉淀》开发背景2014 年中,QMUI
团队支持的主要项目是 QQ 邮箱,Web
端的邮箱是个庞大的项目,但其并没有统一的 UI
基础库,多年的高速迭代使得项目的 UI
代码变得混乱,各个模块之间各自开发,除了在代码层面表现出混乱和不可控之外,表现层面也并没有很好地统一起来。因此,项目急需一套统一的团队编码规范以及一个
UI 基础库。恰好,这个时候 Sass 等 CSS
预处理器已经发展成熟,自动化工作流的工作模式也日趋完善,因此,我们决定基于这些技术制作一套通用于不同项目的
Web UI
框架。框架的场景定位很明确:需要控制整体样式,并且可以适应频繁迭代打磨的大型项目。所以,这套即将诞生的
Web UI
框架的特性也很明确:需要方便地控制项目的整体样式,应对频繁的界面变动,并保持项目质量稳健。此后经过三年的发展,QMUI
Web 最终发展为包含编码规范、样式工具方法与样式管理、内置工作流,配套的
GUI 桌面
App,以及拥有完整文档的解决方案。功能特性基础配置与组件:通过内置的公共组件和对应的
SASS 配置表,你只需修改简单的配置即可快速实现所需样式的组件。(QMUI SASS
配置表和公共组件如何帮忙开发者快速搭建项目基础 UI?)SASS 增强支持:QMUI
Web 包含70个 SASS
mixin/function/extend,涉及布局、外观、动画、设备适配、数值计算以及 SASS
原生能力增强等多个方面,可以大幅提升开发效率。脚手架:QMUI Web
内置的工作流拥有从初始化项目到变更文件的各种自动化处理,包含了模板引擎,雪碧图处理,图片集中管理与自动压缩,静态资源合并、压缩与变更以及冗余文件清理等功能。扩展组件:QMUI
Web
除了内置的公共组件外,还通过扩展的方式提供了常用的扩展组件,如等高左右双栏,文件上传按钮,树状选择菜单。应用案例当前,QMUI
Web框架主要用于以下腾讯公司自已的产品中:工程主页和源码地址工程主页:
Web UI 解决方案 QMUI Web —— 探索与沉淀》

前言

经过长时间的打磨迭代,QMUI Web 作为腾讯广研 QMUI
团队的一个开源项目,正式发布到 Tencent Github。QMUI Web 是一个 Web UI
的解决方案,从零开始,由编码规范,到组件和工具方法的制作,再到工作流的整合,不断在迭代,也不断在优化,走过了不少的路。

QMUI Web 是一个专注 Web UI
开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的
SASS 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以很轻松地提高
Web UI
开发的效率,同时保持了项目的高可维护性与稳健。如果你需要方便地控制项目的整体样式,或者需要应对频繁的界面变动,那么
QMUI Web 框架将会是你最好的解决方案。

更多详细介绍请见:《腾讯 Web UI 解决方案 QMUI Web ——
探索与沉淀&version=12020010&nettype=WIFI&fontScale=100&pass_ticket=rzgRY%2Fyo9mEqEI%2FJ721xjm3GOjqUdnkqfoMWH7NXVwK0bW0Brrp2gTiavjZRA4Bv)》

图片 1

QMUI Web 是一个专注 Web UI
开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的
SASS 方法合集与内置的工作流构成,另外还有搭配使用的桌面 App —— QMUI Web
Desktop。由腾讯 QMUI
团队出品。

腾讯作为互联网行业的一大巨头,一直都不吝啬将好的技术开放,与广大开发者共享,未来也将推出VR开放平台和AI技术。腾讯在全球合作伙伴大会披露了未来五年的发展思路,在技术共享方面,腾讯希望利用自己在新技术方面的积累,给开放平台带来更多技术合作和商业发展机会。

开发背景

2014 年中,QMUI 团队支持的主要项目是 QQ 邮箱,Web
端的邮箱是个庞大的项目,但其并没有统一的 UI
基础库,多年的高速迭代使得项目的 UI
代码变得混乱,各个模块之间各自开发,除了在代码层面表现出混乱和不可控之外,表现层面也并没有很好地统一起来。因此,项目急需一套统一的团队编码规范以及一个
UI 基础库。

恰好,这个时候 Sass 等 CSS
预处理器已经发展成熟,自动化工作流的工作模式也日趋完善,因此,我们决定基于这些技术制作一套通用于不同项目的
Web UI
框架。框架的场景定位很明确:需要控制整体样式,并且可以适应频繁迭代打磨的大型项目。所以,这套即将诞生的
Web UI
框架的特性也很明确:需要方便地控制项目的整体样式,应对频繁的界面变动,并保持项目质量稳健。

此后经过三年的发展,QMUI Web
最终发展为包含编码规范、样式工具方法与样式管理、内置工作流,配套的 GUI
桌面 App,以及拥有完整文档的解决方案。

webOfficialPreview.jpg

Github:
https://github.com/QMUI/qmui\_web

本文为大家整理出27款当前使用较多,口碑较好的腾讯开源软件,这些工具在一定程度上为日常办公节省了时间及人力成本,提高了工作效率。希望它们能给你和你的团队带来便利。

功能特性

基础配置与组件:

通过内置的公共组件和对应的 SASS
配置表,你只需修改简单的配置即可快速实现所需样式的组件。(QMUI SASS
配置表和公共组件如何帮忙开发者快速搭建项目基础
UI?)

SASS
增强支持:

QMUI Web 包含70个 SASS
mixin/function/extend,涉及布局、外观、动画、设备适配、数值计算以及 SASS
原生能力增强等多个方面,可以大幅提升开发效率。

脚手架:

QMUI Web
内置的工作流拥有从初始化项目到变更文件的各种自动化处理,包含了模板引擎,雪碧图处理,图片集中管理与自动压缩,静态资源合并、压缩与变更以及冗余文件清理等功能。

扩展组件:

QMUI Web
除了内置的公共组件外,还通过扩展的方式提供了常用的扩展组件,如等高左右双栏,文件上传按钮,树状选择菜单。

QMUI Web

一个旨在提高 UI 开发效率、快速产生项目 UI 的前端框架,由腾讯 QMUI
团队出品

Github:https://github.com/QMUI/qmui\_web

官网:http://qmuiteam.com/web

Quick Start document for
English

QMUI Web 是一个专注 Web UI
开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的
SASS 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以很轻松地提高
Web UI
开发的效率,同时保持了项目的高可维护性与稳健。如果你需要方便地控制项目的整体样式,或者需要应对频繁的界面变动,那么
QMUI Web 框架将会是你最好的解决方案。

官网:http://qmuiteam.com/web

1. WeUI

应用案例

当前,QMUI Web框架主要用于以下腾讯公司自已的产品中:

功能特性

本次框架更新为 QMUI Web Desktop 的更新。QMUI Web Desktop 可以管理基于
QMUI Web 进行开发的项目,通过 GUI 界面处理 QMUI Web
的服务开启/关闭,使框架的使用变得更加便捷,并提供了编译提醒,出错提醒,进程关闭提醒等额外的功能。

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI
库,是一套同微信原生视觉体验一致的基础样式库,为微信 Web
开发量身设计,可以令用户的使用感知更加统一。

工程主页和源码地址

工程主页:http://qmuiteam.com/web/page/index.html

源码托管:https://github.com/Tencent/QMUI\_Web

基础配置与组件

通过内置的公共组件和对应的 SASS
配置表,你只需修改简单的配置即可快速实现所需样式的组件。(QMUI SASS
配置表和公共组件如何帮忙开发者快速搭建项目基础
UI?)

重大更新

  • 全新界面与交互方式,包括欢迎页,主界面与设置界面的重新设计,更加简洁明快的风格,更简便的交互
  • 新的日志高亮,更清晰,更精确
  • 增加了一些优化项(界面宽高保护,删除多余文件)

图片 2

开发者指南

简明开发指南:https://github.com/Tencent/QMUI\_Web/blob/master/README.md

详细开发指南:http://qmuiteam.com/web/page/start.html

详细的介绍文章请见:《腾讯 Web UI 解决方案 QMUI Web ——
探索与沉淀&version=12020010&nettype=WIFI&fontScale=100&pass_ticket=rzgRY%2Fyo9mEqEI%2FJ721xjm3GOjqUdnkqfoMWH7NXVwK0bW0Brrp2gTiavjZRA4Bv)》

(本资讯来自即时通讯社区:http://www.52im.net/article-260-1.html)

SASS 与 Compass 支持

QMUI Web 包含70个 SASS
mixin/function/extend,涉及布局、外观、动画、设备适配、数值计算以及 SASS
原生能力增强等多个方面,可以大幅提升开发效率。

近期更新

  • 增加调试功能(菜单-帮助-开启/关闭调试工具,菜单-帮助-重置储存数据)
  • 界面支持大量项目显示

DEMO:

脚手架

QMUI Web
内置的工作流拥有从初始化项目到变更文件的各种自动化处理,包含了模板引擎,图片集中管理与自动压缩,静态资源合并、压缩与变更以及冗余文件清理等功能。

全新界面预览

图片 3

App.gif

2. PhxSQL

扩展组件

QMUI Web
除了内置的公共组件外,还通过扩展的方式提供了常用的扩展组件,如雪碧图组件,等高左右双栏,文件上传按钮,树状选择菜单。

下载

Github Release
下载

官网下载

另外 QMUI
Web 以及
Demo
也进行了一些优化更新,具体内容请参考对应的 Github Commit history。

PhxSQL是一个兼容MySQL、服务高可用、数据强一致的关系型数据库集群。PhxSQL以单Master多Slave方式部署,在集群内超过一半机器存活的情况下,可自身实现自动Master切换,且保证数据一致性。

环境配置

#安装 gulpnpm install --global gulp
#安装 SASS gem install sass
#安装 Compassgem update --systemgem install compass

为什么采用原生 SASS 和
Compass?

PhxSQL 结构:

快速开始

推荐使用 Yeoman 脚手架
generator-qmui
安装和配置 QMUI Web。该工具可以帮助你完成 QMUI Web 的所有安装和配置。

#安装 Yeoman,如果本地已安装可以忽略npm install -g yo
#安装 QMUI 的模板npm install -g generator-qmui
#在项目根目录执行以下命令yo qmui

图片 4

效果预览

图片 5

完成后生成的项目目录结构

图片 6

对于需要有更强定制性的开发者,请参考创建新项目(高级)

3. PhxPaxos

其他说明

推荐配合桌面 App:QMUI Web
Desktop。它可以管理基于
QMUI Web
进行开发的项目,并提供了编译提醒,出错提醒,进程关闭提醒等额外的功能。

图片 7

QMUI Web Desktop

PhxPaxos是腾讯公司微信后台团队自主研发的一套基于Paxos协议的多机状态拷贝类库。它以库函数的方式嵌入到开发者的代码当中,
使得一些单机状态服务可以扩展到多机器,从而获得强一致性的多副本以及自动容灾的特性。

意见反馈

如果有意见反馈或者功能建议,欢迎创建
Issue
或发送 Pull
Request,感谢你的支持和贡献。

图片 8

4. vConsole

vConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题。目前vConsole自带有2个面板,默认为“日志”面板,负责展示log。

图片 9

DEMO:

5. Frozen UI

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

图片 10

DEMO:http://frozenui.github.io

6. WeFlow

这是一个高效、强大、跨平台(macOS & Win)的前端工具,核心基于
tmt-workflow 工作流,代码开源可定制。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图