### [小程序之基础样式库--WeUI](https://www.prosaas.cn/article/17553)

**Published:** 2018-05-24T08:48:20

**Author:** 5201314

**Excerpt:** TODO：小程序集成WeUIWeUI 为微信 Web 服务量身设计。WeUI 是一套同微信原生视觉体验一致的基…

TODO：小程序集成WeUI

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

1.使用微信开发者工具添加新项目MWL

![](https://img.php.cn/upload/article/000/001/506/b464a080d825e56f46be0e8fb9a8e687-0.jpg)

2.下载WeUI的源码，把style文件拷贝到MWL根目录，与pages文件夹同一级

3.WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

![](https://img.php.cn/upload/article/000/001/506/b464a080d825e56f46be0e8fb9a8e687-1.jpg)

> WXSS 用来决定 WXML 的组件应该怎么显示。
> 
> 为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。
> 
> 与 CSS 相比我们扩展的特性有：
> 
>     尺寸单位
> 
>     样式导入

4.在app.wxss导入样式，使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

![](https://img.php.cn/upload/article/000/001/506/b464a080d825e56f46be0e8fb9a8e687-2.jpg)

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

5.WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

a)数据绑定

![](https://img.php.cn/upload/article/000/001/506/358739c505f9b8dd668c6ed9225b0697-3.jpg)

b)条件渲染

![](https://img.php.cn/upload/article/000/001/506/358739c505f9b8dd668c6ed9225b0697-4.jpg)

c)事件，关键参数是bindtap

![](https://img.php.cn/upload/article/000/001/506/620df325c00a9dd318e9ebde1a5f8b34-5.jpg)

6.组件，都包含在容器view里面，组件结合WeUI使用，构建出统一，美观都界面。

![](https://img.php.cn/upload/article/000/001/506/620df325c00a9dd318e9ebde1a5f8b34-6.jpg)

7.示例1，导航都标题是设置在\*.json里面的 navigationBarTitleText，在app.json设置的参数是全局可使用，定义在page的json是局部页面可以使用。以此类推\*.js也是有全局和局部之分。

![](https://img.php.cn/upload/article/000/001/506/620df325c00a9dd318e9ebde1a5f8b34-7.jpg)

代码：

![](https://img.php.cn/upload/article/000/001/506/2369af3447d4e0637ad4212f0fcac57f-8.jpg)

看到代码里面有使用了WeUI的样式了，到此简单的WeUI则集成成功。

【相关推荐】

1\. 微信小程序完整源码下载

2. 微信小程序游戏类demo挑选不同色块

3. 追格微信小程序应用商店源码

以上就是小程序之基础样式库--WeUI 的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---