小程序使用weui详细

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
官网是这么说的。
样式:官网高速
在这里插入图片描述

使用

下载
官方git高速:https://github.com/Tencent/weui-wxss
在这里插入图片描述
会使用git的你可以使用git去clone到本地,不会的你可以点击 Download ZIP 以压缩包形式下载到本地。

引入
在你 下载(解压) / clone 到本地后,你可能得到了一个文件夹,找到文件夹中的 dist 文件
在这里插入图片描述
进入文件找到style文件中的 weui.wxss
在这里插入图片描述
打开你的小程序,把 weui.wxss 复制到你小程序的根目录下
在这里插入图片描述
然后在app.wxss或者你想单页面使用的wxss中引入这个wxss文件

 import './weui.wxss';

使用
先在官网看清你想要使用的样式,在官网的选项中找到这个样式的名字,例如:
在这里插入图片描述
我需要在当前页面用到脚注,在weui上,脚注的样式名称为footer
在这里插入图片描述
打开dist文件中的example文件,找到对应我需要的footer文件夹,
在这里插入图片描述
在记事本打开footer.wxml,把其中的xml结构复制到小程序中,即可生效
在这里插入图片描述

(如果本文对您有帮助,不要吝啬您的点赞,如果有不对的地方,也欢迎指出)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值