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

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

一、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>