找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

一斤代码系列《七》微信小程序中使用微信风格样式库-WeUI

作者:模板之家 2018-1-29 09:39 7399人关注

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

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

WeUI

WeUI的官方演示地址是:https://weui.io/
WeUI的官方GitHub地址是:https://github.com/weui

WeUI最初是为HTML5的页面设计的样式库,现在微信小程序使用的样式机制也是css风格的样式机制(不过稍稍有些不一样的地方),WeUI理所当然的推出了WXSS版本。它的GitHub地址是:https://github.com/weui/weui-wxss

我们可以直接去Github上下载它的代码,也可以通过npm来方便的获取:

npm install weui-wxss

下载下来的代码中,包含了weui的源代码以及一个基于weui的示例小程序的:

示例小程序

里面包含了丰富的使用weui的示例代码,可以很好的学习weui提供的各个样式的使用。

我们可以通过微信web开发者工具来打开这个示例代码:

示例代码

button样式

你的小程序主要是通过在你的app.wxss中导入weui.wxss来导入WeUI的样式的:

@import "style/weui.wxss";

之后,就可以在小程序的各个地方使用WeUI中定义的样式了。



路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)