jQuery WeUI学习笔记1

前言：内容基本是参考博客笔记，偶尔会加些个人补充，仅作为复习巩固用途。如有错误，请指出，谢谢。
提示：后续更深理解在补充

前序、使用过程出现的问题

注意：发现问题解决问题比学习新知识更重要

一、jQuery WeUI入门

参考：jQuery WeUI地址

1、简单介绍

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue， 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。

jQuery WeUI 提供了总共30+ 个非常实用的组件：列表，表单，卡片，对话框，下拉刷新等。

2、自定义组件效果01

3、html文件摘录部分，css、js依赖参见说明即可，验证码生成以及点击更换需要自定义js

<div class="weui-cells weui-cells_form">
    <!--商铺名称-->
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">商铺名称</label>
        </div>
        <div class="weui-cell__bd">
            <input id="shop-name" class="weui-input" type="text" placeholder="商铺名称">
        </div>
    </div>
    <!--商铺分类-->
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">商铺分类</label>
        </div>
        <div class="weui-cell__bd">
            <select id="shop-category" style="width: 90%">
            </select>
        </div>
    </div>
    <!--所属区域-->
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">所属区域</label>
        </div>
        <div class="weui-cell__bd" >
            <select id="area" style="width: 90%">
            </select>
        </div>
    </div>
    <!--详细地址-->
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">详细地址</label>
        </div>
        <div class="weui-cell__bd">
            <input id="shop-addr" class="weui-input" type="text" placeholder="详细地址">
        </div>
    </div>
    <!--联系电话-->
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">联系电话</label>
        </div>
        <div class="weui-cell__bd">
            <input id="shop-phone" class="weui-input" type="text" placeholder="联系电话">
        </div>
    </div>
    <!--缩略图-->
    <div class="weui-cell">
            <div class="weui-uploader">
                <div class="weui-uploader__hd">
                    <p class="weui-uploader__title">缩略图</p>
                </div>
                <div class="weui-uploader__bd">
                    <input id="shop-img" type="file" accept="image/*" multiple="">
                    <!--<div class="weui-uploader__input-box">
                        <input id="uploaderInput" itemid="shopImg" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                    </div>-->
                </div>
            </div>
    </div>
    <!--店铺简介-->
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">店铺简介</label>
        </div>
        <div class="weui-cell__bd">
            <input id="shop-desc" class="weui-input" type="text" placeholder="店铺简介">
        </div>
    </div>
    <!--验证码-->
    <div class="weui-cell weui-cell_vcode ">
        <div class="weui-cell__hd ">
            <label class="weui-label">验证码</label>
        </div>
        <div class="weui-cell__hd ">
            <input class="weui-input" type="text" id="j-kaptcha" placeholder="请输入验证码">
        </div>
        <div class="weui-cell__bd " >
            <img class="weui-vcode-img" id="kaptcha" onclick="changeVerifyCode()" src="/Kaptcha">
        </div>
        <div class="weui-cell__ft " >
            <button class="weui-vcode-btn" onclick="changeVerifyCode()">点击更换验证码</button>
        </div>
    </div>

    <!--取消与确定按钮-->
    <div class="button_sp_area" style="text-align: center;">
        <div class="weui-flex" >
            <div class="weui-flex__item">
                <button class="weui-btn  weui-btn_warn" style="width: 90%">返回</button>
            </div>
            <div class="weui-flex__item">
                <button id="submit" class="weui-btn weui-btn_primary" style="width: 90%">提交</button>
            </div>
        </div>
    </div>
</div>