基於Jquery WeUI的微信開發H5頁面控制元件的經驗總結(2)
在微信開發H5頁面的時候，往往藉助於WeUI或者Jquery WeUI等基礎上進行介面效果的開發，由於本人喜歡在Asp.net的Web介面上使用JQuery，因此比較傾向於使用 jQuery WeUI，本篇隨筆結合官方案例和自己的專案實際開發過程的經驗總結，對在H5頁面開發過程中設計到的介面控制元件進行逐一的分析和總結，以期能夠給大家在H5頁面開發過程中提供有用的參考。
本篇隨筆繼續上篇隨筆《基於Jquery WeUI的微信開發H5頁面控制元件的經驗總結（1）》進行介紹其他部分的內容。
7）條碼、二維碼生成
在我們做一些掃碼操作的時候，我們可能需要根據一些引數生成一些URL，然後生成一個二維碼的方式，方便手機掃碼直接檢視，或者給一些條碼裝置進行條碼的讀取，那麼這兩種情況結合起來就是二維碼和條碼的處理場景。
例如下面的處方資訊展示裡面，就需要這樣的場景。
二維碼QRCode使用的地址是：https://github.com/davidshimjs/qrcodejs
條碼JsBarcode使用的地址是：https://github.com/lindell/JsBarcode
使用前，我們引入所需要的qrcodejs和JsBarcode的JS庫檔案。
<script src="~/Content/JQueryTools/qrcodejs/qrcode.min.js"></script> <script src="~/Content/JQueryTools/JsBarcode/dist/JsBarcode.all.min.js"></script>
二維碼和條碼的處理指令碼很簡單，如下JS程式碼所示。
//條碼
JsBarcode("#barcode", "@ViewBag.Info.PrescriptionNo", {
format: "CODE128",
lineColor: "#0aa",
height: 50,
displayValue: false
});
//二維碼
var url = '@ViewBag.WebsiteDomain/h5/[email protected]';
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: url, //"@ViewBag.Info.PrescriptionNo",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});使用指令碼處理的方式非常不錯。
8）JQuery的Ajax/Post/Get等相關處理
在我們前面很多案例程式碼裡面，都採用了JQuery的Ajax/Post/Get/getJSON等函式，它們之間很多時候可以相互替代，差異只是很少的部分。
$.get()方法使用GET方式來進行非同步請求，它的語法結構為：$.get( url [, data] [, callback] )。如下程式碼所示。
$.getJSON()是專門為ajax獲取json資料而設定的，並且支援跨域呼叫，其語法的格式為：getJSON(url,[data],[callback])。
var flowUsers = [];
var url = '/qyh5flow/GetCorpUser';
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
flowUsers.push({
title: item.name, value: item.userid
});
});
$("#txtSelectSignUser").select({
title: "選擇會籤人員",
items: flowUsers,
multi: true,
//min: 2,
//max: 3,
});
});
$.get()和$.getJSON()兩種方法，後者比前者多了一個對返回資料進行JSON轉換物件的處理，$.get()方法需要使用下面程式碼進行JSON的轉換。
var data = $.parseJSON(json);
$.post()方法使用POST方式來進行非同步請求，它的語法結構為：$.post(url,[data],[callback],[type])，這個相對於$.get()的操作，使用POST方式提交。
其中的type：type為請求的資料型別，可以是html,xml,json等型別，如果我們設定這個引數為：json，那麼返回的格式則是json格式的，如果沒有設定，就和$.get()返回的格式一樣，都是字串的。
如下程式碼是我們使用$.post()的函式進行資料的提交，注意我們也需要使用$.parseJSON進行返回值JSON轉換物件的處理。
$.post(url, postData, function (json) {
//轉義JSON為物件
var data = $.parseJSON(json);
if (data.Success) {
$.toptip("刪除成功！", 'success');
//在介面上找到對應控制元件ID，移除控制元件
RemoveImg();
}
else {
$.toast("操作失敗:" + data.ErrorMessage, "forbidden");
}
});
$.ajax()是jquery中通用的一個ajax封裝，其語法的格式為：$.ajax(options)，其中options是一個object型別，它指明瞭本次ajax呼叫的具體引數。
一般在使用FormData物件的時候，我傾向於使用$.ajax進行處理，以便更多的彈性化設定。
//提交表單資料和檔案 var url = "/qyH5Flow/[email protected]"; $.ajax({ url: url, type: 'post', processData: false, contentType: false, data: formData, success: function (json) { //轉義JSON為物件 var data = $.parseJSON(json); if (data.Success) { $.toast("儲存成功，稍後請到列表介面檢視。"); } else { $.toast("儲存失敗:" + data.ErrorMessage, "forbidden"); } } });
以上就我進行在案例裡面使用的各種操作，有時候可以相互替換，根據需要選擇不同的操作方式即可。
9）JS指令碼的陣列物件處理
上面我們使用了各種非同步的操作，如JQuery的Ajax/Post/Get/getJSON等函式操作，經常會涉及對陣列的遍歷處理或者插入處理。
JS陣列是一個很的強大的陣列物件，支援很多複雜的操作，對陣列的操作也是我們經常處理的方式之一。
例如對於返回的資料，我們一般需要進行陣列的遍歷，然後逐一追加到介面顯示，這裡就需要使用$.each()函式。
//動態處理圖片繫結
$.getJSON("/Qyh5Flow/GetImageList2?attachGuid=" + info.AttachGUID, function (data) {
$.each(data, function (i, item) {
$("#imgAttach").append(`<img class='weui-uploader__file' src='${item.Text}' id='img_${item.Value}'/>`);
});
});
$.each()函式另一個經常使用的場景就是根據JQuery選擇器進行元素集合的遍歷處理。
var itemCount = 0;
//計算單選框的選中數量
$("input[type='radio']:checked").each(function(){
itemCount += 1;
});
//複選框選中算一個
var chkName = []
$("input[type='checkbox']:checked").each(function () {
var name = $(this).attr('name');
if (chkName.indexOf(name) < 0) {
itemCount += 1;
chkName.push(name);
}
});
我們在需要加入物件的時候，就需要使用push()函式操作了，有時候往往和$.each()函式配合使用。
var items = [];
$.each(data, function (i, item) {
items.push({
title: item.Text, value: item.Value
});
});
或者進行元素遍歷查詢的時候，如下程式碼所示。
//構建選中的列表內容
var list = [];
//計算單選框
$("input[type='radio']:checked").each(function () {
list.push($(this).val());
});
//計算複選框
$("input[type='checkbox']:checked").each(function () {
list.push($(this).val());
});
如果我們需要判斷某個物件是否在集合裡面，我們就會用到$.inArray() 函式進行判斷，如下程式碼所示。
if ($.inArray(key, addKeyList) == -1) {
addKeyList.push(key);
addValueList.push(value);
sendList.push({ key: key, value: value});
$('#tagsToSend').addTag(value);
}
另外，我們對陣列還需要了解，如何移除單個或者所有的集合，這個就用到了splice()函式，如下程式碼所示。
addKeyList.splice(i, 1);//移除某個物件 addValueList.splice(i, 1);//移除某個物件 sendList.splice(i, 1);//移除某個物件
如果需要清空陣列，常用的做法如下所示，也是使用splice()函式。
//清空使用者選擇
function ClearChoice() {
$('#tagsToSend').importTags('');
sendList.splice(0, sendList.length);//待發送的部門、標籤、使用者列表
addKeyList.splice(0, addKeyList.length);//鍵的集合
addValueList.splice(0, addValueList.length);//值的集合
}
以上就是我們操作資料的時候，經常使用的一些方法。
10）查詢即時列表展示
有時候，我們需要根據查詢的條件，對資料庫的資訊進行檢索，然後即時的顯示在列表中，供選擇使用，如下介面所示。
上圖是我專案中，根據拼音碼或者名稱對藥品進行檢索，返回的資料進行顯示的處理。
為了使用搜索欄，我們使用了微信WeUI定義的搜尋欄樣式，以下是介面定義的搜尋欄DIV層，如下程式碼。
<!--搜尋欄，類似於微信原生的搜尋欄，應用於常見的搜尋場景。-->
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form" onkeydown="if(event.keyCode==13) 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:clear()" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>請輸入你想要檢視的關鍵字</span>
</label>
</form>
<a href="javascript:clear()" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
我們在JS程式碼上執行對應事件的處理，如下所示。
主要就是監控Input控制元件的內容變化，進行及時的查詢和內容展示。
//查詢框輸入內容觸發事件
$('#searchInput').bind('input propertychange', function () {
var name = $("#searchInput").val();
//獲取Json物件集合，並生成資料顯示內容
var url = "/h5/FindDrugWithPager?page=1&rows=5&Name=" + encodeURI(name);
$.getJSON(url, function (data) {
$("#searchContent").html("");
var html = "";
$.each(data.rows, function (i, item) {
var background = (i % 2 == 0) ? "background-color:Highlight" : "";
html += `<li>
<div class='pic'><img src='@ViewBag.WebsiteDomain/Content/images/drug.png' /></div>
<div class='text'>
<h2><i></i><span>` + item.CommonName + `</span><em>`+ item.Specification +`</em></h2>
<p>商品名：` + item.ProductName + `</p>
<p>廠 家：`+item.Manufacturer +`</p>
</div>
<a class='ture' href=\"javascript:;\" onclick=\"AddDrug('` + item.ID + `','`+ item.ProductName +`')\" ><img src='@ViewBag.WebsiteDomain/Content/images/add1-24.png'></a>
</li>`;
});
$("#searchContent").html(html);
});
});
function cancel() {
$("#searchContent").empty();
}
function clear() {
$('#searchInput').val('')
$("#searchContent").empty();
}
這裡的HTML模板，我們有時候也使用程式碼塊的方式，在模板程式碼裡面插入變數，如下所示。
$.getJSON("/Qyh5Flow/GetImageList2?attachGuid=" + info.AttachGUID, function (data) {
$.each(data, function (i, item) {
$("#previewImage").append(`<img class="weui-preview-box" src='${item.Text}' id='img_${item.Value}'/>`);
});
});
這裡的程式碼塊，開始和結束符使用了 ` ` 符號塊，其中插入了變數${item.Text} 、${item.Value}等變數字串，並沒有打斷模板的內容，如果多行，我們一樣的處理，非常方便。
$.getJSON(url, function (data) {
var html = "";
$.each(data.rows, function (i, item) {
html += `<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">
<span>${item.FormName}</span>：<span>${item.EditorName}</span>，<span>${item.Edittime}</span>
<span class="ord-status-txt-ts fr"><b>${GetStatus(item.Status)}</b></span>
</div>
<div class="weui-media-box__bd pd-10">
<div class="weui-media-box_appmsg ord-pro-list">
<div class="weui-media-box__bd">
<p class="weui-media-box__desc">標題：<span>${item.Title}</span></p>
<div class="clear mg-t-10">
<div class="pro-amount fl"><span class="font-13">當前處理型別：<em class="num font-15">${item.Proc_TypeName}</em></span></div>
<div class="pro-amount fr"><span class="font-13">當前處理人：<em class="name">${item.Proc_UserName}</em></span></div>
</div>
</div>
</div>
</div>
<div class="weui-panel__ft">
<div class="weui-cell weui-cell_access weui-cell_link oder-opt-btnbox">
<a href="${item.ViewUrl}?id=${item.ID}" class="ords-btn-dele">檢視詳情</a>
</div>
</div>
</div>`;
});
$("#" +divname).html(html);
});
這是我們推薦使用的JS程式碼塊，整塊程式碼都不影響閱讀，而且可以換行排版，非常直觀。
11）介面彈窗處理
在微信Weui裡面定義了幾種常規的彈窗處理。
對話方塊只能通過 JavaScript 進行呼叫，微信WeUI提供了三種常用的對話方塊 Alert, Confirm, Prompt 和 Login。我們也可以通過 $.modal 來自定義對話方塊
實際上， Alert, Confirm, Prompt 和 Login 都是 Modal 的一種定製而已。
一般的JS呼叫程式碼如下所示。
//常規提示視窗
$.alert("自定義的訊息內容", "自定義的標題");
//確認提示視窗
$.confirm("自定義的訊息內容", "自定義的標題", function() {
//點選確認後的回撥函式
}, function() {
//點選取消後的回撥函式
});
例如我們在流程表單處理裡面，會在操作前進行提示使用者是否確認處理。
//退回擬稿人重新處理
function ApplyCancel(opinion) {
var tipMessage2 = "資料檢查完畢，如確認無誤將【退回擬稿人重新處理】，您確實要提交嗎？";
$.confirm(tipMessage2, "退回擬稿人重新處理?", function () {
var userid = "@ViewBag.userid";
var applyid = "@Request["id"]";
var url = "/QyH5Flow/SkipFirstApply";
//構造引數傳送給後臺
var postData = {
userid: userid,
applyId: applyid,
opinion: opinion
};
$.post(url, postData, function (json) {
var data = $.parseJSON(json);
if (data.Success) {
//console.log(data);
//提示處理結果
$.toast("您已經退回經辦人進行修改。");
$.closePopup();
initControls();//重新載入
}
else {
$.toast("操作失敗:" + data.ErrorMessage);
}
});
}, function () {
//取消操作
});
}
登陸視窗介面效果如下所示。
$.login("自定義的訊息內容", function(username, password) {
// 這裡進行登入操作
}, function() {
});
//如果引數過多，建議通過 object 方式傳入
$.login({
title: '標題',
text: '內容文案',
username: 'tom', // 預設使用者名稱
password: 'tom', // 預設密碼
onOK: function (username, password) {
//點選確認
},
onCancel: function () {
//點選取消
}
});
我們可以利用登入框進行一個系統賬號的繫結，如下是實際專案的處理程式碼。
$(document).on('click', '#btnBind', function() {
$.login({
title: '登入',
text: '請輸入使用者名稱和密碼',
onOK: function (username, password) {
var url = "/H5/[email protected]";
var postData = {
username: username,
password: password
};
$.post(url, postData, function (json) {
//轉義JSON為物件
var data = $.parseJSON(json);
if (data.Success) {
$.toptip('登入成功!');
location.reload();//重新整理頁面
//WeixinJSBridge.call('closeWindow');//關閉視窗
}
else {
$.toptip("登入失敗:" + data.ErrorMessage, "forbidden");
}
});
},
onCancel: function () {
$.toptip('取消登入!', 'cancel');
}
});
});
上述的幾種對話方塊都是 $.modal 的一種特殊形式。你可以通過 $.modal 來定製對話方塊
$.modal({
title: "Hello",
text: "我是自定義的modal",
buttons: [
{ text: "支付寶", onClick: function(){ console.log(1)} },
{ text: "微信支付", onClick: function(){ console.log(2)} },
{ text: "取消", className: "default", onClick: function(){ console.log(3)} },
]
});
預設情況下，點選對話方塊的按鈕都會先關閉對話方塊再觸發回撥函式。可以通過JS來關閉任何正在顯示的對話方塊:
$.closeModal();
除了上面的幾種情況的模態對話方塊，還有一種是Popup彈出遮蓋下面頁面的場景，如常規的購物車的情況。
Popup 是一個覆蓋式的彈出層，可以完全蓋住當前頁面或者遮蓋一半。
例如我在流程處理頁面中，往往需要進行稽核、會籤處理的時候，彈出對應的處理內容，這個就是Popup的使用場景。
我們通過JS進行呼叫顯示視窗。
$("#SignAction").popup();//主動彈出視窗
其中SignAction層就是一個popup的視窗層，檢視HTML程式碼如下所示。
我們只需要注意到 class='weui-popup__container popup-bottom' 的說明，就知道它的樣式了，從底部彈出的Popup視窗。
如果沒有加上Popup-bottom的樣式，那麼就是全屏覆蓋的模式。
關閉 Popup
給任何連結加上 class='close-popup' 則點選之後可以關閉當前開啟的 popup. 你也可以通過 $.closePopup() 來關閉。
12）微信JSSDK的整合等處理
微信JSSDK提供了很多豐富的功能，我們可以利用JSSDK實現圖片的上傳、預覽、掃碼等操作，圖片上傳由於我使用了附件上傳的方式，因此不在介紹較為繁瑣的JSSDK圖片上傳模式，有興趣可以參考我之前隨筆《微信開發中使用微信JSSDK和使用URL.createObjectURL上傳預覽圖片的不同處理對比》瞭解下不同。
a) 圖片預覽
一般我們在一些檢視內容的檢視介面裡面，往往對圖片進行預覽操作，這時候可以利用JSSDK的圖片預覽介面，在使用JSSDK介面前，需要進行介面的初始化，然後才能呼叫，下面是初始化和呼叫的案例程式碼。
<!--微信API初始化-->
<script language="javascript">
var appid = '@ViewBag.appid';
var noncestr = '@ViewBag.noncestr';
var signature = '@ViewBag.signature';
var timestamp = '@ViewBag.timestamp';
wx.config({
debug: false,
appId: appid, // 必填，公眾號的唯一標識
timestamp: timestamp, // 必填，生成簽名的時間戳
nonceStr: noncestr, // 必填，生成簽名的隨機串
signature: signature, // 必填，簽名，見附錄1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
]
});
//所有準備好後，通過樣式查詢的方式，加入對應集合，然後繫結click事件
wx.ready(function () {
var $images = $(".preview").find("img");
var imgPaths = [];
$images.each(function(){
imgPaths.push(this.src);
});
$images.on("click",function(){
wx.previewImage({
current: this.src,
urls: imgPaths
});
});
});
</script>
而圖片的初始化，我們可以在HTML程式碼進行處理即可。
<div id="previewImage" class="preview">
@if (ViewBag.PresImages != null)
{
for (var i = 0; i < ViewBag.PresImages.Count; i++)
{
<img class="weui-preview-box" src='@ViewBag.PresImages[i]' alt="處方圖片">
}
}
</div>
b) 呼叫掃碼處理
我們可以利用JSSDK呼叫手機的掃碼操作，讓其進行相應的掃碼處理，如下是使用JSSDK進行掃碼的JS程式碼。
<script language="javascript">
var appid = '@ViewBag.appid';
var noncestr = '@ViewBag.noncestr';
var signature = '@ViewBag.signature';
var timestamp = '@ViewBag.timestamp';
wx.config({
debug: false,
appId: appid, // 必填，公眾號的唯一標識
timestamp: timestamp, // 必填，生成簽名的時間戳
nonceStr: noncestr, // 必填，生成簽名的隨機串
signature: signature, // 必填，簽名，見附錄1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'scanQRCode'
]
});
//所有準備好後
wx.ready(function () {
document.querySelector('#scancode').onclick = function () {//呼叫掃碼事件返回掃碼值
wx.scanQRCode({
needResult: 1,
desc: 'scanQRCode desc',
success: function (res) {
//console.log(res.resultStr);
var isUrl = CheckUrl(res.resultStr);
if (isUrl) {
location.href = res.resultStr;//跳轉頁面
}
}
});
};
});
//驗證URL字串
function CheckUrl(str) {
var RegUrl = new RegExp();
RegUrl.compile("^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$");//jihua.cnblogs.com
if (!RegUrl.test(str)) {
return false;
}
return true;
}
</script>
上面掃碼後，識別判斷URL，如果是URL，那麼頁面地址自動調整到相應的介面上去。
以上就是一些實際專案中運用到的各種介面處理和JS處理程式碼，拋磚引玉，希望大家多多支援和鼓勵。