WeUI 入门教程

最新推荐文章于 2024-05-08 04:58:25 发布

外太空有云

最新推荐文章于 2024-05-08 04:58:25 发布

阅读量1.9w

点赞数 3

本文链接：https://blog.csdn.net/qq_43682661/article/details/86423126

版权

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库：http://www.weui.org.cn/?/article/1。

WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。weui 我们只需要他的样式,下面demo下载地址：http://download.csdn.net/detail/cometwo/9442635

========================================================================

使用方法，引入微信UI库即可，此次没用使用zepto.js,而是使用jquery,原理都一样看之前尽量参考一下官方源码

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">        <link rel="stylesheet" href="css/weui.min.css" />        <script type="text/javascript" src="jquery-2.1.0.min.js"></script>        <title></title>    </head>    <body>        <div class="box" style="padding: 10px;">            <h1 style="text-align: center;color: red;">Button</h1>            <a href="javascript:;" class="weui_btn weui_btn_primary">按钮1</a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮2</a>            <a href="javascript:;" class="weui_btn weui_btn_warn">确认3</a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认4</a>            <a href="javascript:;" class="weui_btn weui_btn_default">按钮5</a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮6</a>            <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮7</a>            <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮8</a>            <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮9</a>            <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮10</a>            <h1 style="text-align: center;color: red;">Cell</h1>            <div class="weui_cells_title">带说明的列表项</div>            <div class="weui_cells">                <div class="weui_cell">                    <div class="weui_cell_bd weui_cell_primary">                        <p>标题文字</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </div>            </div>            <div class="weui_cells_title">带图标、说明的列表项</div>            <hr style="color: black;opacity: 0.5;" />            <div class="weui_cells_title">带图标、说明的列表项</div>            <div class="weui_cells">                <div class="weui_cell">                    <div class="weui_cell_hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="                        alt="" style="width:20px;margin-right:5px;display:block"></div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>标题文字</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </div>                <div class="weui_cell">                    <div class="weui_cell_hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="                        alt="" style="width:20px;margin-right:5px;display:block"></div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>标题文字</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </div>            </div>            <div class="weui_cells_title">带跳转的列表项</div>            <div class="weui_cells weui_cells_access">                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">                    </div>                </a>                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">                    </div>                </a>            </div>            <div class="weui_cells_title">带说明、跳转的列表项</div>            <div class="weui_cells weui_cells_access">                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </a>                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard&

最低0.47元/天解锁文章

外太空有云

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
WeUI 入门教程

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库：http://ww
复制链接

扫一扫