专栏首页前端资源小程序界的Bootstrap WeUI微信原生视觉体验样式库

小程序界的Bootstrap WeUI微信原生视觉体验样式库

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

同时它有微信小程序专用版本,项目地址:点击访问 ,我们可以用它快速实现小程序项目的创建及开发。

WeUI的引用:

1、下载后找到目录:\weui-wxss-master\style ,将 weui.wxss 复制到您的小程序项目中。

2、在 app.wxss 或页面 wxss 导入 weui.wxss

/**app.wxss**/
@import 'weui.wxss';

3、WeUI 也提供了单个组件的样式,可以单独引用,方法同上。

4、组件的根元素是 class="page"

<view class="page"></view>

5、页面结构

<view class="page">
    <view class="page__hd">页面主体</view>
    <view class="page__hd">页面主体</view>
</view>

6、除此之外都是按照 weui- 开头后接组件名称,例如 class="weui-footer"

<view class="weui-footer">我是页脚</view>

7、子组件样式,例如 view.weui-footer 组件还有链接和版权信息。

<view class="weui-footer">
<view class="weui-footer_links">
    <navigator url="" class="weui-footer_link">前端资源网</navigator>
</view>
<view class="weui-footer_text">Copyright © W3H5</view>
</view>

8、组件的示例,在小程序中新建个项目,地址指向 \weui-wxss-master\example ,就可以随时查找自己要的组件效果了,需要的效果直接复制粘贴就可以了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于 HTML5 + Canvas 实现的 PID 可视化系统

      随着工业物联网和互联网技术的普及和发展,人工填料的方式已经逐渐被机械设备取代。工业厂商减小误操作、提升设备安全以及追求高效率等制造特点对设备的要求愈加高标准...

    HT for Web
  • <dt>

    <dt> 标签定义了定义列表中的项目(即术语部分)。<dt>与<dl>、<dd>配合使用。

    Html5知典
  • vue 手写一个时间选择器

    最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件。

    小皮咖
  • 笔记:NEC QTP 第一个实例

    JavaWindow("User Login").JavaObject("MessageLabel(st)").Check CheckPoint("Messag...

    超级大猪
  • 推荐 | 小程序开发基础知识

    小程序开发要先注册小程序账号,有了小程序账号才可以使用开发者工具。小程序是一种特殊的开发形式,里面的 API 和组件都是自己定制的,因此在普通的浏览器中不能预览...

    前端黑板报
  • Ant Design for React的DatePicker日期组件设置默认显示中文的方法

    蚂蚁金服的前端UI框架Ant Design 有专门针对 React 设计的 Ant Design for React 。今天在使用其中的 DatePicker ...

    德顺
  • 使用swiper的coverflowEffect遇到的几个问题

    需要写一个下图这样的轮播效果,使用的是 Swiper 4.3 ,在使用过程中遇到了几个问题,记录一下。

    德顺
  • 笔记:NEC QTP 第五个实例-ClassCol

        strSentence = strSentence & "set obj = New " & className '创建对象   

    超级大猪
  • 笔记:NEC QTP 第三个实例

    附带一个自编的代码生成工具,QTP的编译器实在太差了。不能识别外部类。这下妈妈再也不用担心我打错字了。。

    超级大猪

扫码关注云+社区

领取腾讯云代金券