1、前言

通过前面系列文章的学习与讲解，相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜，剩下的就是前端了。关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病，对于微信开发前端组件这一块总是找不到合适的移动端组件，什么都要自己去实现，这个开发成本就大了去了。于是乎博主打算另辟蹊径，找找基于微信开发的移动端UI组件，最后找到了微信官方开发的一套前端组件：WeUI。

2、WeUI基本介绍

2.1 WeUI概述

WeUI、微信公众号开发的瑞士军刀。WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。有了这个作为基础，我们再也不用担心微信开发的浏览器兼容性问题了，微信官方推出的这个东西拯救了千千万万的开发者！

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

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

WeUI开源地址：https://github.com/Tencent/weui

WeUI使用示例：https://weui.io/

基于jquery的WeUI：http://jqweui.com/（提供了大量的第三方组件库）

2.2 为什么选择jQuery WeUI

jQuery WeUI 的定位正如 jQuery 的定位：做一把锋利易用的小刀，而不是做一个笨重的大炮。

  • 简单易用，无上手难度
  • 丰富强大的组件库，并且还在不断完善中
  • 轻量，无限制，可以结合任何主流JS框架使用，比如 Vue, Angular, React 等
  • 高性能的 CSS3 动画，低端手机上依然可以较流畅运行
  • 详尽完善的官方文档
  • 标准稳定的API，基本可以保证版本透明更新
  • 基于 MIT 协议发布，免费开源

下面引用几张WeUI官方提供的jQuery WeUI组件展示。

3、jQuery WeUI基本用法

考虑到大家对WeUI组件的使用有忧虑，不知如何下手。下面我就从最基础的开始，手把手教你入门WeUI。已经很熟悉的朋友请直接跳过此段，前往官方网站查看demo。

1、引用必须的文件

如果你用的是原始的开发方式，比如基于jQuery的开发，那么你首先需要去Github上面将WeUI的源文件down下来，然后引入到你的项目；如果是基于npm管理组件，使用npm命令的方式引入WeUI组件即可。这里我们使用的是原始的开发方式。如果你只需要WeUI的css样式支持，那么你只需要引入weui.css文件即可；如果除了样式之外，还需要WeUI的js组件支持，那么你还需要引用另外一个包：weui.js。下面先介绍基础的WeUI样式库，先来看看WeUI到底能为我们带来啥，后面再来分享WeUI.js以及jquery.WeUI.js的相关技术。

要使用WeUI,这里首先必须引入css样式文件

  1. <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />

2、最基础的组件样式

下面我们以一个最基础的表单来展示WeUI的使用方法，如下我们开发一个个人资料录入的页面效果。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
  6.     <title>个人资料录入</title>
  7.     <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" />
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="page navbar js_show">
  12.             <div class="page__bd">
  13.                 <div class="weui-cells__title">填写个人资料</div>
  14.                 <div class="weui-cells weui-cells_form">
  15.                     <div class="weui-cell">
  16.                         <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
  17.                         <div class="weui-cell__bd">
  18.                             <input class="weui-input" type="text" placeholder="请输入姓名" />
  19.                         </div>
  20.                     </div>
  21.                     <div class="weui-cell">
  22.                         <div class="weui-cell__hd"><label class="weui-label">QQ</label></div>
  23.                         <div class="weui-cell__bd">
  24.                             <input class="weui-input" type="number" pattern="[0-9]*" placeholder="QQ号" />
  25.                         </div>
  26.                     </div>
  27.                     <div class="weui-cell weui-cell_vcode">
  28.                         <div class="weui-cell__hd">
  29.                             <label class="weui-label">手机号</label>
  30.                         </div>
  31.                         <div class="weui-cell__bd">
  32.                             <input class="weui-input" type="tel" placeholder="请输入手机号" />
  33.                         </div>
  34.                         <div class="weui-cell__ft">
  35.                             <button class="weui-vcode-btn">获取验证码</button>
  36.                         </div>
  37.                     </div>
  38.                     <div class="weui-cell">
  39.                         <div class="weui-cell__hd"><label for="" class="weui-label">出生日期</label></div>
  40.                         <div class="weui-cell__bd">
  41.                             <input class="weui-input" type="date" value="" />
  42.                         </div>
  43.                     </div>
  44.                     <div class="weui-cell">
  45.                         <div class="weui-cell__hd"><label for="" class="weui-label">注册时间</label></div>
  46.                         <div class="weui-cell__bd">
  47.                             <input class="weui-input" type="datetime-local" value="" placeholder="" />
  48.                         </div>
  49.                     </div>
  50.                     <div class="weui-cell">
  51.                         <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
  52.                         <div class="weui-cell__bd">
  53.                             <div class="weui-cells weui-cells_radio">
  54.                                 <label class="weui-cell weui-check__label" for="x11">
  55.                                     <div class="weui-cell__bd">
  56.                                         <p>男</p>
  57.                                     </div>
  58.                                     <div class="weui-cell__ft">
  59.                                         <input type="radio" class="weui-check" name="radio1" id="x11" />
  60.                                         <span class="weui-icon-checked"></span>
  61.                                     </div>
  62.                                 </label>
  63.                                 <label class="weui-cell weui-check__label" for="x12">
  65.                                     <div class="weui-cell__bd">
  66.                                         <p>女</p>
  67.                                     </div>
  68.                                     <div class="weui-cell__ft">
  69.                                         <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked" />
  70.                                         <span class="weui-icon-checked"></span>
  71.                                     </div>
  72.                                 </label>
  73.                             </div>
  74.                         </div>
  75.                     </div>
  76.                     <div class="weui-cell">
  77.                         <div class="weui-cell__hd"><label class="weui-label">爱好</label></div>
  78.                         <div class="weui-cell__bd">
  79.                             <div class="weui-cells weui-cells_checkbox">
  80.                                 <label class="weui-cell weui-check__label" for="s11">
  81.                                     <div class="weui-cell__hd">
  82.                                         <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked" />
  83.                                         <i class="weui-icon-checked"></i>
  84.                                     </div>
  85.                                     <div class="weui-cell__bd">
  86.                                         <p>篮球</p>
  87.                                     </div>
  88.                                 </label>
  89.                                 <label class="weui-cell weui-check__label" for="s12">
  90.                                     <div class="weui-cell__hd">
  91.                                         <input type="checkbox" name="checkbox1" class="weui-check" id="s12" />
  92.                                         <i class="weui-icon-checked"></i>
  93.                                     </div>
  94.                                     <div class="weui-cell__bd">
  95.                                         <p>足球</p>
  96.                                     </div>
  97.                                 </label>
  98.                                 <label class="weui-cell weui-check__label" for="s13">
  99.                                     <div class="weui-cell__hd">
  100.                                         <input type="checkbox" name="checkbox1" class="weui-check" id="s13" />
  101.                                         <i class="weui-icon-checked"></i>
  102.                                     </div>
  103.                                     <div class="weui-cell__bd">
  104.                                         <p>游泳</p>
  105.                                     </div>
  106.                                 </label>
  107.                             </div>
  108.                         </div>
  109.                     </div>
  110.                     <div class="weui-cell weui-cell_select">
  111.                         <div class="weui-cell__bd">
  112.                             <select class="weui-select" name="select1">
  113.                                 <option selected="" value="1">微信号</option>
  114.                                 <option value="2">QQ号</option>
  115.                                 <option value="3">Email</option>
  116.                             </select>
  117.                         </div>
  118.                     </div>
  119.                     <div class="weui-cell weui-cell_vcode">
  120.                         <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
  121.                         <div class="weui-cell__bd">
  122.                             <input class="weui-input" type="text" placeholder="请输入验证码" />
  123.                         </div>
  124.                         <div class="weui-cell__ft">
  125.                             <img class="weui-vcode-img"  src="vcode.png" />
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.                 <div class="weui-btn-area">
  130.                     <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
  131.                 </div>
  132.             </div>
  133.         </div>
  134.     </div>
  135. </body>
  136. </html>

我们用google浏览器的移动端模式测试效果如下：

代码讲解

（1）网页上面的<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">这一句必须要有，这个和WeUI无关，是浏览器的显示比例问题。建议各位准备做移动端开发之前可以百度下viewport的含义，这样更容易理解响应式。加这一句是告诉浏览器在不同的设备上面的显示比例问题。

（2）最外面必须要有一个大的容器div，即上述代码里面的

这个标签；页面的所有标签必须放在这个里面；

（3）上述代码里面的radio和checkbox的效果是可以切换的。比如上述代码改下可以将性别这一项变成多选选，爱好这一项变成单选，你只需要将radio和checkbox切换即可。

4、其他基础组件展示

4.1、switch开关

  1. <div class="container" id="container">
  2.     <div class="page navbar js_show">
  3.         <div class="page__bd">
  4.             <div class="weui-cells__title">开关</div>
  5.             <div class="weui-cells weui-cells_form">
  6.                 <div class="weui-cell weui-cell_switch">
  7.                     <div class="weui-cell__bd">是否显示</div>
  8.                     <div class="weui-cell__ft">
  9.                         <input class="weui-switch" type="checkbox" />
  10.                     </div>
  11.                 </div>
  12.                 <div class="weui-cell weui-cell_switch">
  13.                     <div class="weui-cell__bd">是否置顶（兼容IE浏览器写法）</div>
  14.                     <div class="weui-cell__ft">
  15.                         <label for="switchCP" class="weui-switch-cp">
  16.                             <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked" />
  17.                             <div class="weui-switch-cp__box"></div>
  18.                         </label>
  19.                     </div>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </div>
  24. </div>

4.2、文本框搜索组件

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
  6.     <title>WeUI测试</title>
  7.     <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
  8.     @*<--example.css可以不引用-->*@
  9.     <link rel="stylesheet" href="/Content/weui-master/dist/example/example.css" />
  11. </head>
  12. <body>
  13.     <div class="container" id="container">
  14.         <div class="page navbar js_show">
  15.             <div class="page__bd">
  16.                 <div class="weui-search-bar" id="searchBar">
  17.                     <form class="weui-search-bar__form" onsubmit="return false;">
  18.                         <div class="weui-search-bar__box">
  19.                             <i class="weui-icon-search"></i>
  20.                             <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required />
  21.                             <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
  22.                         </div>
  23.                         <label class="weui-search-bar__label" id="searchText">
  24.                             <i class="weui-icon-search"></i>
  25.                             <span>搜索</span>
  26.                         </label>
  27.                     </form>
  28.                     <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  29.                 </div>
  30.                 <div class="weui-cells searchbar-result" id="searchResult">
  32.                 </div>
  33.             </div>
  34.         </div>
  35.     </div>
  37.     <script src="~/scripts/jquery-1.9.1.min.js"></script>
  38.     <script type="text/javascript">
  39.     $(function(){
  40.         var $searchBar = $('#searchBar'),
  41.             $searchResult = $('#searchResult'),
  42.             $searchText = $('#searchText'),
  43.             $searchInput = $('#searchInput'),
  44.             $searchClear = $('#searchClear'),
  45.             $searchCancel = $('#searchCancel');
  47.         function hideSearchResult(){
  48.             $searchResult.hide();
  49.             $searchInput.val('');
  50.         }
  51.         function cancelSearch(){
  52.             hideSearchResult();
  53.             $searchBar.removeClass('weui-search-bar_focusing');
  54.             $searchText.show();
  55.         }
  57.         $searchText.on('click', function(){
  58.             $searchBar.addClass('weui-search-bar_focusing');
  59.             $searchInput.focus();
  60.         });
  61.         $searchInput
  62.             .on('blur', function () {
  63.                 if(!this.value.length) cancelSearch();
  64.             }).on('keydown', function (event) {
  65.                 if (event.keyCode == 13) {
  66.                     alert("执行搜索");
  67.                 }
  68.             });
  69.         ;
  70.         $searchClear.on('click', function(){
  71.             hideSearchResult();
  72.             $searchInput.focus();
  73.         });
  74.         $searchCancel.on('click', function(){
  75.             cancelSearch();
  76.             $searchInput.blur();
  77.         });
  78.     });
  79.     </script>
  80. </body>
  81. </html>

4.3、正在加载、暂无更多、查看更多效果

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
  6.     <title>WeUI测试</title>
  7.     <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
  9. </head>
  10. <body>
  11.     <div class="container" id="container">
  12.         <div class="page navbar js_show">
  13.             <div class="page__bd">
  14.                 <div class="weui-loadmore">
  15.                     <i class="weui-loading"></i>
  16.                     <span class="weui-loadmore__tips">正在加载</span>
  17.                 </div>
  18.                 <div class="weui-loadmore weui-loadmore_line">
  19.                     <span class="weui-loadmore__tips">暂无数据</span>
  20.                 </div>
  21.                 <div class="weui-panel__ft">
  22.                     <a href="#" style="border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;" class="weui-cell weui-cell_access weui-cell_link">
  23.                         <div class="weui-cell__bd" style="font-size:16px;">查看更多</div>
  24.                         <span class="weui-cell__ft"></span>
  25.                     </a>
  26.                 </div>
  27.             </div>
  28.         </div>
  29.     </div>
  30. </body>
  31. </html>

4.4、图片全屏预览

首先引入必须的样式文件

  1. <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
  2. <link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" />

在body最后面引入js

  1. <script src="~/scripts/jquery-1.9.1.min.js"></script>
  2. <script src="~/Content/jquery-weui-master/dist/js/jquery-weui.min.js"></script>
  3. <script src="~/Content/jquery-weui-master/dist/js/swiper.js"></script>

需要说明的是这个效果需要jquery-weui.js组件的支持。你需要去down这个组件的dist目录，然后引用dist目录下面的swiper.js文件。这块有问题的可以单独留言。

引入相关的css与js文件之后，下面就可以开始着手写html了。

  1. <div class="container" id="container">
  2.     <div class="page navbar js_show">
  3.         <div class="page__bd">
  4.             <div class="weui-btn-area">
  5.                 <a class="weui-btn weui-btn_primary" href="javascript:" id="showQuery">浏览图片</a>
  6.             </div></div>
  7.     </div>
  8. </div>

js代码初始化

  1. script type="text/javascript">
  2.         var pb1 = $.photoBrowser({
  3.             items: [
  4.               "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg",
  5.               "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg",
  6.               "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg"
  7.             ]
  8.         });
  10.         $('#showQuery').on('click', function () {
  11.             pb1.open();  //打开
  12.         });
  13. </script>

swiper组件还提供了带图片文字描述的效果，和PC端的焦点图效果一样一样的。我们将上述js代码稍作修改：

  1. <script type="text/javascript">
  2.     var pb1 = $.photoBrowser({
  3.         items: [
  4.             {
  5.                 image: "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg",
  6.                 caption: "文字描述1"
  7.             },
  8.             {
  9.                 image: "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg",
  10.                 caption: "文字描述2"
  11.             },
  12.             {
  13.                 image: "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg",
  14.                 caption: "文字描述3"
  15.             }
  16.         ]
  17.     });
  19.     $('#showQuery').on('click', function () {
  20.         pb1.open();  //打开
  21.     });
  22. </script>

swiper组件的应用有很多可供参考的使用方式，大家可根据实际自行扩展。

5、微信开发系列文章列表

参考文章

微信公众平台技术文档-官方

Senparc.Weixin SDK + 官网示例源代码

RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录

RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍

RDIFramework.NET框架SOA解决方案（集Windows服务、WinForm形式与IIS形式发布）-分布式应用

RDIFramework.NET代码生成器全新V3.5版本发布-重大升级

 

wei UI使用的更多相关文章

  1. C# 非UI线程对控件的控制

    第一步:定义委托 public delegate void wei(string ss); 第二步:控制UI的方法 public void get1(string ss) { richTextBox1 ...

  2. UI线程异常处理方法

    当应用程序启动,创建了一个叫“main”的线程,用于管理UI相关,又叫UI线程.其他线程叫工作线程(Work Thread). Single Thread Model 一个组件的创建并不会新建一个线程 ...

  3. UI：通讯录实现

    通讯录实现草图: 代码: #pragma mark (.h文件)-------------------------------------------------------------------- ...

  4. Sub Thread to update main Thread (UI)

    Sub Thread to update main Thread (UI) main Thread :   A  has Hander.HandleMessage() to process the & ...

  5. 避免重复造轮子的UI自动化测试框架开发

    一懒起来就好久没更新文章了,其实懒也还是因为忙,今年上半年的加班赶上了去年一年的加班,加班不息啊,好了吐槽完就写写一直打算继续的自动化开发 目前各种UI测试框架层出不穷,但是万变不离其宗,驱动PC浏览 ...

  6. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  7. “四核”驱动的“三维”导航 -- 淘宝新UI（需求分析篇）

    前言 孔子说:"软件是对客观世界的抽象". 首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而 ...

  8. ABP框架 - Swagger UI 集成

    文档目录 本节内容: 简介 Asp.net Core 安装 安装Nuget包 配置 测试 Asp.net 5.x 安装 安装Nuget包 配置 测试 简介 来自它的网页:“...使用一个Swagger ...

  9. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

随机推荐

  1. Gridview基础

    gridview是封装好的,直接在设计界面使用,基本不需要写代码 1.绑定数据源 GridView最好与LinQDatasourse配合使用,相匹配绑定数据: 2.外观控制—— 点开有自动套用格式 布 ...

  2. 一本通 1434：【例题2】Best Cow Fences

    Best Cow Fences 二分答案 + 前缀和 个人认为题意没有表述清楚,本题要求的是满足题意的连续子序列(难度大大降低了有木有). 本题的精度也是非常令人陶醉,请您自行体会吧! #includ ...

  3. 阿里云栖社区dubbo 资源整理

    1.apache dubbo pdf git 地址:https://github.com/dubbo/awesome-dubbo/tree/master/slides/meetup/201905%40 ...

  4. Hadoop集群_VSFTP安装配置

    原作者写的太好了,我这个菜鸟不自觉就转载了,原文链接:http://www.cnblogs.com/xia520pi/archive/2012/05/16/2503864.html 如果,您认为阅读这 ...

  5. 严重：The web application [web01] appears to have started a thread named ...

    Tomcat报错 严重:The web application [web01] appears to have started a thread named [PooledThread-1] but ...

  6. js 字符串常用操作

    function Class_String_Common(){ //将字符串 myString 的 start位置 和 end位置 之间的内容替换为 replaceStr this.replace1 ...

  7. C#调用Lame.exe

    string lameEXE = @"D:\lame3.100\lame.exe"; string lameArgs = "-b 128"; string wa ...

  8. SQL Server2005的数据还原与备份具体步骤

    一:备份数据库步骤 1. 第一步:在开始—>程序(P)—>MicrosoftSQLserver2005—>SQLServerManagementStudio(如下图) 2. 第二步: ...

  9. 如何在腾讯云上安装Cloud Foundry

    Cloud Foundry是VMware推出的业界第一个开源PaaS云平台,它支持多种框架.语言.运行时环境.云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的 ...

  10. 怎样将英文版的Eclipse转为中文版的？

    =====>1.打开eclipse储存文件夹 =====>2.在eclipse文件中找到dropins文件 =====>3.把已经下载好的eclipse汉化包复制到dropins中 ...