當(dāng)前位置：首頁 > 编程语言 > C# >内容正文

C#

C#开发微信门户及应用(44)--微信H5页面开发的经验总结

發(fā)布時間：2025/3/21 C# 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 C#开发微信门户及应用(44)--微信H5页面开发的经验总结小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

在我們開發(fā)微信頁面的時候，需要大量用到了各種呈現(xiàn)的效果，一般可以使用Boostrap的效果來設(shè)計不同的頁面，不過微信團(tuán)隊也提供很多這方面的資源，包括JSSDK的接口，以及Weui的頁面樣式和相關(guān)功能頁面，給我們提供了很大的便利，本文是在自己做的一些H5微信應(yīng)用頁面上做了一些功能總結(jié)，希望能夠給大家提供一定的幫助。

1、微信網(wǎng)頁開發(fā)

1) JSSDK

微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。

目前JSSDK支持的接口分類包括下面幾類：基礎(chǔ)接口、分享接口、圖像接口、音頻接口、智能接口、設(shè)備信息、地理位置、搖一搖周邊、界面操作、微信掃一掃、微信小店、微信卡券、微信支付，隨著微信功能的全部整合，估計更多的接口會陸續(xù)開放出來。

2）WeUI和Jquery WeUI

WeUI?是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，由微信官方設(shè)計團(tuán)隊為微信內(nèi)網(wǎng)頁開發(fā)量身設(shè)計，可以令用戶的使用感知更加統(tǒng)一。在微信網(wǎng)頁開發(fā)中使用 WeUI，有如下優(yōu)勢：

同微信客戶端一致的視覺效果，令所有微信用戶都能更容易地使用你的網(wǎng)站
便捷獲取快速使用，降低開發(fā)和設(shè)計成本
微信設(shè)計團(tuán)隊精心打造，清晰明確，簡潔大方

該樣式庫目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已經(jīng)在?GitHub上開源。訪問?http://weui.github.io/weui/?或微信掃碼即可預(yù)覽。

jQuery WeUI?中使用的是官方 WeUI 的 CSS 代碼，并提供了 jQuery/Zepto 版本的 API 實現(xiàn)。JQuery WeUI相對于在官方WeUI的基礎(chǔ)上做了一些功能擴(kuò)展，已豐富界面設(shè)計和相關(guān)功能，因此我們可以考慮直接基于JQuery ?WeUI的基礎(chǔ)上進(jìn)行頁面開發(fā)即可。

在我前面的一些案例中，都利用了We UI樣式來進(jìn)行很多微信H5頁面的功能設(shè)計，包括微信支付頁面、簽到頁面等等。

如微信支付頁面如下所示：

?????

以及簽到頁面效果如下所示。

當(dāng)然我們可以根據(jù)業(yè)務(wù)需要，增加很多這樣和微信色調(diào)樣式一致的頁面，這個就是利用WeUI樣式帶來的界面體驗一致性的好處。

本篇主要介紹微信H5頁面開發(fā)的經(jīng)驗總結(jié)，上面提到了利用JSSDK和WeUI來對微信應(yīng)用的H5頁面進(jìn)行開發(fā)，因此下面的相關(guān)效果也就是利用這些技術(shù)進(jìn)行處理的。

2、判斷微信瀏覽器

有些情況下，我們可能需要用戶只能在微信瀏覽器上打開，不能用其他瀏覽器去打開連接，還有就是基于一些用戶身份信息的獲取，也是需要通過微信瀏覽器才能重定向獲取的，否則使用其他瀏覽器會出錯，因此判斷是否為微信瀏覽器有時候也是一個常規(guī)的做法。

判斷是否為微信瀏覽器有兩種方式可以達(dá)到目的，一個是在前端使用JS腳本去處理，一個是采用后臺C#代碼進(jìn)行判斷處理，兩種均可以達(dá)到目的。

使用JS代碼實現(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); //請在微信中打開該頁面 }var display = "是否在微信瀏覽器中打開：";display += isWeixin ? "是" : "否";$("#isWeixin").html(display);});

如果是正常使用微信跳轉(zhuǎn)的頁面鏈接，那么上會提示為：是。

剛才提到了，使用C#后臺代碼也可以判斷是否在瀏覽器內(nèi)，一般情況下，我們可以判斷用戶的瀏覽器后做重定向，如果用戶確實是微信瀏覽器的，則繼續(xù)后面處理，否則重定向到提示頁面給用戶。

/// <summary>/// 檢查是否微信中打開，否則重定向/// </summary>/// <returns></returns>protected string CheckBrowser(){bool passed = false;string userAgent = Request.UserAgent;passed = userAgent.ToLower().Contains("micromessenger");if (!passed){var type = "warn";var message = "請在微信中打開該頁面";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);

?如果非微信瀏覽器打開頁面鏈接，重定向的頁面效果如下所示。

3、字典數(shù)據(jù)的綁定

和常規(guī)網(wǎng)頁功能一樣，我們在設(shè)計微信頁面應(yīng)用的時候，很多數(shù)據(jù)也是來源字典數(shù)據(jù)的，而且需要把它們動態(tài)綁定在頁面上，微信頁面的JQuery WeUI提供了一些列表字典數(shù)據(jù)的展示效果如下所示。

這個常規(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è)計一個公共函數(shù)，用于數(shù)據(jù)字典的綁定處理，如下所示。

//綁定字典內(nèi)容到指定的控件function BindDictItem(ctrlName, dictTypeName, onChange, onClose, onOpen) {var url = '/h5/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)用這個函數(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ù)據(jù)更新。

4、微信圖片的預(yù)覽功能

在很多頁面里面，我們需要展示豐富的圖片，我們需要結(jié)合微信的圖片預(yù)覽功能接口，我們才能把圖片打開后方便進(jìn)行縮放處理操作，那么該如何利用微信JSSDK的圖片預(yù)覽接口呢？

首先我們需要引入Jquery WeUI的樣式類庫，以及JSSDK所需的JS文件，如下所示。

然后在頁面初始化JSSDK的API腳本，如下代碼所示。

var appid = '@ViewBag.appid';var noncestr = '@ViewBag.noncestr';var signature = '@ViewBag.signature';var timestamp = '@ViewBag.timestamp';wx.config({debug: false,appId: appid, // 必填，公眾號的唯一標(biāo)識timestamp: timestamp, // 必填，生成簽名的時間戳nonceStr: noncestr, // 必填，生成簽名的隨機(jī)串signature: signature, // 必填，簽名，見附錄1 jsApiList: ['checkJsApi','chooseImage','previewImage','uploadImage','downloadImage']});//所有準(zhǔn)備好后wx.ready(function () {});

加入我們頁面里面包含有兩部分的圖片，一個是設(shè)備銘牌圖片，一個是其他附屬圖片，我們分別展示，如下HTML代碼所示。

這些代碼構(gòu)建了很多個圖片控件，也就是原始的HTML圖片控件，如果僅僅這樣做，那么只能利用網(wǎng)頁的效果，而無法利用微信瀏覽器預(yù)覽圖片，可以放大縮小的豐富功能。

為了實現(xiàn)我們說需要的功能，需要進(jìn)行一定的處理，簡單的方法，可以設(shè)計一個JS函數(shù)，然后通過JS函數(shù)來實現(xiàn)微信預(yù)覽圖片功能，代碼如下所示。

這個函數(shù)的做法，是參考網(wǎng)上一個大牛的做法，不過這樣做存在一個問題，圖片如果有多張的話，那么需要點擊第一張圖片才能開始預(yù)覽，不能點擊其他幾張開始。

為了改進(jìn)這個缺點，我們可以可以利用Razor的模板實現(xiàn)我們需要的代碼生成，如下所示集合了Razor模板生成JS代碼，實現(xiàn)了我們所需要JS代碼的生成。

JS代碼的生成后的代碼如下所示.

這樣最終就可以實現(xiàn)我們所需要的效果了，當(dāng)然多張圖片也不會有任何的問題。

本文轉(zhuǎn)自博客園伍華聰?shù)牟┛?#xff0c;原文鏈接：C#開發(fā)微信門戶及應(yīng)用(44)--微信H5頁面開發(fā)的經(jīng)驗總結(jié)，如需轉(zhuǎn)載請自行聯(lián)系原博主。

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的C#开发微信门户及应用(44)--微信H5页面开发的经验总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： OAF在打开的新页面中添加按钮，功能是关
下一篇： Ajax原理与封装