小程序weui的使用指南

最近在开发小程序，使用到weui，在此记录一下weui的使用流程。

 

WEUI 是什么

WeUI 是一套同微信原生视觉体验一致的基础样式库。

由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

它最初是为了给在微信端页面提供一致的视觉体验而开发开源的一个样式库，

后续随着小程序、企业微信等等的开放能力出现，WeUI也提供了小程序、企业微信等等的版本。

我们将要介绍的，就是WeUI的小程序版本。

 

预览

weui的基础组件有很多，具体可以到 WEUI的官方，地址是 https://weui.io/ 进行浏览；GitHub开源代码，地址是 https://github.com/Tencent/weui-wxss/。

手机预览，扫描下面二维码：

 开发工具预览：

从GitHub上下载的文件，weui-wxss-master文件打开后有很多文件，但只需，在开发者工具中打开dist文件就OK。

 

使用weui进行开发

在项目中新建一个文件夹，将weui.wxss拷贝到文件夹中：

ps:weui.wxss文件位于项目的dist/style目录下
 

在项目中导入weui.wxss文件：

可以在app.wxss中全局引入，也可以在单页面的XXX.wxss中引入。

引入方式：@import   'thirdparty/weui.wxss';

 

参照weui提供的例子使用weui组件：

可以在example目录中，找到想要使用的组件的demo，将代码复制到自己的项目中。

 

 

大功告成啦！