這篇文章將為大家詳細(xì)講解有關(guān)C#如何實(shí)現(xiàn)微信H5頁面開發(fā)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
1) JSSDK
微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)。
目前JSSDK支持的接口分類包括下面幾類：基礎(chǔ)接口、分享接口、圖像接口、音頻接口、智能接口、設(shè)備信息、地理位置、搖一搖周邊、界面操作、微信掃一掃、微信小店、微信卡券、微信支付，隨著微信功能的全部整合，估計(jì)更多的接口會陸續(xù)開放出來。
2）WeUI和Jquery WeUI
WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁開發(fā)量身設(shè)計(jì)，可以令用戶的使用感知更加統(tǒng)一。在微信網(wǎng)頁開發(fā)中使用 WeUI，有如下優(yōu)勢：
同微信客戶端一致的視覺效果，令所有微信用戶都能更容易地使用你的網(wǎng)站
便捷獲取快速使用，降低開發(fā)和設(shè)計(jì)成本
微信設(shè)計(jì)團(tuán)隊(duì)精心打造，清晰明確，簡潔大方
該樣式庫目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已經(jīng)在 GitHub上開源。訪問 http://www.php.cn/ 或微信掃碼即可預(yù)覽。
jQuery WeUI 中使用的是官方 WeUI 的 CSS 代碼，并提供了 jQuery/Zepto 版本的 API 實(shí)現(xiàn)。JQuery WeUI相對于在官方WeUI的基礎(chǔ)上做了一些功能擴(kuò)展，已豐富界面設(shè)計(jì)和相關(guān)功能，因此我們可以考慮直接基于JQuery WeUI的基礎(chǔ)上進(jìn)行頁面開發(fā)即可。
在我前面的一些案例中，都利用了We UI樣式來進(jìn)行很多微信H5頁面的功能設(shè)計(jì)，包括微信支付頁面、簽到頁面等等。
如微信支付頁面如下所示：
以及簽到頁面效果如下所示。
當(dāng)然我們可以根據(jù)業(yè)務(wù)需要，增加很多這樣和微信色調(diào)樣式一致的頁面，這個(gè)就是利用WeUI樣式帶來的界面體驗(yàn)一致性的好處。
本篇主要介紹微信H5頁面開發(fā)的經(jīng)驗(yàn)總結(jié)，上面提到了利用JSSDK和WeUI來對微信應(yīng)用的H5頁面進(jìn)行開發(fā)，因此下面的相關(guān)效果也就是利用這些技術(shù)進(jìn)行處理的。
有些情況下，我們可能需要用戶只能在微信瀏覽器上打開，不能用其他瀏覽器去打開連接，還有就是基于一些用戶身份信息的獲取，也是需要通過微信瀏覽器才能重定向獲取的，否則使用其他瀏覽器會出錯，因此判斷是否為微信瀏覽器有時(shí)候也是一個(gè)常規(guī)的做法。
判斷是否為微信瀏覽器有兩種方式可以達(dá)到目的，一個(gè)是在前端使用JS腳本去處理，一個(gè)是采用后臺C#代碼進(jìn)行判斷處理，兩種均可以達(dá)到目的。
使用JS代碼實(shí)現(xiàn)代碼和效果如下所示。
重慶分公司
重慶分公司
//判斷是否在微信中打開
function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true;
} else { return false;
}
}在頁面輸出處理如下所示。
$(function () { var isWeixin = isWeiXin(); if (isWeixin) {
$("#weixin").html(window.navigator.userAgent); //請?jiān)谖⑿胖写蜷_該頁面 } var display = "是否在微信瀏覽器中打開：";
display += isWeixin ? "是" : "否";
$("#isWeixin").html(display);
});
如果是正常使用微信跳轉(zhuǎn)的頁面鏈接，那么上會提示為：是。
剛才提到了，使用C#后臺代碼也可以判斷是否在瀏覽器內(nèi)，一般情況下，我們可以 判斷用戶的瀏覽器后做重定向，如果用戶確實(shí)是微信瀏覽器的，則繼續(xù)后面處理，否則重定向到提示頁面給用戶。
////// 檢查是否微信中打開，否則重定向 /// ///protected string CheckBrowser() { bool passed = false; string userAgent = Request.UserAgent; passed = userAgent.ToLower().Contains("micromessenger"); if (!passed) { var type = "warn"; var message = "請?jiān)谖⑿胖写蜷_該頁面"; var url = string.Format("{0}/H5/info?type={1}&message={2}", ConfigData.WebsiteDomain, type, message); return url; } return null; }
我們就可以在函數(shù)開始部分進(jìn)行判斷即可。
//如果不是微信瀏覽器，則返回錯誤頁面 var checkUrl = CheckBrowser(); if (!string.IsNullOrEmpty(checkUrl)) return Redirect(checkUrl);
如果非微信瀏覽器打開頁面鏈接，重定向的頁面效果如下所示。
和常規(guī)網(wǎng)頁功能一樣，我們在設(shè)計(jì)微信頁面應(yīng)用的時(shí)候，很多數(shù)據(jù)也是來源字典數(shù)據(jù)的，而且需要把它們動態(tài)綁定在頁面上，微信頁面的JQuery WeUI提供了一些列表字典數(shù)據(jù)的展示效果如下所示。
這個(gè)常規(guī)的數(shù)據(jù)綁定如下所示，如下JS代碼所示。
$("#job").select({
title: "選擇職業(yè)",
items: ["法官", "醫(yī)生", "獵人", "學(xué)生", "記者", "其他"],
onChange: function(d) {
console.log(this, d);
},
onClose: function() {
console.log("close");
},
onOpen: function() {
console.log("open");
},
});也可以使用集合對象進(jìn)行賦值處理，如下JS代碼所示。
$("#in").select({
title: "您的愛好",
multi: true,
min: 2,
max: 3,
items: [
{
title: "畫畫",
value: 1,
description: "額外的數(shù)據(jù)1"
},
{
title: "打球",
value: 2,
description: "額外的數(shù)據(jù)2"
}
],
beforeClose: function(values, titles) { if(values.indexOf("6") !== -1) {
$.toast("不能選打球", "cancel"); return false;
} return true;
},
onChange: function(d) {
console.log(this, d);
}
});基于上面的JS腳本，我們選擇后者，使用Ajax技術(shù)來填充數(shù)據(jù)，這樣可以動態(tài)獲取后臺的字典數(shù)據(jù)，并進(jìn)行頁面的綁定操作。
為了方便，我們可以設(shè)計(jì)一個(gè)公共函數(shù)，用于數(shù)據(jù)字典的綁定處理，如下所示。
//綁定字典內(nèi)容到指定的控件
function BindDictItem(ctrlName, dictTypeName, onChange, onClose, onOpen) { var url = '/h6/GetDictJson?dictTypeName=' + encodeURI(dictTypeName); //獲取Ajax的內(nèi)容，并放到items集合
var control = $('#' + ctrlName); var items = [];
$.ajax({
type: 'GET',
url: url, //async: false, //同步
dataType: 'json',
success: function (data) {
control.empty();//清空下拉框
//把JSON集合加到數(shù)組里面
$.each(data, function (i, item) {
items.push({
title: item.Text, value: item.Value
});
}); //設(shè)置顯示列表 control.select({
title: "選擇" + dictTypeName,
items: items,
onChange: onChange,
onClose: onClose,
onOpen: onOpen
});
},
error: function (xhr, status, error) {
$.toast("操作失敗" + xhr.responseText); //xhr.responseText }
});
}那么我們綁定字典數(shù)據(jù)，就只需要調(diào)用這個(gè)函數(shù)就可以很簡單實(shí)現(xiàn)數(shù)據(jù)字典的綁定操作了。
$(function () {
BindDictItem("Status", "設(shè)備狀態(tài)");
BindDictItem("Dept", "科室");
BindDictItem("Building", "建筑物");
BindDictItem("Floor", "樓層");
BindDictItem("Special", "特殊情況");
});我們看具體在微信中打開對應(yīng)連接，字典綁定的效果如下所示。
我們則可以在微信后臺對數(shù)據(jù)字典進(jìn)行維護(hù)即可進(jìn)行實(shí)時(shí)的數(shù)據(jù)更新。
在很多頁面里面，我們需要展示豐富的圖片，我們需要結(jié)合微信的圖片預(yù)覽功能接口，我們才能把圖片打開后方便進(jìn)行縮放處理操作，那么該如何利用微信JSSDK的圖片預(yù)覽接口呢？
首先我們需要引入Jquery WeUI的樣式類庫，以及JSSDK所需的JS文件，如下所示。
