在微信開發(fā)H5頁面的時(shí)候扰楼，往往借助于WeUI或者Jquery WeUI等基礎(chǔ)上進(jìn)行界面效果的開發(fā)匈睁，由于本人喜歡在Asp.net的Web界面上使用JQuery贡耽，因此比較傾向于使用 jQuery WeUI洽议，本篇隨筆結(jié)合官方案例和自己的項(xiàng)目實(shí)際開發(fā)過程的經(jīng)驗(yàn)總結(jié)低匙，對(duì)在H5頁面開發(fā)過程中設(shè)計(jì)到的界面控件進(jìn)行逐一的分析和總結(jié)，以期能夠給大家在H5頁面開發(fā)過程中提供有用的參考避消。
本篇隨筆繼續(xù)上篇隨筆《基于Jquery WeUI的微信開發(fā)H5頁面控件的經(jīng)驗(yàn)總結(jié)（1）》進(jìn)行介紹其他部分的內(nèi)容低滩。
7）條碼、二維碼生成****
在我們做一些掃碼操作的時(shí)候岩喷，我們可能需要根據(jù)一些參數(shù)生成一些URL恕沫，然后生成一個(gè)二維碼的方式，方便手機(jī)掃碼直接查看纱意，或者給一些條碼設(shè)備進(jìn)行條碼的讀取婶溯，那么這兩種情況結(jié)合起來就是二維碼和條碼的處理場景。
例如下面的處方信息展示里面，就需要這樣的場景迄委。
二維碼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
});
使用腳本處理的方式非常不錯(cuò)井氢。
8）JQuery的Ajax/Post/Get等相關(guān)處理
在我們前面很多案例代碼里面产镐，都采用了JQuery的Ajax/Post/Get/getJSON等函數(shù)佩微，它們之間很多時(shí)候可以相互替代曹铃，差異只是很少的部分。
.get( url [, data] [, callback] )倘核。如下代碼所示。
$.getJSON()是專門為ajax獲取json數(shù)據(jù)而設(shè)置的即彪，并且支持跨域調(diào)用笤虫，其語法的格式為：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: "選擇會(huì)簽人員",
items: flowUsers,
multi: true,
//min: 2,
//max: 3,
});
});
.getJSON()兩種方法祖凫，后者比前者多了一個(gè)對(duì)返回?cái)?shù)據(jù)進(jìn)行JSON轉(zhuǎn)換對(duì)象的處理琼蚯，$.get()方法需要使用下面代碼進(jìn)行JSON的轉(zhuǎn)換。
var data = $.parseJSON(json);
.post(url,[data],[callback],[type])遭庶，這個(gè)相對(duì)于$.get()的操作，使用POST方式提交稠屠。
其中的type：type為請(qǐng)求的數(shù)據(jù)類型峦睡，可以是html,xml,json等類型，如果我們?cè)O(shè)置這個(gè)參數(shù)為：json权埠，那么返回的格式則是json格式的榨了，如果沒有設(shè)置，就和$.get()返回的格式一樣攘蔽，都是字符串的龙屉。
如下代碼是我們使用.parseJSON進(jìn)行返回值JSON轉(zhuǎn)換對(duì)象的處理满俗。
$.post(url, postData, function (json) {
//轉(zhuǎn)義JSON為對(duì)象
var data = $.parseJSON(json);
if (data.Success) {
$.toptip("刪除成功转捕！", 'success');
//在界面上找到對(duì)應(yīng)控件ID，移除控件
RemoveImg();
}
else {
$.toast("操作失敗:" + data.ErrorMessage, "forbidden");
}
});
.ajax(options)五芝，其中options是一個(gè)object類型，它指明了本次ajax調(diào)用的具體參數(shù)辕万。
一般在使用FormData對(duì)象的時(shí)候枢步，我傾向于使用$.ajax進(jìn)行處理沉删，以便更多的彈性化設(shè)置。
//提交表單數(shù)據(jù)和文件
var url = "/qyH5Flow/PaymentSave?userid=@ViewBag.userid";
$.ajax({
url: url,
type: 'post',
processData: false,
contentType: false,
data: formData,
success: function (json) {
//轉(zhuǎn)義JSON為對(duì)象
var data = $.parseJSON(json);
if (data.Success) {
$.toast("保存成功醉途，稍后請(qǐng)到列表界面查看矾瑰。");
}
else {
$.toast("保存失敗:" + data.ErrorMessage, "forbidden");
}
}
});
以上就我進(jìn)行在案例里面使用的各種操作，有時(shí)候可以相互替換结蟋，根據(jù)需要選擇不同的操作方式即可脯倚。
9）JS腳本的數(shù)組對(duì)象處理
上面我們使用了各種異步的操作渔彰，如JQuery的Ajax/Post/Get/getJSON等函數(shù)操作嵌屎，經(jīng)常會(huì)涉及對(duì)數(shù)組的遍歷處理或者插入處理。
JS數(shù)組是一個(gè)很的強(qiáng)大的數(shù)組對(duì)象恍涂，支持很多復(fù)雜的操作宝惰，對(duì)數(shù)組的操作也是我們經(jīng)常處理的方式之一。
例如對(duì)于返回的數(shù)據(jù)再沧，我們一般需要進(jìn)行數(shù)組的遍歷尼夺，然后逐一追加到界面顯示，這里就需要使用$.each()函數(shù)炒瘸。
//動(dòng)態(tài)處理圖片綁定
$.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()函數(shù)另一個(gè)經(jīng)常使用的場景就是根據(jù)JQuery選擇器進(jìn)行元素集合的遍歷處理淤堵。
var itemCount = 0;
//計(jì)算單選框的選中數(shù)量
$("input[type='radio']:checked").each(function(){
itemCount += 1;
});
//復(fù)選框選中算一個(gè)
var chkName = []
$("input[type='checkbox']:checked").each(function () {
var name = $(this).attr('name');
if (chkName.indexOf(name) < 0) {
itemCount += 1;
chkName.push(name);
}
});
我們?cè)谛枰尤雽?duì)象的時(shí)候，就需要使用push()函數(shù)操作了顷扩，有時(shí)候往往和$.each()函數(shù)配合使用拐邪。
var items = [];
$.each(data, function (i, item) {
items.push({
title: item.Text, value: item.Value
});
});
或者進(jìn)行元素遍歷查詢的時(shí)候，如下代碼所示隘截。
//構(gòu)建選中的列表內(nèi)容
var list = [];
//計(jì)算單選框
$("input[type='radio']:checked").each(function () {
list.push($(this).val());
});
//計(jì)算復(fù)選框
$("input[type='checkbox']:checked").each(function () {
list.push($(this).val());
});
如果我們需要判斷某個(gè)對(duì)象是否在集合里面扎阶，我們就會(huì)用到$.inArray() 函數(shù)進(jìn)行判斷，如下代碼所示婶芭。
if ($.inArray(key, addKeyList) == -1) {
addKeyList.push(key);
addValueList.push(value);
sendList.push({ key: key, value: value});
$('#tagsToSend').addTag(value);
}
另外东臀，我們對(duì)數(shù)組還需要了解，如何移除單個(gè)或者所有的集合犀农，這個(gè)就用到了splice()函數(shù)惰赋，如下代碼所示。
addKeyList.splice(i, 1);//移除某個(gè)對(duì)象
addValueList.splice(i, 1);//移除某個(gè)對(duì)象
sendList.splice(i, 1);//移除某個(gè)對(duì)象
如果需要清空數(shù)組呵哨，常用的做法如下所示谤逼，也是使用splice()函數(shù)。
//清空用戶選擇
function ClearChoice() {
$('#tagsToSend').importTags('');
sendList.splice(0, sendList.length);//待發(fā)送的部門仇穗、標(biāo)簽流部、用戶列表
addKeyList.splice(0, addKeyList.length);//鍵的集合
addValueList.splice(0, addValueList.length);//值的集合
}
以上就是我們操作數(shù)據(jù)的時(shí)候，經(jīng)常使用的一些方法纹坐。
10）查詢即時(shí)列表展示
有時(shí)候枝冀，我們需要根據(jù)查詢的條件舞丛，對(duì)數(shù)據(jù)庫的信息進(jìn)行檢索，然后即時(shí)的顯示在列表中果漾，供選擇使用球切，如下界面所示。
上圖是我項(xiàng)目中绒障，根據(jù)拼音碼或者名稱對(duì)藥品進(jìn)行檢索吨凑，返回的數(shù)據(jù)進(jìn)行顯示的處理。
為了使用搜索欄户辱，我們使用了微信WeUI定義的搜索欄樣式鸵钝，以下是界面定義的搜索欄DIV層，如下代碼庐镐。
<!--搜索欄恩商，類似于微信原生的搜索欄，應(yīng)用于常見的搜索場景必逆。-->
<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>請(qǐng)輸入你想要查看的關(guān)鍵字</span>
</label>
</form>
<a href="javascript:clear()" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
我們?cè)贘S代碼上執(zhí)行對(duì)應(yīng)事件的處理怠堪，如下所示。
主要就是監(jiān)控Input控件的內(nèi)容變化名眉，進(jìn)行及時(shí)的查詢和內(nèi)容展示粟矿。
//查詢框輸入內(nèi)容觸發(fā)事件
$('#searchInput').bind('input propertychange', function () {
var name = $("#searchInput").val();
//獲取Json對(duì)象集合，并生成數(shù)據(jù)顯示內(nèi)容
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模板损拢，我們有時(shí)候也使用代碼塊的方式陌粹，在模板代碼里面插入變量，如下所示探橱。
$.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}'/>`);
});
});
這里的代碼塊申屹，開始和結(jié)束符使用了 符號(hào)塊，其中插入了變量{item.Value}等變量字符串哗讥，并沒有打斷模板的內(nèi)容，如果多行胞枕，我們一樣的處理杆煞，非常方便。
$.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">標(biāo)題：<span>${item.Title}</span></p>
<div class="clear mg-t-10">
<div class="pro-amount fl"><span class="font-13">當(dāng)前處理類型：<em class="num font-15">${item.Proc_TypeName}</em></span></div>
<div class="pro-amount fr"><span class="font-13">當(dāng)前處理人：<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里面定義了幾種常規(guī)的彈窗處理。
對(duì)話框只能通過 JavaScript 進(jìn)行調(diào)用铆惑，微信WeUI提供了三種常用的對(duì)話框 Alert, Confirm, Prompt 和 Login范嘱。我們也可以通過 $.modal 來自定義對(duì)話框
實(shí)際上送膳， Alert, Confirm, Prompt 和 Login 都是 Modal 的一種定制而已。
一般的JS調(diào)用代碼如下所示丑蛤。
//常規(guī)提示窗口
$.alert("自定義的消息內(nèi)容", "自定義的標(biāo)題");
//確認(rèn)提示窗口
$.confirm("自定義的消息內(nèi)容", "自定義的標(biāo)題", function() {
//點(diǎn)擊確認(rèn)后的回調(diào)函數(shù)
}, function() {
//點(diǎn)擊取消后的回調(diào)函數(shù)
});
例如我們?cè)诹鞒瘫韱翁幚砝锩娴瑫?huì)在操作前進(jìn)行提示用戶是否確認(rèn)處理。
//退回?cái)M稿人重新處理
function ApplyCancel(opinion) {
var tipMessage2 = "數(shù)據(jù)檢查完畢受裹，如確認(rèn)無誤將【退回?cái)M稿人重新處理】碌补，您確實(shí)要提交嗎？";
$.confirm(tipMessage2, "退回?cái)M稿人重新處理?", function () {
var userid = "@ViewBag.userid";
var applyid = "@Request["id"]";
var url = "/QyH5Flow/SkipFirstApply";
//構(gòu)造參數(shù)發(fā)送給后臺(tái)
var postData = {
userid: userid,
applyId: applyid,
opinion: opinion
};
$.post(url, postData, function (json) {
var data = $.parseJSON(json);
if (data.Success) {
//console.log(data);
//提示處理結(jié)果
$.toast("您已經(jīng)退回經(jīng)辦人進(jìn)行修改棉饶。");
$.closePopup();
initControls();//重新加載
}
else {
$.toast("操作失敗:" + data.ErrorMessage);
}
});
}, function () {
//取消操作
});
}
登陸窗口界面效果如下所示厦章。
$.login("自定義的消息內(nèi)容", function(username, password) {
// 這里進(jìn)行登錄操作
}, function() {
});
//如果參數(shù)過多，建議通過 object 方式傳入
$.login({
title: '標(biāo)題',
text: '內(nèi)容文案',
username: 'tom', // 默認(rèn)用戶名
password: 'tom', // 默認(rèn)密碼
onOK: function (username, password) {
//點(diǎn)擊確認(rèn)
},
onCancel: function () {
//點(diǎn)擊取消
}
});
我們可以利用登錄框進(jìn)行一個(gè)系統(tǒng)賬號(hào)的綁定砰盐，如下是實(shí)際項(xiàng)目的處理代碼闷袒。
$(document).on('click', '#btnBind', function() {
$.login({
title: '登錄',
text: '請(qǐng)輸入用戶名和密碼',
onOK: function (username, password) {
var url = "/H5/VerifyUser?openid=@ViewBag.openid";
var postData = {
username: username,
password: password
};
$.post(url, postData, function (json) {
//轉(zhuǎn)義JSON為對(duì)象
var data = $.parseJSON(json);
if (data.Success) {
$.toptip('登錄成功!');
location.reload();//刷新頁面
//WeixinJSBridge.call('closeWindow');//關(guān)閉窗口
}
else {
$.toptip("登錄失敗:" + data.ErrorMessage, "forbidden");
}
});
},
onCancel: function () {
$.toptip('取消登錄!', 'cancel');
}
});
});
上述的幾種對(duì)話框都是 .modal 來定制對(duì)話框
$.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)} },
]
});
默認(rèn)情況下岩梳，點(diǎn)擊對(duì)話框的按鈕都會(huì)先關(guān)閉對(duì)話框再觸發(fā)回調(diào)函數(shù)』卧瘢可以通過JS來關(guān)閉任何正在顯示的對(duì)話框:
$.closeModal();
除了上面的幾種情況的模態(tài)對(duì)話框冀值，還有一種是Popup彈出遮蓋下面頁面的場景，如常規(guī)的購物車的情況宫屠。
Popup 是一個(gè)覆蓋式的彈出層列疗，可以完全蓋住當(dāng)前頁面或者遮蓋一半。
例如我在流程處理頁面中浪蹂，往往需要進(jìn)行審核抵栈、會(huì)簽處理的時(shí)候，彈出對(duì)應(yīng)的處理內(nèi)容坤次，這個(gè)就是Popup的使用場景古劲。
我們通過JS進(jìn)行調(diào)用顯示窗口。
$("#SignAction").popup();//主動(dòng)彈出窗口
其中SignAction層就是一個(gè)popup的窗口層缰猴，視圖HTML代碼如下所示产艾。
我們只需要注意到 class='weui-popup__container popup-bottom' 的說明，就知道它的樣式了滑绒，從底部彈出的Popup窗口闷堡。
如果沒有加上Popup-bottom的樣式，那么就是全屏覆蓋的模式疑故。
關(guān)閉 Popup
給任何鏈接加上 class='close-popup' 則點(diǎn)擊之后可以關(guān)閉當(dāng)前打開的 popup. 你也可以通過 $.closePopup() 來關(guān)閉杠览。
12）微信JSSDK的整合等處理
微信JSSDK提供了很多豐富的功能，我們可以利用JSSDK實(shí)現(xiàn)圖片的上傳纵势、預(yù)覽踱阿、掃碼等操作误续，圖片上傳由于我使用了附件上傳的方式，因此不在介紹較為繁瑣的JSSDK圖片上傳模式扫茅，有興趣可以參考我之前隨筆《微信開發(fā)中使用微信JSSDK和使用URL.createObjectURL上傳預(yù)覽圖片的不同處理對(duì)比》了解下不同蹋嵌。
a) 圖片預(yù)覽
一般我們?cè)谝恍┎榭磧?nèi)容的視圖界面里面，往往對(duì)圖片進(jìn)行預(yù)覽操作葫隙，這時(shí)候可以利用JSSDK的圖片預(yù)覽接口栽烂，在使用JSSDK接口前，需要進(jìn)行接口的初始化恋脚，然后才能調(diào)用腺办，下面是初始化和調(diào)用的案例代碼。
<!--微信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, // 必填糟描，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: timestamp, // 必填怀喉，生成簽名的時(shí)間戳
nonceStr: noncestr, // 必填，生成簽名的隨機(jī)串
signature: signature, // 必填船响，簽名躬拢，見附錄1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
]
});
//所有準(zhǔn)備好后，通過樣式查找的方式见间，加入對(duì)應(yīng)集合聊闯，然后綁定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代碼進(jìn)行處理即可米诉。
<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) 調(diào)用掃碼處理
我們可以利用JSSDK調(diào)用手機(jī)的掃碼操作菱蔬，讓其進(jìn)行相應(yīng)的掃碼處理，如下是使用JSSDK進(jìn)行掃碼的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, // 必填拴泌，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: noncestr, // 必填惊橱，生成簽名的隨機(jī)串
signature: signature, // 必填蚪腐，簽名，見附錄1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'scanQRCode'
]
});
//所有準(zhǔn)備好后
wx.ready(function () {
document.querySelector('#scancode').onclick = function () {//調(diào)用掃碼事件返回掃碼值
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;//跳轉(zhuǎn)頁面
}
}
});
};
});
//驗(yàn)證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>
上面掃碼后李皇，識(shí)別判斷URL削茁，如果是URL，那么頁面地址自動(dòng)調(diào)整到相應(yīng)的界面上去掉房。
以上就是一些實(shí)際項(xiàng)目中運(yùn)用到的各種界面處理和JS處理代碼茧跋，拋磚引玉，希望大家多多支持和鼓勵(lì)卓囚。
