微信小程序开发之——weui-wxss的使用

概述：

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

预览：

用微信web开发者工具打开dist目录（请注意，是dist目录，不是整个项目）

Github下载地址：
https://github.com/weui/weui-wxss?from=timeline&isappinstalled=0&utm_source=tuicool&utm_medium=referral

使用：

1. 组件的wxml结构请看dist/example/下的组件
2. 样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss

使用示例：

1. 下载weui-wxss压缩包，解压。
2. 把dist/style/weui.wxss文件放到你项目的根目录（或者其他目录）。
3. 在app.wxss中添加如下代码：@import 'weui.wxss';
   注意：路径要对应上！

接下来我们以SearchBar为例，在自己的小程序里使用SearchBar样式。

1. 新建快速项目
2. 去除掉无用代码
3. 把weui.wxss文件拷贝到项目目录
4. 在app.wxss里引用样式文件 @import 'weui.wxss';
5. 新建一个searchbar文件夹，在app.jason中定义searchbar页面
6. 把weui-wxss里的 weui-wxss-master\dist\example\searchbar 文件都拷贝到你新建的项目 searchbar文件里
7. 调试、查看结果
   
   其他效果同理

demo下载地址：
http://download.csdn.net/detail/sundayaaron/9709961

如果我的文章对您有帮助，微信支付宝打赏：