微信官方开源UI库-WeUI
概述
WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
这有什么好处呢?其实从上面也可以看到官方的话,就是让你的应用跟微信官方版本更加统一,而没有违和感。当然,更重要的是,这样的库在某些时候可以提供你的开发效率哦。github地址:https://github.com/weui/weui
使用
方法一:
使用bower
进行安装
bower install --save weui
方法二:
使用npm
进行安装
npm install --save weui
开发
git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
gulp -ws
运行gulp -ws命令,会监听src目录下所有文件的变更,并且默认会在8080端口启动一个express服务器,然后在浏览器打开http://localhost:8080/example。
手机预览
请用微信扫码
Button
Cell
Dialog
Progress progress用于上传、下载等耗时并且需要显示进度的场景,用户可以随时中断该操作。
Toast
toast用于临时显示某些信息,并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。
Msg Page
结果页通常来说可以认为进行一系列操作步骤后,作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节(可用于确认之前的操作是否有误)等信息;若该流程用于开启或关闭某些重要功能,可在结果页增加与该功能相关的描述性内容;除此之外,结果页也可以承载一些附加价值操作,例如提供抽奖、关注公众号等功能入口。
Article 文字视图显示大段文字,这些文字通常是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式,并可响应用户的选择操作。
在微信客户端webview中使用Article,必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。
Icon
Gulp实战和原理解析(以weui作为项目实例)http://i5ting.github.io/stuq-gulp/
- 使用awk来解析dump文件 (73天)
- IntelIj IDEA运行JUnit Test OutOfMemoryError
- git pull fails “unable to resolve reference” “unable to update local ref”
- 使用dropwizard(5)--加入swagger
- 使用hint来调优sql语句(72天)
- 用R语言对城管事件数据分析
- 使用dropwizard(4)-加入测试-jacoco代码覆盖率
- goldengate学习-安装篇(71天)
- 使用dropwizard(6)-国际化-easy-i18n
- 配置不同环境下启用swagger,在生产环境关闭swagger
- 使用ControllerAdvice注意事项,Ambiguous @ExceptionHandler method mapped for [class org.springframework.web.
- rac节点无法启动ORA-29702的问题及分析(70天)
- SpringMVC,SpringBoot文件下载
- SpringCloud学习1-服务注册与发现(Eureka)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【一天一大 lee】分割等和子集 (难度:中等) - Day20201011
- 【一天一大 lee】寻找两个正序数组的中位数 (难度:困难) - Day20201003
- 【一天一大 lee】颜色分类 (难度:中等) - Day20201007
- 【一天一大 lee】树中距离之和 (难度:困难) - Day20201006
- 在Spring项目中以多线程的方式并发执行,异步处理任务。解决统计、累加类业务的例子。
- 【十分钟教会你汇编】MIPS编程入门
- 实践中如何优化MySQL(收藏)
- Framework掌握不全被面试官怼?Android字节跳动大牛的精编解析笔记带你系统学习!
- 路由策略中的IP-Prefix你了解多少?
- 路由策略——Route-policy
- 如何合理设置线程池大小
- 前端设计模式之责任链模式
- 项目实战|基础请求封装
- 一种TreeView组件分页异步加载的方法
- V8 最佳实践:从 JavaScript 变量使用姿势说起