WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。\
WeUI 提供了总共30+ 个非常实用的组件：列表，表单，卡片，对话框，下拉刷新等。
WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue， 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
基础组件详情请参考 http://jqweui.com/components#grid转载于:https://www.cnblogs.com/cnn2017/p/7454244.html
1.showLoading
显示：$.showLoading("数据加载中");
隐藏：$.hideLoading();
2.修改showLoading样式
.weui-toast
3.修改加载框样式
p.weui-toast_content {
margin-top: 0rem;
}
一.参考文献
1.GitHub：https://github.com/weui/weui
2.weui+：一个扩展库，在weui0.44基础上,采用zepto作为基础库,兼容weui1.1所有效果,目前分为表单,基础,布局,组件,js函数五大类,共计百余项功能
二.使用方法
直接看官方文档
三.注意
1.如果用的是weui+（即参考文献2），则要使用GitHub上下载的css和zepto文件，因为作者做了修改，增加了一些功能。
2.body上要加一个属性
<body ontouchstart>四.实例（weui+）（meta标签是根据自己项目需求加的）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--优先使用最新版本 IE 和 Chrome--> <meta name="apple-mobile-web-app-title" content=""> <!--添加到主屏后的标题（IOS）--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--启用 WebApp 全屏模式（IOS）--> <meta name="apple-touch-fullscreen" content="yes" /> <!--启用 WebApp 全屏模式（IOS）--> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!--禁止百度转码--> <meta name="format-detection" content="telephone=no" /> <!--关闭电话号码的自动识别--> <meta content="email=no" name="format-detection" /> <!--关闭邮箱的自动识别--> <meta name="msapplication-tap-highlight" content="no"> <!--winphone系统a、input标签被点击时产生的半透明灰色背景--> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <title></title> <link rel="stylesheet" type="text/css" href="../css/weuix.min.css"><!-- WeUi+样式文件 --> </head> <body ontouchstart> <script type="text/javascript" src="../js/zepto.min.js"></script> </body> </html>
五.weui+(注意：不是weui)使用小结（这个扩展库的GitHub没有给出文档，以下是一些自己使用过的）
5.1datetimePicker时间选择组件
// 日期选择初始化 $("#date1").datetimePicker({title:"选择日期",m:1,onChange: function () { var date1=$("#date1").val(); },});我没有看到如何获取日期返回值，后来参考微信weui文档，加了个onChange函数获得了所选择的时间。注意，函数里面是用的input的val()。有个问题：获取的值是前一个onchange的，并非最终的，未解决这个问题。
转载于:https://my.oschina.net/Cubicluo/blog/865701
一系列文档地址
今天需要用到weui，这里记录一下开发文档地址
开发文档：http://old.jqweui.com/components
js文档： https://github.com/Tencent/weui.js/blob/master/docs/README.md
github： https://github.com/Tencent/weui.js
菜鸟教程：http://www.runoob.com/w3cnote/weui-for-weixin-web.html
效果展示： https://weui.io
这里简单介绍一下小程序如何引入weui及其简单的使用
项目中使用步骤
1、在GitHub上https://github.com/weui/weui-wxss/下载程序代码，解压后可以看到如下目录：
2、我们只需要将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下：
3、新建微信小程序项目，将weui.wxss文件导入到小程序项目的根目录下：
4、在项目中引用：在全局app.wxss中加入weui.wxss的引用- @import "weui.wxss";
5 根组件使用class=”page”
<view class="page"></view>
6 页面骨架
<view class="page">
<view class="page__hd"></view><!--页头-->
<view class="page__bd"></view><!--主体-->
<view></view><!--未设置页脚-->
</view>
7 除此之外都是按照weui-开头后接组件名称，例如class=”weui-footer”
<view class="weui-footer">我是页脚</view>
8 组件的子组件样式，例如view.weui-footer组件还有链接和版权信息。
<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">上海物联网科技有限公司</navigator>
</view>
<view class="weui-footer__text">Copyright © 程序媛专用</view>
</view>
本地起测试demo
- 为了更直观的查看效果和方便使用，我在小程序中新建个项目，地址指向weui-wxss-master\dist（即从git上克隆的代码对应的dist目录），这样就可以随时查找自己要的效果，剩下的就是复制粘贴了，在项目中使用weui的样式如下：
示例代码：
<view class="page">
<view class="page__hd">
<view class="page__title">Button</view>
<view class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</view>
</view>
<view class="page__bd page__bd_spacing">
<button class="weui-btn" type="primary">页面主操作 Normal</button>
<button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>
<button class="weui-btn" type="default">页面次要操作 Normal</button>
<button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>
<button class="weui-btn" type="warn">警告类操作 Normal</button>
<button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>
<view class="button-sp-area">
<button class="weui-btn" type="primary" plain="true">按钮</button>
<button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>
<button class="weui-btn" type="default" plain="true">按钮</button>
<button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>
<button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
<button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
<button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
</view>
</view>
</view>
