WeUI 入门教程

WeUI是一个由微信官方设计的移动Web应用UI库,提供与微信原生视觉一致的样式,包括button、cell、dialog、toast等多种元素。本文介绍了WeUI的基本使用方法,通过引入样式库并结合jQuery实现交互效果,适用于微信Web开发。
摘要由CSDN通过智能技术生成

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</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_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>cell standard</p>
                    </div>
                    <div class="weui_cell_ft">说明文字</div>
                </a>
                <a class="weui_cell" href="javascript:;">
                    <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>cell standard</p>
                    </div>
                    <div class="weui_cell_ft">说明文字</div>
                </a>
            </div>

            <div class="weui_cells_title">单选列表项</div>
            <div class="weui_cells weui_cells_radio">
                <label class="weui_cell weui_check_label" for="x11">
                    <div class="weui_cel
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值