C#開發微信門戶及應用(44)--微信H5頁面開發的經驗總結

時間 2019-11-11

標籤 c# 開發微信門戶應用 h5 頁面經驗總結欄目 C# 简体版

原文原文鏈接

在咱們開發微信頁面的時候，須要大量用到了各類呈現的效果，通常可使用Boostrap的效果來設計不一樣的頁面，不過微信團隊也提供不少這方面的資源，包括JSSDK的接口，以及Weui的頁面樣式和相關功能頁面，給咱們提供了很大的便利，本文是在本身作的一些H5微信應用頁面上作了一些功能總結，但願可以給你們提供必定的幫助。javascript

一、微信網頁開發

1) JSSDKhtml

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。前端

目前JSSDK支持的接口分類包括下面幾類：基礎接口、分享接口、圖像接口、音頻接口、智能接口、設備信息、地理位置、搖一搖周邊、界面操做、微信掃一掃、微信小店、微信卡券、微信支付，隨着微信功能的所有整合，估計更多的接口會陸續開放出來。java

2）WeUI和Jquery WeUIjquery

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁開發量身設計，能夠令用戶的使用感知更加統一。在微信網頁開發中使用 WeUI，有以下優點：git

同微信客戶端一致的視覺效果，令全部微信用戶都能更容易地使用你的網站
便捷獲取快速使用，下降開發和設計成本
微信設計團隊精心打造，清晰明確，簡潔大方

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

jQuery WeUI 中使用的是官方 WeUI 的 CSS 代碼，並提供了 jQuery/Zepto 版本的 API 實現。JQuery WeUI相對於在官方WeUI的基礎上作了一些功能擴展，已豐富界面設計和相關功能，所以咱們能夠考慮直接基於JQuery WeUI的基礎上進行頁面開發便可。ajax

在我前面的一些案例中，都利用了We UI樣式來進行不少微信H5頁面的功能設計，包括微信支付頁面、簽到頁面等等。json

如微信支付頁面以下所示：數組

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

固然咱們能夠根據業務須要，增長不少這樣和微信色調樣式一致的頁面，這個就是利用WeUI樣式帶來的界面體驗一致性的好處。

本篇主要介紹微信H5頁面開發的經驗總結，上面提到了利用JSSDK和WeUI來對微信應用的H5頁面進行開發，所以下面的相關效果也就是利用這些技術進行處理的。

二、判斷微信瀏覽器

有些狀況下，咱們可能須要用戶只能在微信瀏覽器上打開，不能用其餘瀏覽器去打開鏈接，還有就是基於一些用戶身份信息的獲取，也是須要經過微信瀏覽器才能重定向獲取的，不然使用其餘瀏覽器會出錯，所以判斷是否爲微信瀏覽器有時候也是一個常規的作法。

判斷是否爲微信瀏覽器有兩種方式能夠達到目的，一個是在前端使用JS腳本去處理，一個是採用後臺C#代碼進行判斷處理，兩種都可以達到目的。

使用JS代碼實現代碼和效果以下所示。

    //判斷是否在微信中打開
    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);
        });

若是是正常使用微信跳轉的頁面連接，那麼上會提示爲：是。

剛纔提到了，使用C#後臺代碼也能夠判斷是否在瀏覽器內，通常狀況下，咱們能夠判斷用戶的瀏覽器後作重定向，若是用戶確實是微信瀏覽器的，則繼續後面處理，不然重定向到提示頁面給用戶。

        /// <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;
        }

咱們就能夠在函數開始部分進行判斷便可。

                //若是不是微信瀏覽器，則返回錯誤頁面
                var checkUrl = CheckBrowser();
                if (!string.IsNullOrEmpty(checkUrl)) return Redirect(checkUrl);

若是非微信瀏覽器打開頁面連接，重定向的頁面效果以下所示。

三、字典數據的綁定

和常規網頁功能同樣，咱們在設計微信頁面應用的時候，不少數據也是來源字典數據的，並且須要把它們動態綁定在頁面上，微信頁面的JQuery WeUI提供了一些列表字典數據的展現效果以下所示。

這個常規的數據綁定以下所示，以下JS代碼所示。

$("#job").select({
        title: "選擇職業",
        items: ["法官", "醫生", "獵人", "學生", "記者", "其餘"],
        onChange: function(d) {
          console.log(this, d);
        },
        onClose: function() {
          console.log("close");
        },
        onOpen: function() {
          console.log("open");
        },
      });

也可使用集合對象進行賦值處理，以下JS代碼所示。

    $("#in").select({
        title: "您的愛好",
        multi: true,
        min: 2,
        max: 3,
        items: [
          {
            title: "畫畫",
            value: 1,
            description: "額外的數據1"
          },
          {
            title: "打球",
            value: 2,
            description: "額外的數據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技術來填充數據，這樣能夠動態獲取後臺的字典數據，並進行頁面的綁定操做。

爲了方便，咱們能夠設計一個公共函數，用於數據字典的綁定處理，以下所示。

            //綁定字典內容到指定的控件
            function BindDictItem(ctrlName, dictTypeName, onChange, onClose, onOpen) {
                var url = '/h5/GetDictJson?dictTypeName=' + encodeURI(dictTypeName);

                //獲取Ajax的內容，並放到items集合
                var control = $('#' + ctrlName);
                var items = [];
                $.ajax({
                    type: 'GET',
                    url: url,
                    //async: false, //同步
                    dataType: 'json',
                    success: function (data) {
                        control.empty();//清空下拉框
                        //把JSON集合加到數組裏面
                        $.each(data, function (i, item) {
                            items.push({
                                title: item.Text, value: item.Value
                            });
                        });

                        //設置顯示列表
                        control.select({
                            title: "選擇" + dictTypeName,
                            items: items,
                            onChange: onChange,
                            onClose: onClose,
                            onOpen: onOpen
                        });
                    },
                    error: function (xhr, status, error) {
                        $.toast("操做失敗" + xhr.responseText); //xhr.responseText
                    }
                });
            }

那麼咱們綁定字典數據，就只須要調用這個函數就能夠很簡單實現數據字典的綁定操做了。

            $(function () {
                BindDictItem("Status", "設備狀態");
                BindDictItem("Dept", "科室");
                BindDictItem("Building", "建築物");
                BindDictItem("Floor", "樓層");
                BindDictItem("Special", "特殊狀況");
            });

咱們看具體在微信中打開對應鏈接，字典綁定的效果以下所示。

咱們則能夠在微信後臺對數據字典進行維護便可進行實時的數據更新。

四、微信圖片的預覽功能

在不少頁面裏面，咱們須要展現豐富的圖片，咱們須要結合微信的圖片預覽功能接口，咱們才能把圖片打開後方便進行縮放處理操做，那麼該如何利用微信JSSDK的圖片預覽接口呢？

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

    <script src="~/Content/wechat/jquery-weui/lib/jquery-2.1.4.js"></script>
    <script src="~/Content/wechat/jquery-weui/js/jquery-weui.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

而後在頁面初始化JSSDK的API腳本，以下代碼所示。

        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'
            ]
        });

        //全部準備好後
        wx.ready(function () {
        });

加入咱們頁面裏面包含有兩部分的圖片，一個是設備銘牌圖片，一個是其餘附屬圖片，咱們分別展現，以下HTML代碼所示。

        <div class="weui_cells_title"><h3>銘牌圖片</h3></div>
        <div class="weui_cells">
            <div class="weui_cell">
                <div id="previewImage">
                    @for (var i = 0; i < ViewBag.mainList.Count; i++)
                    {
                        <img id='mainPic_@i' src='@ViewBag.mainList[i]' alt="銘牌圖片" style="height:auto;width:100%" />
                    }
                </div>
            </div>
        </div>

        <div class="weui_cells_title"><h3>其餘圖片</h3></div>
        <div class="weui_cells">
            <div class="weui_cell">
                <div id="previewImage2">
                    <div class="weui-row">
                        @for (var i = 0; i < ViewBag.otherList.Count; i++)
                        {
                            <div class="weui-col-50">
                                <img id='otherPic_@i' src='@ViewBag.otherList[i]' alt="其餘圖片" style="height:auto;width:100%" />
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>

這些代碼構建了不少個圖片控件，也就是原始的HTML圖片控件，若是僅僅這樣作，那麼只能利用網頁的效果，而沒法利用微信瀏覽器預覽圖片，能夠放大縮小的豐富功能。

爲了實現咱們說須要的功能，須要進行必定的處理，簡單的方法，能夠設計一個JS函數，而後經過JS函數來實現微信預覽圖片功能，代碼以下所示。

        function BindClick(selector) {
            document.querySelector(selector).onclick = function (event) {
               var imgArray = [];
                var curImageSrc = $(this).attr('src');
                var oParent = $(this).parent();
                if (curImageSrc && !oParent.attr('href')) {
                    $(selector).each(function (index, el) {
                        var itemSrc = $(this).attr('src');
                        imgArray.push(itemSrc);
                    });

                    wx.previewImage({
                        current: curImageSrc,
                        urls: imgArray
                    });
                }
            }
        }
        

        BindClick('#previewImage img');
        BindClick('#previewImage2 img');

這個函數的作法，是參考網上一個大牛的作法，不過這樣作存在一個問題，圖片若是有多張的話，那麼須要點擊第一張圖片才能開始預覽，不能點擊其餘幾張開始。

爲了改進這個缺點，咱們能夠能夠利用Razor的模板實現咱們須要的代碼生成，以下所示集合了Razor模板生成JS代碼，實現了咱們所須要JS代碼的生成。

        var urls = [];
        @foreach (var url in ViewBag.mainList)
    {
        <text>urls.push('@url');</text>
    }
        @for (var i = 0; i < ViewBag.mainList.Count; i++)
    {
        <text>
        document.querySelector('#mainPic_@i').onclick = function () {
            wx.previewImage({
                current: $(this).attr("src"),//urls[@i],
                urls: urls
            });
        };
        </text>
    }

        var urlsOther = [];
        @foreach (var url in ViewBag.otherList)
    {
        <text>urlsOther.push('@url');</text>
    }
        @for (var i = 0; i < ViewBag.otherList.Count; i++)
    {
        <text>
        document.querySelector('#otherPic_@i').onclick = function () {
            wx.previewImage({
                current: $(this).attr("src"),//urls[@i],
                urls: urlsOther
            });
        };
        </text>
    }

JS代碼的生成後的代碼以下所示.

        var urls = [];
        urls.push('http://www.iqidi.com/UploadFiles/設備銘牌圖片/TIzMZl04X1iqkHMP44hXFHjQ-yyvrxS-tgwgzMGfwe9AUMTxKohcVC6w6O.jpg');
                
        document.querySelector('#mainPic_0').onclick = function () {
            wx.previewImage({
                current: $(this).attr("src"),//urls[0],
                urls: urls
            });
        };
        

        var urlsOther = [];
        urlsOther.push('http://www.iqidi.com/UploadFiles/設備銘牌圖片/lJk_LNwxTGfL5SNpmJwWyfyBONa2JRO7uzu3PJV3aGsrilPPHY2r-ymU00.jpg');
                
        document.querySelector('#otherPic_0').onclick = function () {
            wx.previewImage({
                current: $(this).attr("src"),//urls[0],
                urls: urlsOther
            });
        };