微信网页开发样式库的使用

最新推荐文章于 2024-04-12 17:00:00 发布

热血蜗牛

最新推荐文章于 2024-04-12 17:00:00 发布

阅读量8.1k

点赞数 5

分类专栏：微信开发文章标签：微信

本文链接：https://blog.csdn.net/u010663021/article/details/72654508

版权

微信开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、WeUI 是什么

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信网页或小程序中使用 WeUI，有如下优势：
1. 同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站或小程序
2. 便捷获取快速使用，降低开发和设计成本
3. 微信设计团队精心打造，清晰明确，简洁大方

该样式库目前包含表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等内容，已经在GitHub上开源（WeUI的GitHub地址）。访问WeUI预览地址或微信扫码即可预览。

这里写图片描述

二、WeUI 怎么玩

1、获取 WeUI

WeUI 是一套与微信原生 UI 一致的 UI 库，核心文件是 weui.css，只需要获取到该文件，然后在页面中引入，即可使用 WeUI 的组件。WeUI的获取方式有好几种，我这里主要介绍比较常用和方便的其中两种方式：
方式一：引入官方 WeUI 链接
在页面中引入微信官网的weui.min.css地址即可。

微信官方核心文件 weui.css 的引用地址：https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css

例如，在head标签中加入引用：
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>

方式二：引入本地 WeUI 文件链接
在 WeUI 的 GitHub 上直接下载最新发布的版本。GitHub 提供了 zip 和 tar.gz 两种格式的包，选择其中一种下载，解压后引用 dist/style/weui.css 文件即可。

GitHub 最新版 WeUI 的下载地址是： https://github.com/weui/weui/releases

例如：在head标签中加入下载的weui.min.css的地址：<link rel="stylesheet" href="dist/style/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="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
        -->

        <!-- 方式二： 引入本地 WeUI 文件链接 -->
        <link rel="stylesheet" href="dist/style/weui.min.css"/>

    </head>
    <body>

    </body>
</html>

2、使用 WeUI

通过以上方式获取到 WeUI 后，在页面中引入后即可使用。
例如使用 WeUI 按钮：

<!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="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
        -->

        <!-- 引入本地 WeUI 文件链接 -->
        <link rel="stylesheet" href="dist/style/weui.min.css"/>

    </head>
    <body>
        <!-- 使用 WeUI 按钮 -->
        <div class="page__bd page__bd_spacing">
            <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
            <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>页面主操作 Loading</a>
            <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
            <a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
            <a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-loading"></i>页面次操作 Loading</a>
            <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
            <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
            <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告类操作 Loading</a>
            <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
        </div>
    </body>
</html>