绿萝哥哥
绿萝哥哥

WeUI 入门教程

分享一下我老师大神的人工智能教程！零基础，通俗易懂！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,原理都一样 看之前尽量参考一下官方源码

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述



<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;">Buttonh1>            <a href="javascript:;" class="weui_btn weui_btn_primary">按钮1a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮2a>            <a href="javascript:;" class="weui_btn weui_btn_warn">确认3a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认4a>            <a href="javascript:;" class="weui_btn weui_btn_default">按钮5a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮6a>            <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮7a>            <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮8a>            <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮9a>            <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮10a>            <h1 style="text-align: center;color: red;">Cellh1>            <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 standardp>                    div>                    <div class="weui_cell_ft">                    div>                a>                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standardp>                    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 standardp>                    div>                    <div class="weui_cell_ft">说明文字div>                a>                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standardp>                    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 standardp>                    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 standardp>                    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 standardp>                    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 standardp>                    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.1p>                    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.2p>                    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.3p>                    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.4p>                    div>                label>            div>            <div class="weui_cells_title">开关1div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell weui_cell_switch">                    <div class="weui_cell_hd weui_cell_primary">标题文字1div>                    <div class="weui_cell_ft">                        <input class="weui_switch" type="checkbox" />                    div>                div>            div>            <div class="weui_cells_title">开关2div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell weui_cell_switch">                    <div class="weui_cell_hd weui_cell_primary">标题文字2div>                    <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">qqlabel>                    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/2div>                            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>0span>/200div>                    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">+86option>                            <option value="2">+80option>                            <option value="3">+84option>                            <option value="4">+87option>                            <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">Emailoption>                        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;">Toasth1>            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">点击弹出Toasta>            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoadingToast">点击弹出Loading Toasta>            <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>                        <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>                                    <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;">Dialogh1>            <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>                        <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>                                    <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;">Progressh1>            <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;">Messageh1>            <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;">Articleh1>            <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 autep>                    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;">ActionSheeth1>            <div class="bd spacing">                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheeta>            div>                        <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">示例菜单1div>                        <div class="weui_actionsheet_cell">示例菜单2div>                        <div class="weui_actionsheet_cell">示例菜单3div>                        <div class="weui_actionsheet_cell">示例菜单4div>                    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;">Iconsh1>            <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 入门教程)

  • 第四天旅游线路预览——从换乘中心到喀纳斯湖 陟彼高冈yu 基于Googleearthstudio的旅游规划和预览旅游
    第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；换乘中心有4路车，喀纳斯①号车，去喀纳斯湖，路程时长约5分钟；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day4-2-480p
  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能 小康师兄 ESP32-C3入门教程https服务器esp32OTAMQTT
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
  • C# 开发教程-入门基础 天马3798 教程系列整理c#开发语言
    1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
  • 微信小程序常用开发框架有哪些？ +码农快讯+ 分享微信小程序小程序开发
    想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。1：WeUI小程序–使用教程https://weui.io/官方介绍：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大
  • 一文说透 Android 应用架构 MVC、MVP、MVVM 和 组件化，Android基础入门教程 Java后时代 2024年程序员学习android架构mvc
    然后，就是我们的View层的代码，同样，我对代码做了删减：@Route(path=BaseConstants.EYEPETIZER_MENU)publicclassHomeActivityextendsCommonActivityimplementsHomeContract.IView{//实例化PresenterprivateHomeContract.IPresenterpresenter;{p
  • 感恩日记0103-0513 糊糊陪你瑜伽
    一.每日精进：1.学习：《瑜伽之道》2.健身：《艾扬格瑜伽入门教程》第九周第二轮第7遍3.陪家人:今天是打拳日，对打的小哥哥出手很准，悟空也很抗打4.帮朋友：在直播间带大家练习；5.投资：每日定投box二.每日感恩：感恩sssb，所有伟大的传承上师们；感恩爸妈准备午餐，妈下午帮忙接悟空带他去上课；感谢二组给力的组委们，大家齐心协力，打了漂亮杖；感谢团长马倩总能在需要时答疑解惑，还开课组委会，优秀的
  • 第三天旅游线路预览——从景区换乘中心到云霄峰 陟彼高冈yu 基于Googleearthstudio的旅游规划和预览旅游
    第三天：从贾登峪到禾木风景区，晚上住宿贾登峪；从景区换乘中心可以乘车前往云霄峰景区，乘坐索道上山观景；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day3-4
  • Docker快速入门教程之使用docker部署Nginx详细流程 老秦包你会 dockernginxeureka
    文章目录前言1.安装Docker2.使用Docker拉取Nginx镜像3.创建并启动Nginx容器4.本地连接测试5.公网远程访问本地Nginx5.1内网穿透工具安装5.2创建远程连接公网地址5.3使用固定公网地址远程访问前言在开发人员的工作中，公网远程访问内网是其必备的技术需求之一。对于运维人员和开发者来说，能够通过公网远程访问内部的服务和应用，能够极大地提升工作效率和便利性。本文将介绍如何利用
  • C++入门教程：第八篇 - 文件I/O操作 HYP_Coder c++开发语言
    C++入门教程：第八篇-文件I/O操作文件I/O（输入/输出）是程序与外部存储设备进行数据交换的关键操作。在C++中，文件I/O操作由标准库提供的流类完成。通过这些流类，程序可以读写文件，处理文件内容。本文将介绍C++中的文件I/O基础，包括如何打开、读写和关闭文件。1.文件流基础C++提供了几种文件流类，用于处理不同类型的文件操作。主要的文件流类包括ifstream（输入文件流）、ofstrea
  • Python实用技巧: 获取 后缀名(扩展名) 或 文件名 高斯小哥 Python基础【高质量合集】python开发语言str扩展名后缀名
    Python实用技巧:获取后缀名(扩展名)或文件名个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、引言二、获取文件名三、获取文件扩展名四、实战案例五、总结六、最后一、引言
  • 顶级的python入门教程！小白到大师，从这篇教程开始！ 马大哈（Python） pythonpycharm开发语言学习青少年编程
    1.为什么要学习Python？学习Python的原因有很多，以下是几个主要的原因：广泛应用：Python被广泛应用于Web开发、数据科学、人工智能、机器学习、自动化运维、网络爬虫、科学计算、游戏开发等多个领域。掌握Python意味着你可以在这些领域中找到丰富的职业机会。入门简单：Python的语法简洁明了，易于学习和理解，对于编程初学者来说非常友好。它的代码风格一致，可读性强，有助于培养良好的编程
  • 爬虫入门教程：爬虫概述 会三十六变的猫 爬虫爬虫python大数据
    在数字化时代，数据已经成为我们生活和工作中不可或缺的一部分。而如何高效、准确地获取这些数据，成为了许多领域面临的共同问题。今天，我们就来一起探讨一下爬虫技术，这个能够自动从互联网上抓取信息的神奇工具。一、什么是爬虫简单来说，爬虫（WebCrawler）是一种按照一定规则，自动抓取互联网信息的程序或者脚本。它通过模拟人类浏览器的行为，向目标网站发送请求，然后解析并提取返回的数据。这些数据可以是网页的
  • 2024年Python最新Python爬虫入门教程30：爬取拉勾网招聘数据信息(1) 2401_84584609 程序员python爬虫信息可视化
    Python爬虫入门教程23：A站视频的爬取，解密m3u8视频格式Python爬虫入门教程24：下载某网站付费文档保存PDFPython爬虫入门教程25：绕过JS加密参数，实现批量下载抖某音无水印视频内容Python爬虫入门教程26：快手视频网站数据内容下载Python爬虫入门教程27：爬取某电商平台数据内容并做数据可视化Python爬虫入门教程28：爬取微博热搜榜并做动态数据展示Python爬虫
  • Elasticsearch新手入门教程 超级英雄吉姆 java企业应用
    Elasticsearch入门一.Elasticsearch介绍Elasticsearch是一个分布式、可扩展、实时的搜索与数据分析引擎。它能从项目一开始就赋予你的数据以搜索、分析和探索的能力，这是通常没有预料到的。它存在还因为原始数据如果只是躺在磁盘里面根本就毫无用处。无论你是需要全文搜索，还是结构化数据的实时统计，或者两者结合，这本指南都能帮助你了解其中最基本的概念，从最基本的操作开始学习El
  • .NET Core快速入门教程 4、使用VS Code开发.NET Core控制台应用程序 dotNET跨平台
    一、前言为什么选择VSCode？VSCode是一款跨平台的代码编辑器，想想他的哥哥VS，并是微软出品的宇宙第一IDE，那作为VS的弟弟，VSCode也不会差，毕竟微软出品。反正ken是这么认为的本篇开发环境？1、操作系统：Windows10X642、SDK：.NETCore2.0Preview3、VSCode：1.14前置知识？请看第2篇教程二、安装&配置1、VSCode下载&安装（1）下载地址：
  • RabbitMQ 入门教程 寂然如故 ruby开发语言后端
    引言RabbitMQ是一个开源的消息代理和队列服务器，实现高级消息队列协议(AMQP)0-9-1。它能帮助开发者构建可靠、可扩展的应用程序，通过消息传递来解耦组件。安装与配置安装RabbitMQ1.下载安装包:-[RabbitMQDownloadPage](https://www.rabbitmq.com/download.html)2.安装:-Followtheinstallationinstr
  • RabbitMQ 入门教程 寂然如故 ruby开发语言后端
    介绍RabbitMQ是一个开源的消息代理和队列服务器，实现高级消息队列协议(AMQP)。本教程将引导你完成RabbitMQ的基本设置，并演示如何使用Python来发送和接收消息。环境准备1.安装RabbitMQ-下载并安装RabbitMQ:[https://www.rabbitmq.com/download.html](https://www.rabbitmq.com/download.html)
  • Python入门教程：随机数random模块的用法 程序员晓晓 python开发语言Python编程Python学习技能分享
    random是Python的一个内置模块，可以生成随机浮点数、整数、字符串，甚至帮助你随机选择列表序列中的一个元素，打乱一组数据等。以下是这个模块的常用函数及其用法：1.random.random():生成一个[0.0,1.0)之间的随机浮点数，包括0但不包括1。importrandomprint(random.random())2.random.randint(a,b):生成一个[a,b]之间的
  • OpenglEs之EGL环境搭建 FlyerGo Opengl音视频c++opengl
    前言前面我们发布了一系列的入门教程，例如C++系列的指针扫盲、多线程的使用等，JNI入门系列，ffmpeg入门系列等，有感兴趣的童鞋们可以关注往回自行查阅。今天我们的主题依然是音视频开发的范畴，做过音视频开发的都知道Opengl也是音视频开发中的一项重要技能，特别是涉及到视频录制、特效处理、画质渲染细分功能。因此后续笔者打算再出一系列的OpenglES的学习笔记，希望能与大家共同温故知新。因为前面
  • YOLOV5入门教程-yolov5s.yaml文件 ustcthebest YOLOlinux运维
    一、YAML的定义YAML（YAMLAin'tMarkupLanguage）是一种人类友好的数据序列化格式，用于表示数据结构和配置文件。以下是YAML文件的一些概述信息：可读性强：YAML使用缩进和结构化方式来表示数据，易于阅读和编写。它注重易读性，鼓励使用人类可读的格式。轻量级：YAML是一种轻量级的标记语言，相对于XML和JSON，它更简洁、易理解，适合表示复杂的数据结构。支持数据类型：YAM
  • 通俗易懂版经典的黑客入门教程 程序员橙橙 网络网络安全web安全计算机网络安全
    给大家的福利基于入门网络安全打造的：黑客&网络安全入门&进阶学习资源包第一节、黑客的种类和行为以我的理解，“黑客”大体上应该分为“正”、“邪”两类，正派黑客依靠自己掌握的知识帮助系统管理员找出系统中的漏洞并加以完善，而邪派黑客则是通过各种黑客技能对系统进行攻击、入侵或者做其他一些有害于网络的事情，因为邪派黑客所从事的事情违背了《黑客守则》，所以他们真正的名字叫“骇客”（Cracker）而非“黑客”
  • React入门教程：创建你的第一个React应用 小于负无穷 react.js前端前端框架javascripthtml5node.jstypescript
    React是由Facebook开发的用于构建用户界面的JavaScript库。它以其高效、灵活和组件化的特性受到开发者的广泛欢迎。如果你是前端开发新手，或是从其他框架转向React，这篇文章将引导你创建一个简单的React应用，帮助你快速上手。1.环境准备在开始之前，确保你的开发环境已经安装了以下工具：Node.js和npm：React依赖于Node.js环境，并且npm是Node.js的包管理工
  • RabbitMQ 入门教程 寂然如故 RabbitMQrabbitmq分布式
    概述RabbitMQ是一个开源的消息代理和队列服务器，实现[AMQP0-9-1]标准。本教程将指导你如何使用Python和RabbitMQ进行消息传递。安装与配置安装RabbitMQ1.Ubuntu:```bashsudoapt-getupdatesudoapt-getinstallrabbitmq-server```2.Windows:-下载安装包并运行。配置-启动管理插件以在浏览器中查看队列状
  • RabbitMQ 入门教程 寂然如故 ruby开发语言后端
    介绍RabbitMQ是一个开源的消息代理和队列服务器，实现高级消息队列协议(AMQP)。它可以在生产者和消费者之间传递消息，并且可以保证消息的传递。本教程将指导你通过简单的步骤来搭建并使用RabbitMQ。安装与配置1.安装RabbitMQLinux```bashsudoapt-getupdatesudoapt-getinstallrabbitmq-server```Windows-下载安装包:h
  • RabbitMQ 入门教程 寂然如故 RabbitMQruby开发语言后端
    概述RabbitMQ是一个开源的消息代理和队列服务器，实现了高级消息队列协议(AMQP)。它能够接收、存储和转发消息数据。本教程将引导你完成搭建RabbitMQ环境、编写生产者与消费者程序的过程。安装与配置1.安装RabbitMQLinux```bashsudoapt-getupdatesudoapt-getinstallrabbitmq-server```Windows-下载安装包:https:
  • 感恩日记0067-0407 糊糊陪你瑜伽
    一.每日精进：1.读书：《微信互联网平民创业》+二节写作课2.健身：直播一起练《入门教程》第5周的序列第7遍（第二轮）3.陪家人：红豆饼早餐是娃的最爱，连吃了两天了。这娃特专一，吃穿住行一旦爱上就彻底排他了。4.帮朋友：帮助他人需要机缘，也需要余力，最近先做到上好每一节课，做好服务，用专业帮助有缘人。5.投资：每日定投box二.每日感恩：感恩爸妈准备午餐，厨艺有进步；感恩春天的引导，探寻生命密码的
  • Vue2.0 WYONG_ZQ java
    Vue2.0饿了么ElementUI:http://element.eleme.io/#/zh-CN/component/installation?Vue2.0从环境搭建到发布：http://blog.csdn.net/sinat_17775997/article/details/52788908Vue官方教程及api:http://cn.vuejs.org/v2/guide/ES6入门教程：ht
  • Rust基础 vo很懒 rust开发语言后端
    Rust语法基础本文源自观看B站Rust编程语言入门教程记录下来的重点笔记视频链接：Rust编程语言入门教程（Rust语言/Rust权威指南配套）文章目录Rust语法基础第三章变量与可变性数据类型函数控制流第四章所有权所有权规则、内存与分配所有权与函数引用与借用第五章struct定义和实例化输出格式化struct方法方法调用的运算符关联函数impl块第六章枚举Option枚举Matchiflet第
  • STM32入门教程：SPI通信 嵌入式杂谈 stm32嵌入式硬件单片机
    SPI（SerialPeripheralInterface）是一种常见的串行通信协议，广泛用于微控制器与各种外围设备之间的通信。本教程将介绍如何在STM32微控制器上实现SPI通信。1.SPI通信基础SPI通信协议是一种主从模式的通信方式，通常包含四根线：SCLK（时钟线）、MOSI（主设备数据输出，从设备数据输入线）、MISO（主设备数据输入，从设备数据输出线）和CS（片选线）。在SPI通信中，
  • gis教程链接 从此潜龙入海
    QGIS教程：入门与进阶—QGIS教程：入门与进阶QGIS3.x入门教程—数据可视化-网易云课堂StackOvernet:gis
  • web前段跨域nginx代理配置 刘正强 nginxcmsWeb
    nginx代理配置可参考server部分 server {         listen       80;         server_name  localhost;
  • spring学习笔记 caoyong spring
    一、概述     a>、核心技术 : IOC与AOP b>、开发为什么需要面向接口而不是实现     接口降低一个组件与整个系统的藕合程度，当该组件不满足系统需求时，可以很容易的将该组件从系统中替换掉，而不会对整个系统产生大的影响 c>、面向接口编口编程的难点在于如何对接口进行初始化,(使用工厂设计模式)
  • Eclipse打开workspace提示工作空间不可用 0624chenhong eclipse
    做项目的时候，难免会用到整个团队的代码，或者上一任同事创建的workspace， 1.电脑切换账号后，Eclipse打开时，会提示Eclipse对应的目录锁定，无法访问，根据提示，找到对应目录，G:\eclipse\configuration\org.eclipse.osgi\.manager，其中文件.fileTableLock提示被锁定。 解决办法，删掉.fileTableLock文件，重
  • Javascript 面向对面写法的必要性？ 一炮送你回车库 JavaScript
    现在Javascript面向对象的方式来写页面很流行，什么纯javascript的mvc框架都出来了：ember 这是javascript层的mvc框架哦,不是j2ee的mvc框架   我想说的是，javascript本来就不是一门面向对象的语言，用它写出来的面向对象的程序，本身就有些别扭，很多人提到js的面向对象首先提的是：复用性。那么我请问你写的js里有多少是可以复用的，用fu
  • js array对象的迭代方法 换个号韩国红果果 array
    1.forEach 该方法接受一个函数作为参数， 对数组中的每个元素 使用该函数  return 语句失效 function square(num) { print(num, num * num); } var nums = [1,2,3,4,5,6,7,8,9,10]; nums.forEach(square); 2.every 该方法接受一个返回值为布尔类型
  • 对Hibernate缓存机制的理解 归来朝歌 session一级缓存对象持久化
    在hibernate中session一级缓存机制中，有这么一种情况： 问题描述：我需要new一个对象，对它的几个字段赋值，但是有一些属性并没有进行赋值，然后调用 session.save()方法，在提交事务后，会出现这样的情况： 1：在数据库中有默认属性的字段的值为空 2：既然是持久化对象，为什么在最后对象拿不到默认属性的值？ 通过调试后解决方案如下： 对于问题一，如你在数据库里设置了
  • WebService调用错误合集 darkranger webservice
     Java.Lang.NoClassDefFoundError: Org/Apache/Commons/Discovery/Tools/DiscoverSingleton 调用接口出错， 一个简单的WebService import org.apache.axis.client.Call;import org.apache.axis.client.Service; 首先必不可
  • JSP和Servlet的中文乱码处理 aijuans Java Web
    JSP和Servlet的中文乱码处理 前几天学习了JSP和Servlet中有关中文乱码的一些问题，写成了博客，今天进行更新一下。应该是可以解决日常的乱码问题了。现在作以下总结希望对需要的人有所帮助。我也是刚学，所以有不足之处希望谅解。 一、表单提交时出现乱码： 在进行表单提交的时候，经常提交一些中文，自然就避免不了出现中文乱码的情况，对于表单来说有两种提交方式：get和post提交方式。所以
  • 面试经典六问 atongyeye 工作面试
    题记：因为我不善沟通，所以在面试中经常碰壁，看了网上太多面试宝典，基本上不太靠谱。只好自己总结，并试着根据最近工作情况完成个人答案。以备不时之需。 以下是人事了解应聘者情况的最典型的六个问题： 1 简单自我介绍 关于这个问题，主要为了弄清两件事，一是了解应聘者的背景，二是应聘者将这些背景信息组织成合适语言的能力。 我的回答：(针对技术面试回答，如果是人事面试，可以就掌
  • contentResolver.query()参数详解 百合不是茶 androidquery()详解
    收藏csdn的博客,介绍的比较详细,新手值得一看 1.获取联系人姓名 一个简单的例子，这个函数获取设备上所有的联系人ID和联系人NAME。 [java]  view plain copy   public void fetchAllContacts() {      
  • ora-00054:resource busy and acquire with nowait specified解决方法 bijian1013 oracle数据库killnowait
            当某个数据库用户在数据库中插入、更新、删除一个表的数据，或者增加一个表的主键时或者表的索引时，常常会出现ora-00054:resource busy and acquire with nowait specified这样的错误。主要是因为有事务正在执行（或者事务已经被锁），所有导致执行不成功。 1.下面的语句
  • web 开发乱码 征客丶 springWeb
    以下前端都是 utf-8 字符集编码 一、后台接收 1.1、 get 请求乱码 get 请求中，请求参数在请求头中； 乱码解决方法： a、通过在web 服务器中配置编码格式：tomcat 中，在 Connector 中添加URIEncoding="UTF-8"； 1.2、post 请求乱码 post 请求中，请求参数分两部份， 1.2.1、url？参数，
  • 【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式 bit1129 spark
    Spark SQL数据源和表的Schema case class apply schema parquet json JSON数据源 准备源数据 {"name":"Jack", "age": 12, "addr":{"city":"beijing&
  • JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss BlueSkator -Xss-Xmn-Xms-Xmx
      堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java -Xmx355
  • jqGrid 各种参数 详解(转帖) BreakingBad jqGrid
      jqGrid 各种参数 详解 分类：  源代码分享  个人随笔请勿参考  解决开发问题 2012-05-09 20:29   84282人阅读   评论(22)   收藏   举报 jquery 服务器 parameters function ajax string  
  • 读《研磨设计模式》-代码笔记-代理模式-Proxy bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; /* * 下面
  • 应用升级iOS8中遇到的一些问题 chenhbc ios8升级iOS8
    1、很奇怪的问题，登录界面，有一个判断，如果不存在某个值，则跳转到设置界面，ios8之前的系统都可以正常跳转，iOS8中代码已经执行到下一个界面了，但界面并没有跳转过去，而且这个值如果设置过的话，也是可以正常跳转过去的，这个问题纠结了两天多，之前的判断我是在 -(void)viewWillAppear:(BOOL)animated  中写的，最终的解决办法是把判断写在 -(void
  • 工作流与自组织的关系？ comsci 设计模式工作
      目前的工作流系统中的节点及其相互之间的连接是事先根据管理的实际需要而绘制好的，这种固定的模式在实际的运用中会受到很多限制，特别是节点之间的依存关系是固定的，节点的处理不考虑到流程整体的运行情况，细节和整体间的关系是脱节的，那么我们提出一个新的观点，一个流程是否可以通过节点的自组织运动来自动生成呢？这种流程有什么实际意义呢？   这里有篇论文，摘要是：“针对网格中的服务
  • Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX daizj oracle
    insert提示IGNORE_ROW_ON_DUPKEY_INDEX 转自：http://space.itpub.net/18922393/viewspace-752123 在 insert into tablea ...select * from tableb中，如果存在唯一约束，会导致整个insert操作失败。使用IGNORE_ROW_ON_DUPKEY_INDEX提示，会忽略唯一
  • 二叉树:堆 dieslrae 二叉树
        这里说的堆其实是一个完全二叉树,每个节点都不小于自己的子节点,不要跟jvm的堆搞混了.由于是完全二叉树,可以用数组来构建.用数组构建树的规则很简单:     一个节点的父节点下标为: (当前下标 - 1)/2     一个节点的左节点下标为: 当前下标 * 2 + 1   &
  • C语言学习八结构体 dcj3sjt126com c
    为什么需要结构体，看代码 # include <stdio.h> struct Student //定义一个学生类型，里面有age, score, sex, 然后可以定义这个类型的变量 { int age; float score; char sex; } int main(void) { struct Student st = {80, 66.6,
  • centos安装golang dcj3sjt126com centos
    #在国内镜像下载二进制包 wget -c  http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local -xzf go1.4.1.linux-amd64.tar.gz   #把golang的bin目录加入全局环境变量 cat >>/etc/profile<
  • 10.性能优化-监控-MySQL慢查询 frank1234 性能优化MySQL慢查询
    1.记录慢查询配置 show variables where variable_name like 'slow%' ; --查看默认日志路径 查询结果：--不用的机器可能不同 slow_query_log_file=/var/lib/mysql/centos-slow.log 修改mysqld配置文件：/usr /my.cnf[一般在/etc/my.cnf，本机在/user/my.cn
  • Java父类取得子类类名 happyqing javathis父类子类类名
      在继承关系中，不管父类还是子类，这些类里面的this都代表了最终new出来的那个类的实例对象，所以在父类中你可以用this获取到子类的信息！   package com.urthinker.module.test; import org.junit.Test; abstract class BaseDao<T> { public void
  • Spring3.2新注解@ControllerAdvice jinnianshilongnian @Controller
    @ControllerAdvice，是spring3.2提供的新注解，从名字上可以看出大体意思是控制器增强。让我们先看看@ControllerAdvice的实现：   @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Component public @interface Co
  • Java spring mvc多数据源配置 liuxihope spring
    转自：http://www.itpub.net/thread-1906608-1-1.html 1、首先配置两个数据库 <bean id="dataSourceA" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close&quo
  • 第12章 Ajax（下） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • BW / Universe Mappings blueoxygen BO
      BW Element OLAP Universe Element Cube  Dimension Class Charateristic A class with dimension and detail objects (Detail objects for key and desription) Hi
  • Java开发熟手该当心的11个错误 tomcat_oracle java多线程工作单元测试
    #1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为
  • 推行国产操作系统的优劣 yananay windowslinux国产操作系统
    最近刮起了一股风，就是去“国外货”。从应用程序开始，到基础的系统，数据库，现在已经刮到操作系统了。原因就是“棱镜计划”，使我们终于认识到了国外货的危害，开始重视起了信息安全。操作系统是计算机的灵魂。既然是灵魂，为了信息安全，那我们就自然要使用和推行国货。可是，一味地推行，是否就一定正确呢？ 先说说信息安全。其实从很早以来大家就在讨论信息安全。很多年以前，就据传某世界级的网络设备制造商生产的交
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他