微信公众号开发C#系列-12、微信前端开发利器：WeUI
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樣式文件
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
2、最基礎的組件樣式
下面我們以一個最基礎的表單來展示WeUI的使用方法，如下我們開發一個個人資料錄入的頁面效果。
<!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="[0-9]*" 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>
我們用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開關
<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>
4.2、文本框搜索組件
<!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>
4.3、正在加載、暫無更多、查看更多效果
<!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>
4.4、圖片全屏預覽
首先引入必須的樣式文件
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
<link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" />
在body最后面引入js
<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>
需要說明的是這個效果需要jquery-weui.js組件的支持。你需要去down這個組件的dist目錄，然后引用dist目錄下面的swiper.js文件。這塊有問題的可以單獨留言。
引入相關的css與js文件之后，下面就可以開始著手寫html了。
<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>
js代碼初始化
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>
swiper組件還提供了帶圖片文字描述的效果，和PC端的焦點圖效果一樣一樣的。我們將上述js代碼稍作修改：
<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>
swiper組件的應用有很多可供參考的使用方式，大家可根據實際自行擴展。
5、微信開發系列文章列表
微信公眾號開發C#系列-1、微信公眾平臺注冊
微信公眾號開發C#系列-2、微信公眾平臺接入指南
微信公眾號開發C#系列-3、搭建微信本地調試環境-借助花生殼實現內網穿透
微信公眾號開發C#系列-4、獲取接口調用憑證
微信公眾號開發C#系列-5、用戶和用戶組管理-支持同步
微信公眾號開發C#系列-6、消息管理-普通消息接受處理
微信公眾號開發C#系列-7、消息管理-接收事件推送
微信公眾號開發C#系列-8、自定義菜單及菜單響應事件的處理
微信公眾號開發C#系列-9、多公眾號集中管理
微信公眾號開發C#系列-10、長鏈接轉短鏈接
微信公眾號開發C#系列-11、生成帶參數二維碼應用場景
參考文章
微信公眾平臺技術文檔-官方
Senparc.Weixin SDK + 官網示例源代碼
RDIFramework.NET — 基于.NET的快速信息化系統開發框架 — 系列目錄
RDIFramework.NET ━ .NET快速信息化系統開發框架 ━ 工作流程組件介紹
RDIFramework.NET框架SOA解決方案（集Windows服務、WinForm形式與IIS形式發布）-分布式應用
RDIFramework.NET代碼生成器全新V3.5版本發布-重大升級
一路走來數個年頭，感謝RDIFramework.NET框架的支持者與使用者，大家可以通過下面的地址了解詳情。
RDIFramework.NET官方網站：http://www.rdiframework.net/
RDIFramework.NET官方博客：http://blog.rdiframework.net/
同時需要說明的，以后的所有技術文章以官方網站為準，歡迎大家收藏！
RDIFramework.NET框架由專業團隊長期打造、一直在更新、一直在升級，請放心使用！
歡迎關注RDIFramework.net框架官方公眾微信（微信號：guosisoft），及時了解最新動態。
掃描二維碼立即關注
總結
以上是生活随笔為你收集整理的微信公众号开发C#系列-12、微信前端开发利器：WeUI的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 正文获取摘要 去除html标记
- 下一篇： trace文件解读