精华内容
下载资源
问答
  • weUI 入门教程

    千次下载 热门讨论 2016-02-24 23:38:59
    weUI 入门教程:http://blog.csdn.net/libin_1/article/details/50734266
  • weui入门教程微信公众号界面,
  • WeUI 入门教程

    万次阅读 2018-10-30 17:15:26
    "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_...

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

    也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                         

    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_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">                        <input type="radio" class="weui_check" name="radio1" id="x11">                        <span class="weui_icon_checked"></span>                    </div>                </label>                <label class="weui_cell weui_check_label" for="x12">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">                        <input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">                        <span class="weui_icon_checked"></span>                    </div>                </label>            </div>            <div class="weui_cells_title">复选列表项</div>            <div class="weui_cells weui_cells_checkbox">                <label class="weui_cell weui_check_label" for="s11">                    <div class="weui_cell_hd">                        <input type="checkbox" class="weui_check" name="checkbox1" id="s11" checked="checked">                        <i class="weui_icon_checked"></i>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>standard is dealt for u.1</p>                    </div>                </label>                <label class="weui_cell weui_check_label" for="s12">                    <div class="weui_cell_hd">                        <input type="checkbox" name="checkbox1" class="weui_check" id="s12">                        <i class="weui_icon_checked"></i>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>standard is dealicient for u.2</p>                    </div>                </label>                <label class="weui_cell weui_check_label" for="s13">                    <div class="weui_cell_hd">                        <input type="checkbox" name="checkbox1" class="weui_check" id="s13">                        <i class="weui_icon_checked"></i>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>standard is dealicient for u.3</p>                    </div>                </label>                <label class="weui_cell weui_check_label" for="s14">                    <div class="weui_cell_hd">                        <input type="checkbox" name="checkbox1" class="weui_check" id="s14">                        <i class="weui_icon_checked"></i>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>standard is dealicient for u.4</p>                    </div>                </label>            </div>            <div class="weui_cells_title">开关1</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell weui_cell_switch">                    <div class="weui_cell_hd weui_cell_primary">标题文字1</div>                    <div class="weui_cell_ft">                        <input class="weui_switch" type="checkbox" />                    </div>                </div>            </div>            <div class="weui_cells_title">开关2</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell weui_cell_switch">                    <div class="weui_cell_hd weui_cell_primary">标题文字2</div>                    <div class="weui_cell_ft">                        <input class="weui_switch" type="checkbox" />                    </div>                </div>            </div>            <div class="weui_cells_title">表单</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell">                    <div class="weui_cell_hd">                        <label class="weui_label">qq</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入qq号" />                    </div>                </div>                <div class="weui_cell weui_vcode">                    <div class="weui_cell_hd">                        <label class="weui_label">验证码</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="text" placeholder="请输入验证码(验证码不一定是纯数字,此处weUI有误:type=" text ")" />                    </div>                    <div class="weui_cell_ft">                        <img src="./images/vcode.jpg" />                    </div>                </div>                <div class="weui_cell">                    <div class="weui_cell_hd">                        <label class="weui_label">银行卡</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入银行卡号" />                    </div>                </div>                <div class="weui_cell weui_vcode weui_cell_warn">                    <div class="weui_cell_hd">                        <label class="weui_label">验证码</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" placeholder="请输入验证码" />                    </div>                    <div class="weui_cell_ft">                        <i class="weui_icon_warn"></i>                        <img src="./images/vcode.jpg" />                    </div>                </div>            </div>            <div class="weui_cells_tips">底部说明文字底部说明文字</div>            <div class="weui_btn_area">                <a class="weui_btn weui_btn_primary" href="javascript:" id="showTooltips">确定</a>            </div>            <div class="weui_cells_title">上传</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell">                    <div class="weui_cell_bd weui_cell_primary">                        <div class="weui_uploader">                            <div class="weui_uploader_hd weui_cell">                                <div class="weui_cell_bd weui_cell_primary">图片上传</div>                                <div class="weui_cell_ft">0/2</div>                            </div>                            <div class="weui_uploader_bd">                                <ul class="weui_uploader_files">                                    <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>                                    <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>                                    <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>                                    <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">                                        <div class="weui_uploader_status_content">                                            <i class="weui_icon_warn"></i>                                        </div>                                    </li>                                    <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">                                        <div class="weui_uploader_status_content">50%</div>                                    </li>                                </ul>                                <div class="weui_uploader_input_wrp">                                    <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple />                                </div>                            </div>                        </div>                    </div>                </div>            </div>            <div class="weui_cells_title">文本域</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell">                    <div class="weui_cell_bd weui_cell_primary">                        <textarea class="weui_textarea" placeholder="请输入评论" rows="3"></textarea>                        <div class="weui_textarea_counter"><span>0</span>/200</div>                    </div>                </div>            </div>            <div class="weui_toptips weui_warn js_tooltips">格式不对</div>            <div class="weui_cells_title">表单报错</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell weui_cell_warn">                    <div class="weui_cell_hd">                        <label for="" class="weui_label">卡号</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号1" />                    </div>                    <div class="weui_cell_ft">                        <i class="weui_icon_warn"></i>                    </div>                </div>                <div class="weui_cells_title">没有添加weui_cell_warn类</div>                <div class="weui_cell ">                    <div class="weui_cell_hd">                        <label for="" class="weui_label">卡号</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号2" />                    </div>                    <div class="weui_cell_ft">                        <i class="weui_icon_warn"></i>                    </div>                </div>                <div class="weui_cell">                    <div class="weui_cell_hd">                        <label for="" class="weui_label">日期</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="date" value="" />                    </div>                </div>                <div class="weui_cell">                    <div class="weui_cell_hd">                        <label for="" class="weui_label">时间</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="datetime-local" value="" placeholder="" />                    </div>                </div>            </div>            <div class="weui_cells_title">选择</div>            <div class="weui_cells">                <div class="weui_cell weui_cell_select weui_select_before">                    <div class="weui_cell_hd">                        <select class="weui_select" name="select2">                            <option value="1">+86</option>                            <option value="2">+80</option>                            <option value="3">+84</option>                            <option value="4">+87</option>                            <option value="4">+你大爷</option>                        </select>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入号码" />                    </div>                </div>            </div>            <div class="weui_cells_title">选择</div>            <div class="weui_cells">                <div class="weui_cell weui_cell_select">                    <div class="weui_cell_bd weui_cell_primary">                        <select class="weui_select" name="select1">                            <option selected="" value="1">微信号</option>                            <option value="2">QQ号</option>                            <option value="3">Email</option>                        </select>                    </div>                </div>                <div class="weui_cell weui_cell_select weui_select_after">                    <div class="weui_cell_hd">                        国家/地区                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <select class="weui_select" name="select2">                            <option value="1">中国</option>                            <option value="2">美国</option>                            <option value="3">英国</option>                        </select>                    </div>                </div>            </div>            <h1 style="text-align: center;color: red;">Toast</h1>            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">点击弹出Toast</a>            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoadingToast">点击弹出Loading Toast</a>            <script>                $(function() {                    $('#showToast').click(function() {                        /**                         *1.delay函数是jquery 1.4.2新增的函数                         *2.hide函数里必须放一个0,不然延时不起作用                         */                        $('#toast').show().delay(3000).hide(0);                        //  $('#toast').fadeIn().delay(3000).fadeOut();                    });                    $('#showLoadingToast').click(function() {                        $('#loadingToast').fadeIn().delay(3000).fadeOut();                    });                })            </script>            <!--BEGIN toast-->            <div id="toast" style="display:none;">                <div class="weui_mask_transparent"></div>                <div class="weui_toast">                    <i class="weui_icon_toast"></i>                    <p class="weui_toast_content">已完成</p>                </div>            </div>            <!--end toast-->            <!-- loading toast -->            <div id="loadingToast" class="weui_loading_toast" style="display:none;">                <div class="weui_mask_transparent"></div>                <div class="weui_toast">                    <div class="weui_loading">                        <div class="weui_loading_leaf weui_loading_leaf_0"></div>                        <div class="weui_loading_leaf weui_loading_leaf_1"></div>                        <div class="weui_loading_leaf weui_loading_leaf_2"></div>                        <div class="weui_loading_leaf weui_loading_leaf_3"></div>                        <div class="weui_loading_leaf weui_loading_leaf_4"></div>                        <div class="weui_loading_leaf weui_loading_leaf_5"></div>                        <div class="weui_loading_leaf weui_loading_leaf_6"></div>                        <div class="weui_loading_leaf weui_loading_leaf_7"></div>                        <div class="weui_loading_leaf weui_loading_leaf_8"></div>                        <div class="weui_loading_leaf weui_loading_leaf_9"></div>                        <div class="weui_loading_leaf weui_loading_leaf_10"></div>                        <div class="weui_loading_leaf weui_loading_leaf_11"></div>                    </div>                    <p class="weui_toast_content">数据加载中</p>                </div>            </div>            <h1 style="text-align: center;color: red;">Dialog</h1>            <div class="bd spacing">                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showDialog1">点击弹出Dialog样式一</a>                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showDialog2">点击弹出Dialog样式二</a>            </div>            <script>                $(function() {                    $('#showDialog1').click(function() {                        $('#dialog1').show();                    });                    $('#quxioa').click(function() {                        alert('你点击了取消!!!');                        $('#dialog1').hide();                    });                    $('#ok').click(function() {                        alert('你点击了确认!!!');                    });                    $('#showDialog2').click(function() {                        $('#dialog2').show();                    });                    $('#ok1').click(function() {                        alert('你点击了确认!!!');                        $('#dialog2').hide();                    });                })            </script>            <!--BEGIN dialog1-->            <div class="weui_dialog_confirm" id="dialog1" style="display: none;">                <div class="weui_mask"></div>                <div class="weui_dialog">                    <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>                    <div class="weui_dialog_bd">自定义弹窗内容,居左对齐显示,告知需要确认的信息等</div>                    <div class="weui_dialog_ft">                        <a id="quxioa" href="javascript:;" class="weui_btn_dialog default">取消</a>                        <a id="ok" href="javascript:;" class="weui_btn_dialog primary">确定</a>                    </div>                </div>            </div>            <!--END dialog1-->            <!--BEGIN dialog2-->            <div class="weui_dialog_alert" id="dialog2" style="display: none;">                <div class="weui_mask"></div>                <div class="weui_dialog">                    <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>                    <div class="weui_dialog_bd">弹窗内容,告知当前页面信息等</div>                    <div class="weui_dialog_ft">                        <a id="ok1" href="javascript:;" class="weui_btn_dialog primary">确定</a>                    </div>                </div>            </div>            <h1 style="text-align: center;color: red;">Progress</h1>            <div class="weui_progress">                <div class="weui_progress_bar">                    <div id="prs" class="weui_progress_inner_bar js_progress" style="width: 0%;"></div>                </div>                <a href="javascript:;" class="weui_progress_opr">                    <i class="weui_icon_cancel"></i>                </a>            </div>            <br>            <div class="weui_progress">                <div class="weui_progress_bar">                    <div class="weui_progress_inner_bar js_progress" style="width: 50%;"></div>                </div>                <a href="javascript:;" class="weui_progress_opr">                    <i class="weui_icon_cancel"></i>                </a>            </div>            <br>            <div class="weui_progress">                <div class="weui_progress_bar">                    <div class="weui_progress_inner_bar js_progress" style="width: 80%;"></div>                </div>                <a href="javascript:;" class="weui_progress_opr">                    <i class="weui_icon_cancel"></i>                </a>            </div>            <div class="weui_btn_area">                <a href="javascript:;" class="weui_btn weui_btn_primary" id="btnStartProgress">上传</a>            </div>            <script>                $(function() {                    $('#btnStartProgress').click(function() {                        $('#prs').animate({                            width: "100%"                        }, 2000, function() {                            $(this).css('width', '0');                        });                    })                })            </script>            <h1 style="text-align: center;color: red;">Message</h1>            <div class="weui_msg" style="border: 1px solid red;">                <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>                <div class="weui_text_area">                    <h2 class="weui_msg_title">操作成功</h2>                    <p class="weui_msg_desc">内容详情,可根据实际需要安排</p>                </div>                <div class="weui_opr_area">                    <p class="weui_btn_area">                        <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>                        <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>                    </p>                </div>                <div class="weui_extra_area">                    <a href="">查看详情</a>                </div>            </div>            <h1 style="text-align: center;color: red;">Article</h1>            <article class="weui_article" style="border: 1px solid red;">                <h1>大标题</h1>                <section>                    <h2 class="title">章标题</h2>                    <section>                        <h3>1.1 节标题</h3>                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute</p>                    </section>                    <section>                        <h3>1.2 节标题</h3>                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in                            culpa qui officia deserunt mollit anim id est laborum.</p>                    </section>                </section>            </article>            ActionSheet扩展实例:            <input type="text" id="showActionSheet1" />            <script>                $(function() {                    $('#showActionSheet1').click(function() {                        var mask = $('#mask');                        var weuiActionsheet = $('#weui_actionsheet');                        weuiActionsheet.addClass('weui_actionsheet_toggle');                        mask.show().addClass('weui_fade_toggle').click(function() {                            hideActionSheet(weuiActionsheet, mask);                        });                        $('#actionsheet_cancel').click(function() {                            hideActionSheet(weuiActionsheet, mask);                        });                        weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');                        function hideActionSheet(weuiActionsheet, mask) {                            weuiActionsheet.removeClass('weui_actionsheet_toggle');                            mask.removeClass('weui_fade_toggle');                            weuiActionsheet.on('transitionend', function() {                                mask.hide();                            }).on('webkitTransitionEnd',                                function() {                                    mask.hide();                                })                        }                    });                    $('.weui_actionsheet_menu .weui_actionsheet_cell').click(function() {                        //看下面的js                        //                      alert($(this).text());                        //                      $('#showActionSheet1').val($(this).text());                        //                      $('#actionsheet_cancel').click();                    })                });            </script>            <h1 style="text-align: center;color: red;">ActionSheet</h1>            <div class="bd spacing">                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheet</a>            </div>            <!--BEGIN actionSheet-->            <div id="actionSheet_wrap">                <div class="weui_mask_transition" id="mask"></div>                <div class="weui_actionsheet" id="weui_actionsheet">                    <div class="weui_actionsheet_menu">                        <div class="weui_actionsheet_cell">示例菜单1</div>                        <div class="weui_actionsheet_cell">示例菜单2</div>                        <div class="weui_actionsheet_cell">示例菜单3</div>                        <div class="weui_actionsheet_cell">示例菜单4</div>                    </div>                    <div class="weui_actionsheet_action">                        <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>                    </div>                </div>            </div>            <script>                $(function() {                    $('#showActionSheet').click(function() {                        var mask = $('#mask');                        var weuiActionsheet = $('#weui_actionsheet');                        weuiActionsheet.addClass('weui_actionsheet_toggle');                        mask.show().addClass('weui_fade_toggle').click(function() {                            hideActionSheet(weuiActionsheet, mask);                        });                        $('#actionsheet_cancel').click(function() {                            hideActionSheet(weuiActionsheet, mask);                        });                        weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');                        function hideActionSheet(weuiActionsheet, mask) {                            weuiActionsheet.removeClass('weui_actionsheet_toggle');                            mask.removeClass('weui_fade_toggle');                            weuiActionsheet.on('transitionend', function() {                                mask.hide();                            }).on('webkitTransitionEnd',                                function() {                                    mask.hide();                                })                        }                    });                    $('.weui_actionsheet_menu .weui_actionsheet_cell').click(function() {                        alert($(this).text());                        $('#showActionSheet1').val($(this).text());                        $('#actionsheet_cancel').click();                    })                });            </script>            <h1 style="text-align: center;color: red;">Icons</h1>            <i class="weui_icon_msg weui_icon_success"></i>            <i class="weui_icon_msg weui_icon_info"></i>            <i class="weui_icon_msg weui_icon_warn"></i>            <i class="weui_icon_msg weui_icon_waiting"></i>            <i class="weui_icon_safe weui_icon_safe_success"></i>            <i class="weui_icon_safe weui_icon_safe_warn"></i>            <div class="icon_sp_area">                <i class="weui_icon_success"></i>                <i class="weui_icon_success_circle"></i>                <i class="weui_icon_success_no_circle"></i>                <i class="weui_icon_info"></i>                <i class="weui_icon_waiting"></i>                <i class="weui_icon_waiting_circle"></i>                <i class="weui_icon_circle"></i>                <i class="weui_icon_warn"></i>                <i class="weui_icon_download"></i>                <i class="weui_icon_info_circle"></i>                <i class="weui_icon_cancel"></i>                <i class="weui_icon_search"></i>                <i class="weui_icon_clear"></i>            </div>        </div>    </body></html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
    • 514
    • 515
    • 516
    • 517
    • 518
    • 519
    • 520
    • 521
    • 522
    • 523
    • 524
    • 525
    • 526
    • 527
    • 528
    • 529
    • 530
    • 531
    • 532
    • 533
    • 534
    • 535
    • 536
    • 537
    • 538
    • 539
    • 540
    • 541
    • 542
    • 543
    • 544
    • 545
    • 546
    • 547
    • 548
    • 549
    • 550
    • 551
    • 552
    • 553
    • 554
    • 555
    • 556
    • 557
    • 558
    • 559
    • 560
    • 561
    • 562
    • 563
    • 564
    • 565
    • 566
    • 567
    • 568
    • 569
    • 570
    • 571
    • 572
    • 573
    • 574
    • 575
    • 576
    • 577
    • 578
    • 579
    • 580
    • 581
    • 582
    • 583
    • 584
    • 585
    • 586
    • 587
    • 588
    • 589
    • 590
    • 591
    • 592
    • 593
    • 594
    • 595
    • 596
    • 597
    • 598
    • 599
    • 600
    • 601
    • 602
    • 603
    • 604
    • 605
    • 606
    • 607
    • 608
    • 609
    • 610
    • 611
    • 612
    • 613
    • 614
    • 615
    • 616
    • 617
    • 618
    • 619
    • 620
    • 621
    • 622
    • 623
    • 624
    • 625
    • 626
    • 627
    • 628
    • 629
    • 630
    • 631
    • 632
    • 633
    • 634
    • 635
    • 636
    • 637
    • 638
    • 639
    • 640
    • 641
    • 642
    • 643
    • 644
    • 645
    • 646
    • 647
    • 648
    • 649
    • 650
    • 651
    • 652
    • 653
    上面源码分析:Button按钮可以使用a或者button标签。wap上要触发按钮的active态,必须触发ontouchstart事件,可以在body上加上ontouchstart=”“全局触发。按钮常见的操作场景:确定、取消、警示,分别对应class:weui_btn_primary、weui_btn_default、weui_btn_warn,每种场景都有自己的置灰态weui_btn_disabled,除此外还有一种镂空按钮weui_btn_plain_xxx,客户端webview里的按钮尺寸有两类,默认宽度100%,小型按钮宽度自适应,两边边框与文本间距0.75em:WEUI-2.png按钮按钮确认确认按钮按钮
        按钮    按钮    按钮    按钮

    Cell

    Cell,列表视图,用于将信息以列表的结构显示在页面上,是wap上最常用的内容结构。Cell由多个section组成,每个section包括section headerweui_cells_title以及cellsweui_cells。

    cell由thumnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分组成,cell采用自适应布局,在需要自适应的部分加上classweui_cell_primary即可:
    WEUI-3.png

    带说明的列表项

    带说明的列表项
       
           
               

    标题文字

           
           
                说明文字       
       

    Cell可根据需要进行各种自定义扩展,包括辅助说明、跳转、单选、复选等。下面以带图标、说明、跳转的列表项,其他情况可以直接参考example下的代码:

    带图标、说明、跳转的列表项
               
                icon       
           
               

    cell standard

           
           
                说明文字       
                   
                icon       
           
               

    cell standard

           
           
                说明文字       
       

    Dialog

    若系统的alert窗体无法满足网页的临时视图内容需求,则可以自定义实现与alert形式相似的dialog,并且在dialog中可以自定义地使用各种控件,来满足需求。
    WEUI-4.png

       
       
           
    弹窗标题
           
    自定义弹窗内容
           
                取消            确定       
       

    WEUI-5.png

       
       
           
    弹窗标题
           
    弹窗内容,告知当前页面信息等
           
                确定       
       

    Toast

    toast用于临时显示某些信息,并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。
    WEUI-6.png

    WEUI-7.png

    div id=”toast” style=”display: none;”>
       


       

           
           

    已完成


       

       
       
           
                           
               
               
               
               
               
               
               
               
               
               
               
           
           

    数据加载中

       

    Msg Page

    结果页通常来说可以认为进行一系列操作步骤后,作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节(可用于确认 之前的操作是否有误)等信息;若该流程用于开启或关闭某些重要功能,可在结果页增加与该功能相关的描述性内容;除此之外,结果页也可以承载一些附加价值操 作,例如提供抽奖、关注公众号等功能入口。
    WEUI-8.png

       
       
           

    操作成功

           

    内容详情,可根据实际需要安排

       
       
           

                确定            取消       

       
       
            查看详情   

    Article

    文字视图显示大段文字,这些文字通常是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式,并可响应用户的选择操作。

    在微信客户端webview中使用Article,必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。
    WEUI-9.png


       

    大标题


       

           

    章标题


           

               

    1.1 节标题


               

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute


           

           

               

    1.2 节标题


               

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


           

       

    Icon
    WEUI-10.png






                                       

    WEUI-10.png

               

    给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

    这里写图片描述
    展开全文
  • 微信WeUI入门

    2018-08-27 09:15:00
    为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的...

    为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。

    该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源

    开发者只需三步,就能在自己的网页上轻松实现按钮、浮层提示等功能:
    1. 根据文档说明,下载 WeUI 库。
    2. 在页面中引入 weui.min.css 文件。
    3. 从官方 demo 中拷贝需要的功能组件代码到自己页面即可。

    Demo 体验地址:WeUI演示

    详情请点击:开发者文档

    项目地址 https://github.com/weui/weui

     

    摘自:https://www.vxzsk.com/50.html

    转载于:https://www.cnblogs.com/1906859953Lucas/p/9540317.html

    展开全文
  • weUI 入门教程:http://blog.csdn.net/libin_1/article/details/50734266
  • WeUI入门知识点

    千次阅读 2017-08-09 08:14:54
    WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar). Demo页面: https://weui.io Github页面: ...

    WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar).

    Demo页面: https://weui.io

    Github页面: https://github.com/weui/weui

    下面讲一讲我从WeUI中学到的CSS技巧.

    Button

    从这里我开始注意到, WeUI的实现中, 很多边框都是用:before:after绘制的.

    .weui_btn:after {
        content: " ";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        border-radius: 10px;
    }

    这么做是为了在Retina屏(视网膜屏)上确保1px真的是1pixel. 详见Retina屏的移动设备如何实现真正1px的线?

    Cell

    weui_cell

    .weui_cell {
        padding: 10px 15px;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    看到这里发现WeUI大量使用了flex布局方式. 对这个布局方式我整理了另一篇文章, 见这里.

    Cell (列表项)

    列表项

    之前一直比较困惑如何实现列表项之间的, 左边有些空缺的边框. border属性又不支持只显示一条边上的一部分, 难道要插入<hr>?

    WeUI的实现方式是: 利用.weui_cells:before.

    .weui_cell:before {
        content: " ";
        position: absolute;
        left: 15px;
        top: 0;
        width: 100%;
        height: 1px;
        border-top: 1px solid #D9D9D9;
        color: #D9D9D9;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }

    left: 15px(左边的空缺)配合上.weui_cells_titleoverflow: hidden(隐藏右边超出的部分)就可以显示有空缺的边框了.

    列表项末尾的右箭头的实现方式竟然是weui_cell_ft::after的旋转了45度的border. 我本以为会用iconfont.

    .weui_cells_access .weui_cell_ft:after {
        content: " ";
        display: inline-block;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        height: 6px;
        width: 6px;
        border-width: 2px 2px 0 0;
        border-color: #C8C8CD;
        border-style: solid;
        position: relative;
        top: -2px;
        top: -1px;
        margin-left: .3em;
    }

    Radio (单选列表项)

    单选列表项

    在每个行内部嵌入了一个隐藏的

    <input type="radio" class="weui_check" name="radio1">

    隐藏的方式是:

    .weui_check {
        position: absolute;
        left: -9999em;
    }

    在每个input.weui_check的后面放置了一个用于显示对勾的spaninput.weui_check.weui_icon_checked是兄弟关系.

    <span class="weui_icon_checked"></span>
    .weui_cells_radio .weui_check:checked + .weui_icon_checked:before {
        display: block;
        content: '\EA08';
        color: #09BB07;
        font-size: 16px;
    }

    Checkbox (复选列表项)

    复选列表项

    复选框如上面的单选框一样被隐藏了.

    <input type="checkbox" class="weui_check" name="checkbox1">

    比较出乎我意料的是选中和未被选中的效果都是用iconfont实现的. 本以为未被选中的效果是用border实现, 选中效果用一个check的iconfont配合水平竖直居中定位.

    /* 选中效果 */
    .weui_cells_checkbox .weui_check:checked + .weui_icon_checked:before {
        content: '\EA06';
        color: #09BB07;
    }
    
    /* 未选中效果 */
    .weui_cells_checkbox .weui_icon_checked:before {
        content: '\EA01';
        color: #C9C9C9;
        font-size: 23px;
        display: block;
    }

    Switch (开关)

    开关

    <input class="weui_switch" type="checkbox">

    之前觉得这个效果很难做啊, 看了weui的实现竟然只用css就行了!

    .weui_switch {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      position: relative;
      width: 52px;
      height: 32px;
      border: 1px solid #DFDFDF;
      outline: 0;
      border-radius: 16px;
      box-sizing: border-box;
      background: #DFDFDF;
    }
    
    .weui_switch:checked {
      border-color: #04BE02;
      background-color: #04BE02;
    }
    
    .weui_switch:before {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 30px;
      border-radius: 15px;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      border-bottom-left-radius: 15px;
      background-color: #FDFDFD;
      -webkit-transition: -webkit-transform .3s;
      transition: -webkit-transform .3s;
      transition: transform .3s;
      transition: transform .3s, -webkit-transform .3s;
    }
    
    .weui_switch:checked:before {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    
    .weui_switch:after {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      border-radius: 15px;
      background-color: #FFFFFF;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      -webkit-transition: -webkit-transform .3s;
      transition: -webkit-transform .3s;
      transition: transform .3s;
      transition: transform .3s, -webkit-transform .3s;
    }
    
    .weui_switch:checked:after {
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
    }

    其中, .weui_switch提供了边框, 未选中时背景色#DFDFDF(深灰), 选中时#04BE02(绿色).

    .weui_switch:before提供了边框内部的浅灰色#FDFDFD. 被选中时scale(0)缩小消失.

    .weui_switch:after提供了圆形按键. 被选中时向右边移动20px.

    效果如下:

    Form (表单)

    表单

    <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入qq号">

    inputpattern="[0-9]*限制了输入只能是0-9的数字(pattern的值是正则表达式).

    input[type="number"]在Chrome上默认会在最右边显示上下箭头. WeUI通过下面的代码禁用了箭头, 这段代码在Chrome的Dev Tool里面是看不到的, 只能从CSS里面看, 害我找了半天.

    .weui_input::-webkit-outer-spin-button,
    .weui_input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    相关: 如何隐藏数字输入框的上下箭头?

    点选input[type="number"]在iOS上会自动打开数字键盘.

    Upload (上传)

    上传

    WeUI用下面这个简单的方法实现了图片前面的灰层. absolute定位加上top:0; right:0; bottom:0; left:0;就会让元素被抻开到父元素的边界.

    .weui_uploader_status:before {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    图片上传状态用了一个经典的(水平+垂直)居中方式, 利用top: 50%(让元素的上边界定位到父元素的50%位置)和transform: translateY(-50%)(让元素往上移动元素自身高度的50%).

    .weui_uploader_status .weui_uploader_status_content {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: #FFFFFF;
    }

    我平时常用的垂直居中方式如下. 水平居中类似.

    .vertical-center {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

    最后的上传按钮:

    <div class="weui_uploader_input_wrp">
        <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="">
    </div>

    input[type="file"]在iOS上会自动触发选择"拍照"还是"照片"的菜单.

    方框是用.weui_uploader_input_wrp画出来的, 而加号是用.weui_uploader_input_wrp:before:after.

    真正的input利用opacity:0隐藏起来了.

    .weui_uploader_input_wrp:before {
        width: 2px;
        height: 39.5px;
    }
    .weui_uploader_input_wrp:after {
        width: 39.5px;
        height: 2px;
    }
    .weui_uploader_input_wrp:before,
    .weui_uploader_input_wrp:after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #D9D9D9;
    }
    .weui_uploader_input {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    Form Error (表单报错)

    表单报错

    <input class="weui_input" type="date" value="">
    <input class="weui_input" type="datetime-local" value="" placeholder="">

    在iOS上, 点选input[type="date"]会出现"年-月-日"的选择框, 点选input[type="datetime-local"]会出现"月-日-上午/下午-时-分"的选择框.

    Select (选择)

    选择

    电话号码+86位置的右箭头和分割线是用:before:after绘制的.

    Toast

    Toast

    <div id="toast" style="display:none">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <i class="weui_icon_toast"></i>
            <p class="weui_toast_content">已完成</p>
        </div>
    </div>

    .weui_mask_transparent就是一个position:fixed占满全屏的透明幕布, 让用户无法操作界面.

    .weui_toast才是页面中间的黑块.

    Toast Loading

    竟然是纯用HTML+CSS(animation+transition)实现的.

    <div id="loadingToast" class="weui_loading_toast" style="/* display: none; */">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <div class="weui_loading">
                <div class="weui_loading_leaf weui_loading_leaf_0"></div>
                <div class="weui_loading_leaf weui_loading_leaf_1"></div>
                <div class="weui_loading_leaf weui_loading_leaf_2"></div>
                <div class="weui_loading_leaf weui_loading_leaf_3"></div>
                <div class="weui_loading_leaf weui_loading_leaf_4"></div>
                <div class="weui_loading_leaf weui_loading_leaf_5"></div>
                <div class="weui_loading_leaf weui_loading_leaf_6"></div>
                <div class="weui_loading_leaf weui_loading_leaf_7"></div>
                <div class="weui_loading_leaf weui_loading_leaf_8"></div>
                <div class="weui_loading_leaf weui_loading_leaf_9"></div>
                <div class="weui_loading_leaf weui_loading_leaf_10"></div>
                <div class="weui_loading_leaf weui_loading_leaf_11"></div>
            </div>
            <p class="weui_toast_content">数据加载中</p>
        </div>
    </div>
    .weui_loading_leaf {
      position: absolute;
      top: -1px;
      opacity: 0.25;
    }
    .weui_loading_leaf:before {
      content: " ";
      position: absolute;
      width: 8.14px;
      height: 3.08px;
      background: #d1d1d5;
      box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
      border-radius: 1px;
      -webkit-transform-origin: left 50% 0px;
              transform-origin: left 50% 0px;
    }
    .weui_loading_leaf_0 {
      -webkit-animation: opacity-60-25-0-12 1.25s linear infinite;
              animation: opacity-60-25-0-12 1.25s linear infinite;
    }
    .weui_loading_leaf_0:before {
      -webkit-transform: rotate(0deg) translate(7.92px, 0px);
              transform: rotate(0deg) translate(7.92px, 0px);
    }
    /* ... */
    .weui_loading_leaf_11 {
      -webkit-animation: opacity-60-25-11-12 1.25s linear infinite;
              animation: opacity-60-25-11-12 1.25s linear infinite;
    }
    .weui_loading_leaf_11:before {
      -webkit-transform: rotate(330deg) translate(7.92px, 0px);
              transform: rotate(330deg) translate(7.92px, 0px);
    }
    @-webkit-keyframes opacity-60-25-0-12 {
      0% {
        opacity: 0.25;
      }
      0.01% {
        opacity: 0.25;
      }
      0.02% {
        opacity: 1;
      }
      60.01% {
        opacity: 0.25;
      }
      100% {
        opacity: 0.25;
      }
    }
    /* ... */
    @-webkit-keyframes opacity-60-25-11-12 {
      0% {
        opacity: 0.895958333333333;
      }
      91.6767% {
        opacity: 0.25;
      }
      91.6867% {
        opacity: 1;
      }
      51.6767% {
        opacity: 0.25;
      }
      100% {
        opacity: 0.895958333333333;
      }
    }

    4. Dialog

    Dialog

    <div class="weui_dialog_confirm" id="dialog1">
        <div class="weui_mask"></div>
        <div class="weui_dialog">
            <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
            <div class="weui_dialog_bd">自定义弹窗内容,居左对齐显示,告知需要确认的信息等</div>
            <div class="weui_dialog_ft">
                <a href="javascript:;" class="weui_btn_dialog default">取消</a>
                <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
            </div>
        </div>
    </div>

    你能看到的边框都是用:after实现的.

    5. Progress

    Dialog

    略. ( *・ω・)✄╰ひ╯

    6. Msg

    Msg

    略. ( *・ω・)✄╰ひ╯

    7. Article

    Article

    略. ( *・ω・)✄╰ひ╯

    8. ActionSheet

    ActionSheet

    <div id="actionSheet_wrap">
        <div class="weui_mask_transition" id="mask" style="display: none;"></div>
        <div class="weui_actionsheet" id="weui_actionsheet">
            <div class="weui_actionsheet_menu">
                <div class="weui_actionsheet_cell">示例菜单</div>
                <div class="weui_actionsheet_cell">示例菜单</div>
                <div class="weui_actionsheet_cell">示例菜单</div>
                <div class="weui_actionsheet_cell">示例菜单</div>
            </div>
            <div class="weui_actionsheet_action">
                <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
            </div>
        </div>
    </div>

    值得一提的是, 页面下方的ActionSheet始终是显示的, 只不过平时通过transform: translateY(100%)隐藏了起来, 显示时用translateY(0). 这方法无需JS就可以自适应任意高度的ActionSheet.

    .weui_actionsheet {
        position: fixed;
        left: 0;
        bottom: 0;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 2;
        width: 100%;
        background-color: #EFEFF4;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s;
    }
    .weui_actionsheet_toggle {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    9. Icons

    Icons

    一堆iconfont. ( *・ω・)✄╰ひ╯

    10. Panel

    Panel

    略. ( *・ω・)✄╰ひ╯

    11. Tab

    Navbar:

    NavBar

    TabBar:

    TabBar

    略. ( *・ω・)✄╰ひ╯

    12. SearchBar

    无焦点状态:

    SearchBar

    有焦点状态:

    SearchBar with Candidates

    <div class="weui_search_bar weui_search_focusing" id="search_bar">
        <form class="weui_search_outer">
            <!-- 搜索框有焦点时的搜索图标, 搜索框和清空按钮 -->
            <div class="weui_search_inner">
                <i class="weui_icon_search"></i>
                <input type="search" class="weui_search_input" id="search_input" placeholder="搜索" required="">
                <a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
            </div>
            <!-- 搜索框没有焦点时的显示 -->
            <label for="search_input" class="weui_search_text" id="search_text">
                <i class="weui_icon_search"></i>
                <span>搜索</span>
            </label>
        </form>
        <!-- 搜索框有焦点时的取消键 -->
        <a href="javascript:" class="weui_search_cancel" id="search_cancel">取消</a>
    </div>

    这里我最好奇的是, 当用户点击搜索框时, 弹出的键盘上右下角的按键是"搜索"而不是"换行".

    我测试的效果是, 在微信中点击搜索框时键盘显示"搜索"按键, 在Safari中打开时则显示"换行".

    这就很诡异了, 说明微信做了什么手脚. 难道与JS有关?

    但是我在网上搜索了下, 发现只要确保input[type="search"]form包围, 且formaction属性即可. 示例:

    <form action="">
      <input type="search" name="search" placeholder="search">
    </form>

    但是WeUI的实现中, form并没有action属性, 所以暂时不知道WeUI是如何做的.

    相关: 如何让搜索框的键盘显示搜索按键?

    展开全文
  • 微信WeUI入门2

    2018-08-27 12:10:00
    引入需要的样式文件 ...weui.min.css 基本的框架如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...

    引入需要的样式文件

    最重要的css文件为

    weui.min.css

    基本的框架如下:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>WeUI</title>
        <link rel="stylesheet" href="css/weui.min.css">
    </head>
    <body ontouchstart>
        <!-- Your Code -->
    </body>
    </html>
    

      

    九宫格的效果

    页面代码

    index.html

    <!DOCTYPE html>
    <html>
      <head>
        <title>jQuery WeUI</title>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    		
    		<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
    		<link rel="stylesheet" href="css/weui.min.css">
    		<link rel="stylesheet" href="css/demos.css">
      </head>
    
      <body ontouchstart>
    
        <header class='demos-header'>
          <h1 class="demos-title">jQuery WeUI</h1>
          <p class='demos-sub-title'>轻量强大的UI库,不仅仅是 WeUI</p>
        </header>
    
        <div class="weui-grids">
          <a href="buttons.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_button.png" alt="">
            </div>
            <p class="weui-grid__label">
              Button
            </p>
          </a>
          <a href="cell.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_cell.png" alt="">
            </div>
            <p class="weui-grid__label">
              List
            </p>
          </a>
          <a href="form.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_cell.png" alt="">
            </div>
            <p class="weui-grid__label">
              Form
            </p>
          </a>
          <a href="flex.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_cell.png" alt="">
            </div>
            <p class="weui-grid__label">
              Flex
            </p>
          </a>
          <a href="toast.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_toast.png" alt="">
            </div>
            <p class="weui-grid__label">
              Toast
            </p>
          </a>
          <a href="dialog.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_dialog.png" alt="">
            </div>
            <p class="weui-grid__label">
              Dialog
            </p>
          </a>
          <a href="progress.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_progress.png" alt="">
            </div>
            <p class="weui-grid__label">
              Progress
            </p>
          </a>
          <a href="msg.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_msg.png" alt="">
            </div>
            <p class="weui-grid__label">
              Msg
            </p>
          </a>
          <a href="article.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_article.png" alt="">
            </div>
            <p class="weui-grid__label">
              Article
            </p>
          </a>
          <a href="action-sheet.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_actionSheet.png" alt="">
            </div>
            <p class="weui-grid__label">
              ActionSheet
            </p>
          </a>
          <a href="icons.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_icons.png" alt="">
            </div>
            <p class="weui-grid__label">
              Icons
            </p>
          </a>
          <a href="panel.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_panel.png" alt="">
            </div>
            <p class="weui-grid__label">
              Panel
            </p>
          </a>
          <a href="navbar.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_tab.png" alt="">
            </div>
            <p class="weui-grid__label">
              Navbar
            </p>
          </a>
          <a href="tabbar.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_tab.png" alt="">
            </div>
            <p class="weui-grid__label">
              Tabbar
            </p>
          </a>
          <a href="searchbar.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_search_bar.png" alt="">
            </div>
            <p class="weui-grid__label">
              SearchBar
            </p>
          </a>
          <a href="toptip.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_msg.png" alt="">
            </div>
            <p class="weui-grid__label">
              Toptip
            </p>
          </a>
          <a href="loadmore.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Loadmore
            </p>
          </a>
          <a href="slider.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Slider
            </p>
          </a>
          <a href="uploader.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Uploader
            </p>
          </a>
          <a href="badge.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Badge
            </p>
          </a>
          <a href="footer.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Footer
            </p>
          </a>
          <a href="preview.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Preview
            </p>
          </a>
          <a href="gallery.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Gallery
            </p>
          </a>
          <a href="swipeout.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Swipeout
            </p>
          </a>
        </div>
    
        <div class="demos-header">
          <h2 class='demos-second-title'>拓展组件</h2>
          <p class='demos-sub-title'>jQuery WeUI 专属组件</p>
        </div>
    
        <div class="weui-grids">
          <a href="ptr.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_ptr.png" alt="">
            </div>
            <p class="weui-grid__label">
              下拉刷新
            </p>
          </a>
          <a href="infinite.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_up.png" alt="">
            </div>
            <p class="weui-grid__label">
              滚动加载
            </p>
          </a>
          <a href="picker.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_picker.png" alt="">
            </div>
            <p class="weui-grid__label">
              Picker
            </p>
          </a>
          <a href="calendar.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_calendar.png" alt="">
            </div>
            <p class="weui-grid__label">
              Calendar
            </p>
          </a>
          <a href="city-picker.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_city.png" alt="">
            </div>
            <p class="weui-grid__label">
              City Picker
            </p>
          </a>
          <a href="datetime-picker.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_datetime.png" alt="">
            </div>
            <p class="weui-grid__label">
              Datetime
            </p>
          </a>
          <a href="swiper.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_swiper.png" alt="">
            </div>
            <p class="weui-grid__label">
              Swiper
            </p>
          </a>
          <a href="noti.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_msg.png" alt="">
            </div>
            <p class="weui-grid__label">
              Notification
            </p>
          </a>
          <a href="select.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_select.png" alt="">
            </div>
            <p class="weui-grid__label">
              Select
            </p>
          </a>
          <a href="popup.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_panel.png" alt="">
            </div>
            <p class="weui-grid__label">
              Popup
            </p>
          </a>
          <a href="photo-browser.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_photo.png" alt="">
            </div>
            <p class="weui-grid__label">
              Photos
            </p>
          </a>
          <a href="count.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              Count
            </p>
          </a>
        </div>
    
        <div class="demos-header">
          <h2 class='demos-second-title'>模板</h2>
          <p class='demos-sub-title'>常见的页面模板</p>
        </div>
    
        <div class="weui-grids">
          <a href="tpl-shopping-cart.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              购物车
            </p>
          </a>
          <a href="tpl-chat.html" class="weui-grid js_grid">
            <div class="weui-grid__icon">
              <img src="img/icon_nav_new.png" alt="">
            </div>
            <p class="weui-grid__label">
              聊天
            </p>
          </a>
        </div>
    
        <div class="weui-footer">
          <p class="weui-footer__links">
            <a href="http://jqweui.com" class="weui-footer__link">jQuery-WeUI 首页</a>
          </p>
          <p class="weui-footer__text">Copyright © 2016 jqweui.io</p>
        </div>
    
        <style>
          .weui-footer {
            margin: 25px 0 10px 0;
          }
        </style>
    
      </body>
    
    </html>
    

      

     

    展开全文
  • WeUI 简明入门指南

    2018-11-20 16:37:56
    由于 WeUI 0.4.x 到 1.x 版本更新改动较大,所以本文仅适用于 0.4.x 版本,适用于 1.x 版本的入门指南请查看 WeUI 1.0 简明入门指南。 之前做智慧校园的时候想找一个开源的移动端 UI 框架,找了好多个,比如淘宝的...
  • 上帝总是宠着我们,这样的好事情真的有,我的答案是weui.wxss。 WeUI概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统...
  • 效果图 wxml代码 &lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__title"&gt;...按钮,WeUI采用
  • 成功提示页面 wxml代码 ...weui-msg"&gt; &lt;view class="weui-msg__icon-area"&gt; &lt;icon type="success" size="93"&gt;&lt;
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... sliderLeft: (res.windowWidth / that.data.tabs.length - ...欢迎大家学习我的视频课程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-panel weui-panel_access"> ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-cells__title">带说明的列表项 ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-cells"> ... <view class="weui-cell"> ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: https://edu.csdn.net/topic/huangjuhua ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-flex"> ... <view class="weui-flex__item...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-footer"> ... <view class="weui-footer__...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... content: '弹窗内容,告知当前状态、信息和解决方法,描述...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-progress"> ... <view class="weui-...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: https://edu.csdn.net/topic/huangjuhua ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-form-preview"> ... <view class="weui-...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 单列选择器 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... 时间选择器 ... <view class="weui-btn-area"> ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-grids"> ... <navigator url="" class="...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通

空空如也

空空如也

1 2 3 4 5
收藏数 85
精华内容 34
关键字:

weui入门