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

这样最终就能够实现咱们所须要的效果了，固然多张图片也不会有任何的问题。