0
点赞
收藏
分享

微信扫一扫

微信官方开源UI库-WeUI

一只1994 2022-12-14 阅读 57

概述

  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

​​

微信官方开源UI库-WeUI_github

​​

Cell

​​

微信官方开源UI库-WeUI_gulp_02

​​

Dialog

​​

微信官方开源UI库-WeUI_github_03

​​

​​

微信官方开源UI库-WeUI_github_04

​​

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

​​

微信官方开源UI库-WeUI_微信_05

​​

Toast

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

​​

微信官方开源UI库-WeUI_微信_06

​​

​​

微信官方开源UI库-WeUI_微信_07

​​

Msg Page

​​

微信官方开源UI库-WeUI_github_08

​​

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

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

​​

微信官方开源UI库-WeUI_github_09

​​

Icon

​​

微信官方开源UI库-WeUI_gulp_10

​​

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

 



举报

相关推荐

0 条评论