微信公众号开发C#系列-12、微信前端开发利器：WeUI
<h2 id="1前言">1、前言</h2><p>通过前面系列文章的学习与讲解，相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜，剩下的就是前端了。关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病，对于微信开发前端组件这一块总是找不到合适的移动端组件，什么都要自己去实现，这个开发成本就大了去了。于是乎博主打算另辟蹊径，找找基于微信开发的移动端UI组件，最后找到了微信官方开发的一套前端组件：WeUI。</p>
<h2 id="2weui基本介绍">2、WeUI基本介绍</h2>
<h3 id="21-weui概述">2.1 WeUI概述</h3>
<p>WeUI、微信公众号开发的瑞士军刀。WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。有了这个作为基础，我们再也不用担心微信开发的浏览器兼容性问题了，微信官方推出的这个东西拯救了千千万万的开发者！</p>
<p>jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。</p>
<p>jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue， 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。</p>
<p>WeUI开源地址：https://github.com/Tencent/weui</p>
<p>WeUI使用示例：https://weui.io/</p>
<p>基于jquery的WeUI：http://jqweui.com/（提供了大量的第三方组件库）</p>
<h3 id="22-为什么选择jquery-weui">2.2 为什么选择jQuery WeUI</h3>
<p>jQuery WeUI 的定位正如 jQuery 的定位：做一把锋利易用的小刀，而不是做一个笨重的大炮。</p>
<ul>
<li>简单易用，无上手难度</li>
<li>丰富强大的组件库，并且还在不断完善中</li>
<li>轻量，无限制，可以结合任何主流JS框架使用，比如 <code>Vue, Angular, React</code> 等</li>
<li>高性能的 CSS3 动画，低端手机上依然可以较流畅运行</li>
<li>详尽完善的官方文档</li>
<li>标准稳定的API，基本可以保证版本透明更新</li>
<li>基于 MIT 协议发布，免费开源</li>
</ul>
<p>下面引用几张WeUI官方提供的jQuery WeUI组件展示。<br>
<img src="https://img2018.cnblogs.com/blog/157572/201905/157572-20190528112347412-388998338.png" alt="jQuery WeUI组件展示" loading="lazy"><br>
<img src="https://img2018.cnblogs.com/blog/157572/201905/157572-20190528112354037-147014023.png" alt="jQuery WeUI组件展示" loading="lazy"></p>
<h2 id="3jquery-weui基本用法">3、jQuery WeUI基本用法</h2>
<p>考虑到大家对WeUI组件的使用有忧虑，不知如何下手。下面我就从最基础的开始，手把手教你入门WeUI。已经很熟悉的朋友请直接跳过此段，前往官方网站查看demo。</p>
<p><strong>1、引用必须的文件</strong></p>
<p>如果你用的是原始的开发方式，比如基于jQuery的开发，那么你首先需要去Github上面将WeUI的源文件down下来，然后引入到你的项目；如果是基于npm管理组件，使用npm命令的方式引入WeUI组件即可。这里我们使用的是原始的开发方式。如果你只需要WeUI的css样式支持，那么你只需要引入weui.css文件即可；如果除了样式之外，还需要WeUI的js组件支持，那么你还需要引用另外一个包：weui.js。下面先介绍基础的WeUI样式库，先来看看WeUI到底能为我们带来啥，后面再来分享WeUI.js以及jquery.WeUI.js的相关技术。</p>
<p>要使用WeUI,这里首先必须引入css样式文件</p>
<pre><code><link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
</code></pre>
<p><strong>2、最基础的组件样式</strong></p>
<p>下面我们以一个最基础的表单来展示WeUI的使用方法，如下我们开发一个个人资料录入的页面效果。</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>个人资料录入</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" />
</head>
<body>
<div class="container">
<div class="page navbar js_show">
<div class="page__bd">
<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">姓名</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="请输入姓名" />
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">QQ</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="*" placeholder="QQ号" />
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd">
<label class="weui-label">手机号</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder="请输入手机号" />
</div>
<div class="weui-cell__ft">
<button class="weui-vcode-btn">获取验证码</button>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">出生日期</label></div>
<div class="weui-cell__bd">
<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">
<input class="weui-input" type="datetime-local" value="" placeholder="" />
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">性别</label></div>
<div class="weui-cell__bd">
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>男</p>
</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">
<p>女</p>
</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>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">爱好</label></div>
<div class="weui-cell__bd">
<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">
<p>篮球</p>
</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">
<p>足球</p>
</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">
<p>游泳</p>
</div>
</label>
</div>
</div>
</div>
<div class="weui-cell weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">微信号</option>
<option value="2">QQ号</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="请输入验证码" />
</div>
<div class="weui-cell__ft">
<img class="weui-vcode-img"src="vcode.png" />
</div>
</div>
</div>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
</div>
</body>
</html>
</code></pre>
<p>我们用google浏览器的移动端模式测试效果如下：</p>
<p><img src="https://img2018.cnblogs.com/blog/157572/201905/157572-20190528112417183-49429317.png" alt="个人资料录入" loading="lazy"></p>
<p><strong>代码讲解</strong></p>
<p>（1）网页上面的<code><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"></code>这一句必须要有，这个和WeUI无关，是浏览器的显示比例问题。建议各位准备做移动端开发之前可以百度下viewport的含义，这样更容易理解响应式。加这一句是告诉浏览器在不同的设备上面的显示比例问题。</p>
<p>（2）最外面必须要有一个大的容器div，即上述代码里面的 <em></em></p><div class="container" id="container"> 这个标签；页面的所有标签必须放在这个里面；<p></p>
<p>（3）上述代码里面的radio和checkbox的效果是可以切换的。比如上述代码改下可以将性别这一项变成多选选，爱好这一项变成单选，你只需要将radio和checkbox切换即可。</p>
<h2 id="4其他基础组件展示">4、其他基础组件展示</h2>
<h3 id="41switch开关">4.1、switch开关</h3>
<pre><code><div class="container" id="container">
<div class="page navbar js_show">
<div class="page__bd">
<div class="weui-cells__title">开关</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd">是否显示</div>
<div class="weui-cell__ft">
<input class="weui-switch" type="checkbox" />
</div>
</div>
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd">是否置顶（兼容IE浏览器写法）</div>
<div class="weui-cell__ft">
<label for="switchCP" class="weui-switch-cp">
<input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked" />
<div class="weui-switch-cp__box"></div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</code></pre>
<p><img src="https://img2018.cnblogs.com/blog/157572/201905/157572-20190528112433038-129684652.png" alt="switch开关" loading="lazy"></p>
<h3 id="42文本框搜索组件">4.2、文本框搜索组件</h3>
<pre><code><!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>WeUI测试</title>
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
@*<--example.css可以不引用-->*@
<link rel="stylesheet" href="/Content/weui-master/dist/example/example.css" />
</head>
<body>
<div class="container" id="container">
<div class="page navbar js_show">
<div class="page__bd">
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form" onsubmit="return false;">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required />
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-cells searchbar-result" id="searchResult">
</div>
</div>
</div>
</div>
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $searchBar = $('#searchBar'),
$searchResult = $('#searchResult'),
$searchText = $('#searchText'),
$searchInput = $('#searchInput'),
$searchClear = $('#searchClear'),
$searchCancel = $('#searchCancel');
function hideSearchResult(){
$searchResult.hide();
$searchInput.val('');
}
function cancelSearch(){
hideSearchResult();
$searchBar.removeClass('weui-search-bar_focusing');
$searchText.show();
}
$searchText.on('click', function(){
$searchBar.addClass('weui-search-bar_focusing');
$searchInput.focus();
});
$searchInput
.on('blur', function () {
if(!this.value.length) cancelSearch();
}).on('keydown', function (event) {
if (event.keyCode == 13) {
alert("执行搜索");
}
});
;
$searchClear.on('click', function(){
hideSearchResult();
$searchInput.focus();
});
$searchCancel.on('click', function(){
cancelSearch();
$searchInput.blur();
});
});
</script>
</body>
</html>
</code></pre>
<p><img src="http://doc.rdiframework.net/blog/gif/%E6%96%87%E6%9C%AC%E6%A1%86%E6%90%9C%E7%B4%A2%E7%BB%84%E4%BB%B6.gif" alt="文本框搜索组件" loading="lazy"></p>
<h3 id="43正在加载暂无更多查看更多效果">4.3、正在加载、暂无更多、查看更多效果</h3>
<pre><code><!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>WeUI测试</title>
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
</head>
<body>
<div class="container" id="container">
<div class="page navbar js_show">
<div class="page__bd">
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
<div class="weui-loadmore weui-loadmore_line">
<span class="weui-loadmore__tips">暂无数据</span>
</div>
<div class="weui-panel__ft">
<a href="#" style="border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd" style="font-size:16px;">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
</code></pre>
<p><img src="http://doc.rdiframework.net/blog/gif/%E6%AD%A3%E5%9C%A8%E5%8A%A0%E8%BD%BD%E3%80%81%E6%9A%82%E6%97%A0%E6%9B%B4%E5%A4%9A%E3%80%81%E6%9F%A5%E7%9C%8B%E6%9B%B4%E5%A4%9A%E6%95%88%E6%9E%9C.gif" alt="正在加载、暂无更多、查看更多效果" loading="lazy"></p>
<h3 id="44图片全屏预览">4.4、图片全屏预览</h3>
<p>首先引入必须的样式文件</p>
<pre><code><link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
<link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" />
</code></pre>
<p>在body最后面引入js</p>
<pre><code><script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/Content/jquery-weui-master/dist/js/jquery-weui.min.js"></script>
<script src="~/Content/jquery-weui-master/dist/js/swiper.js"></script>
</code></pre>
<p>需要说明的是这个效果需要jquery-weui.js组件的支持。你需要去down这个组件的dist目录，然后引用dist目录下面的swiper.js文件。这块有问题的可以单独留言。</p>
<p>引入相关的css与js文件之后，下面就可以开始着手写html了。</p>
<pre><code><div class="container" id="container">
<div class="page navbar js_show">
<div class="page__bd">
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:" id="showQuery">浏览图片</a>
</div></div>
</div>
</div>
</code></pre>
<p>js代码初始化</p>
<pre><code>script type="text/javascript">
var pb1 = $.photoBrowser({
items: [
"/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg",
"/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg",
"/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg"
]
});
$('#showQuery').on('click', function () {
pb1.open();//打开
});
</script>
</code></pre>
<p><img src="http://doc.rdiframework.net/blog/gif/%E5%9B%BE%E7%89%87%E5%85%A8%E5%B1%8F%E9%A2%84%E8%A7%88.gif" alt="图片全屏预览" loading="lazy"></p>
<p>swiper组件还提供了带图片文字描述的效果，和PC端的焦点图效果一样一样的。我们将上述js代码稍作修改：</p>
<pre><code><script type="text/javascript">
var pb1 = $.photoBrowser({
items: [
{
image: "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg",
caption: "文字描述1"
},
{
image: "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg",
caption: "文字描述2"
},
{
image: "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg",
caption: "文字描述3"
}
]
});
$('#showQuery').on('click', function () {
pb1.open();//打开
});
</script>
</code></pre>
<p><img src="http://doc.rdiframework.net/blog/gif/%E5%9B%BE%E7%89%87%E5%85%A8%E5%B1%8F%E9%A2%84%E8%A7%881.gif" alt="图片全屏预览1" loading="lazy"></p>
<p>swiper组件的应用有很多可供参考的使用方式，大家可根据实际自行扩展。</p>
<h2 id="5微信开发系列文章列表">5、微信开发系列文章列表</h2>
<ul>
<li>
<p>微信公众号开发C#系列-1、微信公众平台注册</p>
</li>
<li>
<p>微信公众号开发C#系列-2、微信公众平台接入指南</p>
</li>
<li>
<p>微信公众号开发C#系列-3、搭建微信本地调试环境-借助花生壳实现内网穿透</p>
</li>
<li>
<p>微信公众号开发C#系列-4、获取接口调用凭证</p>
</li>
<li>
<p>微信公众号开发C#系列-5、用户和用户组管理-支持同步</p>
</li>
<li>
<p>微信公众号开发C#系列-6、消息管理-普通消息接受处理</p>
</li>
<li>
<p>微信公众号开发C#系列-7、消息管理-接收事件推送</p>
</li>
<li>
<p>微信公众号开发C#系列-8、自定义菜单及菜单响应事件的处理</p>
</li>
<li>
<p>微信公众号开发C#系列-9、多公众号集中管理</p>
</li>
<li>
<p>微信公众号开发C#系列-10、长链接转短链接</p>
</li>
<li>
<p>微信公众号开发C#系列-11、生成带参数二维码应用场景</p>
</li>
</ul>
<h2 id="参考文章">参考文章</h2>
<p>微信公众平台技术文档-官方</p>
<p>Senparc.Weixin SDK + 官网示例源代码</p>
<p>RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录</p>
<p>RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍</p>
<p>RDIFramework.NET框架SOA解决方案（集Windows服务、WinForm形式与IIS形式发布）-分布式应用</p>
<p>RDIFramework.NET代码生成器全新V3.5版本发布-重大升级</p>
<hr>
<p>一路走来数个年头，感谢RDIFramework.NET框架的支持者与使用者，大家可以通过下面的地址了解详情。</p>
<p>RDIFramework.NET官方网站：http://www.rdiframework.net/</p>
<p>RDIFramework.NET官方博客：http://blog.rdiframework.net/</p>
<p>同时需要说明的，以后的所有技术文章以官方网站为准，欢迎大家收藏！</p>
<p>RDIFramework.NET框架由专业团队长期打造、一直在更新、一直在升级，请放心使用！</p>
<p>欢迎关注RDIFramework.net框架官方公众微信（微信号：guosisoft），及时了解最新动态。</p>
<p>扫描二维码立即关注</p>
<p><img src="http://doc.rdiframework.net/blog/article/20180822094544955.png" alt="微信号：guosisoft" loading="lazy"></p>
</div>
</div>
<div id="MySignature" role="contentinfo">
<span style="font-size:10pt;">
</span>
<p>
<br />
</p>
<p style="background-color:#f8f8ee;font-family:微软雅黑;font-size:12px;" id="mySignature">
<span style="font-size:10pt;">作者：</span>
<strong>
<span style="color:red;font-size:12px;">
<span>
<span style="font-size:10pt;">RDIF</span>
</span>
</span>
</strong>
<br />
<span style="font-size:10pt;">出处：</span>
<span style="font-size:10pt;">http://www.cnblogs.com/huyong/</span>
<br />
<span style="font-size:10pt;">Email：</span>
<span style="font-size:10pt;">406590790@qq.com</span>
<br />
<span style="font-size:10pt;">QQ：</span>
<span style="font-size:10pt;">406590790</span>
<br />
<span style="font-size:10pt;">微信：</span>
<span style="font-size:10pt;">13005007127(同手机号)</span>
<br />
<span style="font-size:10pt;">框架官网：</span>
<span style="font-size:10pt;">http://www.guosisoft.com/</span>
<span style="font-size:10pt;">http://www.rdiframework.net/</span>
<br />
<span style="font-size:10pt;">框架其他博客：</span>
<span style="font-size:10pt;">http://blog.csdn.net/chinahuyong</span>
<br />
<span style="font-size:10pt;">http://www.cnblogs.com/huyong</span>
<br />
<span style="font-size:10pt;">国思RDIF开发框架</span>
，
<span style="font-size:10pt;color:#FFFFFF;background-color:#009900;">给用户和开发者最佳的.Net框架平台方案，为企业快速构建跨平台、企业级的应用提供强大支持。</span>
<br />
<span style="font-size:10pt;">关于作者：系统架构师、信息系统项目管理师、DBA。专注于微软平台项目架构、管理和企业解决方案，多年项目开发与管理经验，曾多次组织并开发多个大型项目，在面向对象、面向服务以及数据库领域有一定的造诣。现主要从事基于</span>
<span style="font-size:10pt;">RDIF</span>
<span style="font-size:10pt;">框架的技术开发、咨询工作，主要服务于金融、医疗卫生、铁路、电信、物流、物联网、制造、零售等行业。</span>
<br />
<span style="font-size:10pt;">如有问题或建议，请多多赐教！</span>
<br />
<span style="font-size:10pt;">本文版权归作者和CNBLOGS博客共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过微信、邮箱、QQ等联系我，非常感谢。</span>
</p><br><br>
来源：https://www.cnblogs.com/huyong/p/10936109.html
頁:
[1]