C#开发微信门户及利用(44)–微信H5页面开发的经验总括

④ 、微信图片的预览功用

在诸多页面里面,大家要求体现丰硕的图形,大家须求结合微信的图样预览成效接口,大家才能把图片打开后便于开始展览缩放处理操作,那么该如何采纳微信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');

那一个函数的做法,是参考网上三个大牛的做法,不过如此做存在2个标题,图片若是有多张的话,那么须要点击第③张图片才能初叶预览,无法点击任何几张开头。

为了精雕细刻那几个毛病,大家可以能够动用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
            });
        };

如此这般结尾就足以兑现大家所供给的遵从了,当然多张图纸也不会有其它的题材。

 葡京签到送彩金 1

 

  • 经验系统:iOS 11.1.2 & MacOS 10.12.6
  • 心得版本:iOS V 2.3.0(2908) & MacOS 2.3.0.1032
  • 心得时间长度:20+ 分钟

在大家开发微信页面包车型大巴时候,要求多量用到了种种表现的法力,一般能够选用Boostrap的机能来设计不一样的页面,不过微信团队也提供许多那方面包车型客车财富,包含JSSDK的接口,以及Weui的页面样式和连锁功效页面,给大家提供了非常大的福利,本文是在友好做的局地H5微信应用页面上做了一些功用计算,希望能够给我们提供一定的相助。

五 、功用预测/期望:

那是本人的希望:
将注意力放在用户选取情状与供给上,找到真正差异化又适用于办公场景下的效能。

壹 、微信网页开发

1) JSSDK

微信JS-SDK是微信公众平台面向网页开发者提供的依据微信内的网页开发工具包。通过应用微信JS-SDK,网页开发者可凭借微信高效地利用油画、选图、语音、地点等手提式有线电话机系统的力量,同时能够间接采纳微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

方今JSSDK帮衬的接口分类包括上面几类:基础接口、分享接口、图像接口、音频接口、智能接口、设备音讯、地理地方、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡券、微信支付,随着微信成效的全部整合,推测更加多的接口会陆续开放出来。

2)WeUI和Jquery WeUI

WeUI
是一套同微信原生视觉感受一致的底子样式库,由微信官方布署团队为微信内网页开发量身设计,能够令用户的应用感知越发统一。在微信网页开发中利用
WeUI,有如下优势:

  • 同微信客户端一致的视觉效果,令全部微信用户都能更便于地采取你的网站
  • 方便人民群众获取便捷利用,下跌开发和统一筹划开销
  • 微信设计团队精心制作,清晰显著,简洁大方

该样式库最近包涵 button、cell、dialog、progress、toast、article、icon
等各式成分,已经在 GitHub上开源。访问 http://weui.github.io/weui/ 或微信扫码即可预览。

jQuery WeUI 中使用的是合法 WeUI 的 CSS 代码,并提供了 jQuery/Zepto
版本的 API 达成。JQuery
WeUI相对于在法定WeUI的根基上做了一些功力扩张,已丰盛界面设计和相关功效,因而大家得以考虑间接基于JQuery
 WeUI的底子上开展页面开发即可。

在自家如今的部分案例中,都利用了We
UI样式来拓展过多微信H5页面包车型的士成效设计,包蕴微信支付页面、签到页面等等。

如微信支付页面如下所示:

葡京签到送彩金 2  葡京签到送彩金 3  葡京签到送彩金 4 

以及签到页面效果如下所示。

葡京签到送彩金 5 葡京签到送彩金 6

理所当然大家得以遵照业务供给,增添很多那样和微信色调样式一样的页面,那一个就是选用WeUI样式带来的界面体验一致性的补益。

本篇首要介绍微信H5页面开发的经验总括,上边提到了利用JSSDK和WeUI来对微信应用的H5页面进行开发,因此上面包车型大巴相关功用也正是运用那些技能拓展处理的。

 

icon

贰 、判断微信浏览器

多少境况下,我们兴许须求用户只可以在微信浏览器上开拓,无法用其余浏览器去开辟连接,还有正是基于一些用户身份信息的取得,也是亟需通过微信浏览器才能重定向获取的,不然使用任何浏览器会出错,因而断定是还是不是为微信浏览器有时候也是2个符合规律化的做法。

认清是或不是为微信浏览器有三种艺术得以落成指标,3个是在前者采取JS脚本去处理,3个是行使后台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);
        });

葡京签到送彩金 7

假如是常规使用微信跳转的页面链接,那么上会提醒为:是。

刚才提到了,使用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);

 如若非微信浏览器打开页面链接,重定向的页面效果如下所示。

葡京签到送彩金 8

 

③ 、基本框架:

  • 供销合作社微信 for iOS:
企业微信 for iOS-主界面采用 Tab 框架

  • 商厦微信 for MacOS:
企业微信 for MacOS

③ 、字典数据的绑定

和健康网页效率雷同,大家在规划微信页面使用的时候,很多数额也是缘于字典数据的,而且须要把它们动态绑定在页面上,微信页面的JQuery
WeUI提供了部分列表字典数据的展现效果如下所示。

葡京签到送彩金 9

本条常规的数额绑定如下所示,如下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", "特殊情况");
            });

我们看现实在微信中开辟对应连接,字典绑定的作用如下所示。

葡京签到送彩金 10

我们则能够在微信后台对数据字典实行保障即可进行实时的多少更新。

葡京签到送彩金 11 


明天心得软件:专营商微信

一 、产品指标:

  • 用户要求:工作和生存微信分开,互不干扰。小编想你也有同样的麻烦:在今后微信作为主要办公通信工具的大背景下,每一天你的无绳电话机会被各样工作群(企业里面)和工作群(公司外部、用户)暴击得愈演愈烈。很四个人都有那样的感觉——卸载了微信,运维不卡了、手提式有线电话机不炸了、全世界都平静了。那时候有三个好工具,让自家的微信从办事中脱身出来,再好可是。
  • 出品方战略指标:让商户更方便的用微信办公(原 Slogan
    为:「让每一种公司都有谈得来的微信」,笔者就想问这几个宣传语是哪个人想的,每一个人都有微信了,每种公司有友好的微信是啥意思?)。

② 、对应成效:

  • 聊天记录保存
  • 公司邮件接收
  • 多公司号新闻提示
  • 商厦内公共电话
  • 打卡签到;开销、假日、加班、出差审查批准

四 、体验总计:

能够看到:围绕企业管理办公室公,集团微信做出了好多相关的始末。打卡、报销、请假,那一个核心的情欲难点,集团微信基本都能化解。设计风格上,集团微信用保证持了和微信一样相比较抑制的作风,风格简洁大方,也化为最近可比基本的筹划须要;蓝色的主色调,给了商家微信正式、专注的基调印象,也是办公室软件比较好的选项。
只是同样作者也在陈述中用了「基本」一词,对于复杂的办公人事流程,公司微信可能不能完全胜任的。

从最开端还未真正面世时候的特别希望,到近年来在我们集团只可以沦为签到工具,时间长度表现也不得不算是不温不火。笔者并未详尽考证过公司微信一样作为微信系推出的成品,却未拿到广泛应用的缘由。从直观感受上海南大学学概说说:
本身认为卖家办公专属软件存在的须要性依旧有的,作者作者也实在不想把工作与生活混在一起。方今面临的情况也明显:

  • 小公司几人,不供给这种办公软件来一块人事工作
  • 中等公司用的办公协同产品各分化,也许是集团微信、也大概是钉钉
  • 特大型公司有自个儿的店堂 OA
    在那之中已经对各样办公软件使用存在显明反差了,对于外部种种企业里面,假若对方企业尚未公司微信,你也不容许强制对方使用。消息沟通接口不统一,必然造成该类产品不只怕落到实处各类公司之间的可靠调换。你不会私下认可对方集团在接纳集团微信,但必然会暗中同意对方有微信,那正是「接口标准」。

作为产品经营,在铺子初步启用集团微信的时候,小编依然要命辅助供销合作社里面葡京签到送彩金,采用的,因为登时「保留聊天记录」的效益,是合营社微信独占的(笔者指的是微信
for Mac 当时是不持有保留聊天记录的法力的,而大家商户 7/10 的人在用
Mac)。你应当能清楚信息沉淀对于一个店铺来说的意思有多大。可是微信二零一九年对微信
for Mac 举办立异之后,大家就很少再用公司微信客户端了。

近来,公司微信在做特邀试用得红包的移动。对于商行一度再用的稠人广众,没有职员和工人没有投入,那一个活动从未意思;对于店铺毫不那几个产品,没有职员和工人会到场,这些活动一样没有意思。运维移动,不也应该须要场景呢?
据此作者觉得差异化依旧是那类软件能够获取试用和接受的唯一机会。