微信WeUI设计规范文件下载及使用方法

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

56c666f910366

WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

预览及说明

预览地址: http://weui.github.io/weui/

详细说明: 从微信WeUI设计规范,解读移动界面设计

视觉标准

WeUI-Sketch

下载及使用

1、微信关注“起点学院”服务号(扫描二维码立即关注);

起点学院服务号二维码

2、回复关键词“微信设计规范”至【起点学院】服务号后台即可获取下载地址。

下载后,只需要在页面中引入dist/style/weui.css或者dist/style/weui.min.css其中之一即可。 例如:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

<title>WeUI</title>

<link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>

</head>

<body>

</body>

</html>

开发

git clone https://github.com/weui/weui.git

cd weui

npm install -g gulp

npm install

npm start

运行npm start命令,会监听src目录下所有文件的变更,并且默认会在8080端口启动服务器,然后在浏览器打开http://localhost:8080/example。

第三方扩展

  • lihongxun945/jquery-weui
  • kevyu/weui-sass
  • Eric-Guo/weui-rails (Using kevyu/weui-sass)
  • n7best/react-weui
  • aidenzou/vue-weui
  • adcentury/vue-weui
  • ZTfer/weui-sketch
  • i5ting/weui-practice
  • airyland/vux

文档

WeUI 说明文档参考 Wiki

License

The MIT License( http://opensource.org/licenses/MIT ) 请自由地享受和参与开源

 

原文地址:https://github.com/weui/weui

  收藏

随意打赏

提交建议
微信扫一扫,分享给好友吧。