10/100百上百款款 App 体验——企业微信

每当我们付出微信页面的时光,需要大量因此到了各种表现的功用,一般可以下Boostrap的作用来设计不同之页面,不过微信团队吗提供多随即上面的资源,包括JSSDK的接口,以及Weui的页面样式和有关功能页面,给我们提供了要命老的便宜,本文是于大团结做的一对H5微信下页面上开了一些效总结,希望能被大家提供一定的扶。

今日经验软件:合作社微信

1、微信网页开发

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页面的功能设计,包括微信支付页面、签到页面等等。

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

图片 1  图片 2  图片 3 

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

图片 4 图片 5

自然我们可因工作需要,增加多这样和微信色调样式一样的页面,这个就是是运WeUI样式带来的界面体验一致性的益处。

本篇主要介绍微信H5页面开发的经验总结,上面提到了用JSSDK和WeUI来对微信下之H5页面进行支付,因此下的连带功能呢即是使用这些技能进行拍卖的。

 

icon

2、判断微信浏览器

多少情况下,我们可能需要用户只能在微信浏览器上打开,不可知用另外浏览器去开辟连接,还有即使是冲一些用户身份信息的抱,也是内需经微信浏览器才会重定向得到之,否则用另外浏览器会错,因此断定是否也微信浏览器有时候为是一个正常化的做法。

认清是否也微信浏览器有零星种植方式得以上目的,一个凡在前者采用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);
        });

图片 6

若是健康使用微信跳转的页面链接,那么上会提醒为:是。

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

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

图片 7

 

  • 感受系统:iOS 11.1.2 & MacOS 10.12.6
  • 体验本:iOS V 2.3.0(2908) & MacOS 2.3.0.1032
  • 心得时长:20+ 分钟

3、字典数据的绑定

同正规网页功能雷同,我们以统筹微信页面下的当儿,很多数码为是出自字典数据的,而且要把其动态绑定以页面及,微信页面的JQuery
WeUI提供了部分列表字典数据的来得效果如下所示。

图片 8

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

咱们看现实于微信中打开对应连接,字典绑定的效应如下所示。

图片 9

咱尽管可以微信后台对数码字典进行维护即可开展实时的数更新。

图片 10 


4、微信图片的预览功能

当许多页面中,我们用展示丰富的图片,我们得整合微信的图纸预览功能接口,我们才能够把图片打开后便于开展缩放处理操作,那么该怎么使用微信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
            });
        };

这般结尾就可以兑现我们所要之机能了,当然多摆设图纸也未会见发出外的题材。

 图片 11

 

1、产品目标:

  • 用户要求:工作及活微信分开,互不打扰。我思念你呢有一样的困扰:在当今微信作重大办公通讯工具的可怜背景下,每天你的手机会被各种工作群(公司内部)和工作群(公司标、用户)暴击得愈演愈烈。很多总人口都有这么的感觉到——卸载了微信,运行不卡了、手机不爆了、整个社会风气都平静了。这时候有一个吓工具,让自家之微信从工作备受脱身出来,再好不过。
  • 产品方战略目标:让商家重新有益于的用微信办公(原 Slogan
    为:「让每个局都来谈得来的微信」,我虽想问问之宣传语是何许人也想的,每个人犹发生微信了,每个企业发出和好之微信是啥意思?)。

2、对许功能:

  • 聊天记录保存
  • 商家邮件接收
  • 差不多企业号信息提醒
  • 商店内公共电话
  • 打卡签到;费用、假期、加班、出差审批

3、基本框架:

  • 号微信 for iOS:
企业微信 for iOS-主界面采用 Tab 框架

  • 庄微信 for MacOS:
企业微信 for MacOS

4、体验总结:

可看看:围绕企业办公,企业微信做出了成千上万息息相关的情。打卡、报销、请假,这些骨干的人事问题,企业微信基本还能够搞定。设计风格及,企业微信保持了与微信一模一样比抑制的作风,风格简洁大方,也成当前较基本的统筹要求;蓝色的主色调,给了信用社微信正式、专注的基调印象,也是办公室软件比好之选择。
不过同样我吗在陈述中之所以了「基本」一乐章,对于复杂的办公人事流程,企业微信或者无法完全胜任的。

从今极度开始还不真正面世时的百般盼望,到现行在我们公司不得不沦为签到工具,时长表现为只好算不温不火。我无详细考证了号微信一模一样当微信系推出的产品,却非获广泛应用的因由。从直观感受及粗略说说:
自看店家办公专属软件在的必要性还是有的,我自也的确不思量管工作和生活乱在一块。目前面临的景况也一览无遗:

  • 微店铺几乎独人口,不欲这种办公软件来一块人事工作
  • 中企业因此的办公协同产品各不相同,可能是店铺微信、也恐怕是钉钉
  • 重型企业发出和好之店家 OA
    里头已对各种办公软件用有明显反差了,对于外部各个企业中,如果对方公司无商店微信,你吧不可能强制对方使用。信息交流接口不统一,必然导致该类产品无法兑现各个局中的靠谱交流。你莫会见默认对方公司以使用企业微信,但毫无疑问会默认对方发生微信,这虽是「接口标准」。

作产品经理,在合作社开启用企业微信的下,我要么挺支持供销社内应用的,因为当时「保留聊天记录」的职能,是商家微信把的(我乘的凡微信
for Mac 当时凡是休享有保留聊天记录的功力的,而我们商家 70% 的口于于是
Mac)。你该能明了消息沉淀对于一个铺面的话的意义有差不多格外。可是微信今年针对微信
for Mac 进行翻新之后,我们尽管杀少还就此企业微信客户端了。

最近,企业微信在举行邀请试用得红包的移动。对于公司曾经再次就此底众人,没有员工没有参加,这个活动从未意思;对于店铺毫不此产品,没有员工会加入,这个运动同样没意思。运营移动,不为相应用场景也?
故我当差异化仍是即刻类软件会获得试用和接受的唯一会。

5、功能预测/期望:

这是自之只求:
拿注意力放在用户采取状况以及需求上,找到真正差异化又适用于办公场景下的功能。