在微信開發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/PrescriptionDetail?id=@ViewBag.Info.ID'; 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/PaymentSave?userid=@ViewBag.userid"; $.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:;\" οnclick=\"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/VerifyUser?openid=@ViewBag.openid";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.comif (!RegUrl.test(str)) {return false;}return true;}</script>

上面掃碼后，識別判斷URL，如果是URL，那么頁面地址自動調整到相應的界面上去。

以上就是一些實際項目中運用到的各種界面處理和JS處理代碼，拋磚引玉，希望大家多多支持和鼓勵。

總結

以上是生活随笔為你收集整理的基于Jquery WeUI的微信开发H5页面控件的经验总结(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。