专栏首页张善友的专栏微信官方开源UI库-WeUI

微信官方开源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。 

手机预览

  请用微信扫码

http://weui.github.io/weui/

Button

Cell

Dialog

Progress progress用于上传、下载等耗时并且需要显示进度的场景,用户可以随时中断该操作。

Toast

toast用于临时显示某些信息,并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。

Msg Page

结果页通常来说可以认为进行一系列操作步骤后,作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节(可用于确认之前的操作是否有误)等信息;若该流程用于开启或关闭某些重要功能,可在结果页增加与该功能相关的描述性内容;除此之外,结果页也可以承载一些附加价值操作,例如提供抽奖、关注公众号等功能入口。

Article 文字视图显示大段文字,这些文字通常是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式,并可响应用户的选择操作。

在微信客户端webview中使用Article,必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。

Icon

Gulp实战和原理解析(以weui作为项目实例)http://i5ting.github.io/stuq-gulp/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • OpenPetra 以及CentOS Mono 3.0 部署包

    OpenPetra,是一款为非盈利及其他慈善组织提供的管理软件。该软件具有很好的灵活性和可定制化,可以帮助志愿者和非盈利机构进行任务管理。OpenPetra目...

    张善友
  • WCF的Message Logging 和Tracing

    WCF提供一组綜合Logging及Tracing功能,它是利用.NET Framework中的System.Diagnostics tracing机制。WCF应...

    张善友
  • WCF服务在高负载下可能会变慢

    KB2538826 解释了WCF服务在突发的请求下会发生的问题:当您的 WCF 服务接收请求的突发时,默认.Net I/O 完成端口 (IOCP) 线程池可能不...

    张善友
  • 微信小程序 WePY 引入WeUI

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一

    hedeqiang
  • Flutter实现雨滴动画

    写了几个Flutter的demo,但是对Flutter的自定义view和动画都不太了解,看到一个类似效果在android的实现,就尝试用Flutter做一下。同...

    DSoon
  • ActiveReports 报表应用教程 (3)---图表报表

    葡萄城ActiveReports报表的图表控件支持绝大多数常用的二维和三维图表类型,包括XY图表和财务图表。通过使用图表控件的定制功能,如修改坐标轴、图注、图例...

    葡萄城控件
  • 【每日一题】问题 1245: 神奇的fans

    传说fans是一个数学天才。在他五岁那年,从一堆数字卡片中选出了4张 卡片:5,7,6,8。这4个数字有什么神秘之处呢?如果把这4张卡片自左往右的排成:5,6,...

    编程范 源代码公司
  • 通过二进制包一键部署 Kubernetes v1.15.0 集群

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    耕耘实录
  • Linux修复系统时间/Linux系统时间异常

    华创信息技术
  • 【机器学习基础】数学推导+纯Python实现机器学习算法6:感知机

    今天笔者要实现的机器学习算法是感知机(perceptron)。感知机是一种较为简单的二分类模型,但由简至繁,感知机却是神经网络和支持向量机的基础。感知机旨在学习...

    黄博的机器学习圈子

扫码关注云+社区

领取腾讯云代金券