当前位置:主页 > 微信开发 > WeUI >

WeUI微信内网页和小程序基础样式库简介

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-03-29
  我们在微信内看到的网页和在微信小程序里面看到的样式都是由微信官方开发出来的,当然,在微信小程序里面可以使用我们自己定义的样式,这是完全可以的,但是,微信为了为微信前端开发方便,腾讯官方为微信开发者提供了一套自己开发的基础样式库。

  如果大家学过bootstrap就知道,bootstrap是由html、css和js开发出来的前端框架,框架里面有很多已经用css或css+js封装好的组件,当我们在做前端开发时,只需要调用这些组件就可以制作出精美的网页来。

  使用bootstrap好处就是非常方便,因为,我们平时做前端开发时,需要一个一个代码的在写css或js代码,但是,有了这个bootstrap框架后,我们就可以直接调用这里面封装好的组件就行了,这相当于在盖楼房时,买来做好的水泥模块盖楼就行了,而不用再买水泥、制造沙子自己做,这样一块一块的水泥模块是由沙子、水泥、水等制作而成。

  bootstrap框架里面的组件也是由css、js制作而成,直接发拿过来用就行了。

  同样的道理,腾讯为了方便微信前端开发者快速度开发,自己封装了一套前端框架基础样式库WeUI,这些基础样式库包括:表单、基础组件、操作反馈、导航相关、搜索相关、层级关系六大类。

官方提供的组件示例  WeUI示例

使用方法:

  1)下载源码:

  下载地址:https://github.com/weui/weui

  2)上传源码到网站:把dist文件里面的css文件weui.min.css上传到网站空间里面。

  3)在网页中引入css文件:在页面中引入 weui.min.css 文件,weui.min.css是文件weui.css的压缩的文件,所以,把这个文件weui.css删除掉,当然,如果想学会具体的代码的话,请看这个文件weui.css分析css代码。

引入的weui.min.css代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>WeUI</title>
        <!-- 引入 WeUI -->
        <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
    </head>
    <body>
        <!-- 使用 -->
        <a href="javascript:;" class="weui-btn weui-btn_primary">绿色按钮</a>
    </body>
</html>

  请把weui.min.css的路径改成您自己的。

微信公众号使用的WeUI开发的界面示例: