关于钉钉投屏功能（通过企业工作台设置投屏）无法通过js取得数据的问题

在工作中，为了将业务团队的服务构建状态展示（jenkins上的数据），更好的提醒业务团队去及时的处理问题，公司决定将构建数据展示到钉钉投屏上，定时刷新。

项目前端使用vue+element+nodejs的构架，webpack打包之后生成的都是静态的html文件，通过axios进行后台请求，在功能开发的过程中没有任何问题，但是钉钉投屏却显示不出来。索性将全部的请求都注释掉，只留下html标签，页面投出来了。所以发现问题了，就是用钉钉投屏的功能不支持js从后台取数据（不知道钉钉是不是真的有这问题，也有可能我这个项目是前后端分离的问题，反正我遇到的就是这个样子的）。

所以改为另一种请求方式，xmlHttp请求后台的方式。

XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

代码如下：

var xmlHttp;
           if(window.ActiveXObject){//这里进行判断是为了兼容IE浏览器
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
           }else if(window.XMLHttpRequest){
               xmlHttp = new XMLHttpRequest();
           }

var url="*******/getScreenCiList?page=1&limit=10";//这里是请求的后端接口地址，可以改成自己的

xmlHttp.responseType = 'json'
           xmlHttp.overrideMimeType("application/json");
           xmlHttp.open("GET",url,true);//创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
           xmlHttp.onload = function(e) {
                   if (xmlHttp.status == 200) {
                   mythat.list = xmlHttp.response.pageInfo.list;//这里是返回的数据的接收
                   //mythat.listLoading = false;
               }
           };
           xmlHttp.send();//发送请求到http服务器并接收回应

以上代码即可实现向后台发送请求。xmlHttp还有很多的属性，读者可以自行了解，在进行设置循环调用即可实现数据的刷新。

在设置数据刷新的过程中还遇到了个小插曲，我在做这个功能的时候，因为用的是nodejs，所以我引入了一个node的cron插件，版本是1.7.0，因为这个插件的功能强大，可以写我们熟悉的cron表达式，时间规则定义起来多样化，可是在投屏的过程中发现，钉钉企业工作台投屏也是不支持的，郁闷至极，所以又改为了常见的js的setInterval方式，时间规则没有之前的多样化了，但也满足了需求。

希望我的经历能够帮助到你。附上我的成品，这是一个根据浏览器屏幕大小，自动调节充满的程度，自动调节字体大小和背景颜色，比较基础（后台数据计算规则、排序规则和行链接却很复杂），可能会在后续的文章中更新。

放几张测试效果图：

关于钉钉投屏功能（通过企业工作台设置投屏）无法通过js取得数据的问题相关推荐

mx播放器有没有投屏功能_芝杜DLNA投屏功能
DLNA投屏是一个非常高效实用的功能,也是众多高端家用播放器必备功能之一. 简而言之,便是把手机或平板电脑(同时支持苹果与安卓)中的界面,比如在线视频.音乐软件,直接通过播放器投射在电视机大屏幕上. ...
Axure数据大屏设计：企业客户服务数据管理大屏
今天跟大家分享一下,最近制作企业大屏的过程分享.本次讲解的是企业服务数据大屏,主要功能是企业整体客服服务能力的体现和监控.大屏以黑色背景为主,搭配浅蓝色为辅助配色.整体配色比较鲜明对比.其中大屏包含了 ...
苹果录屏功能没有声音_手机录屏没有声音如何处理？可以从这三个方面入手看看...
先点击"科学舍",再点击"关注",这样您就可以免费收到我们的最新内容了,每天都会有更新,完全是免费订阅,请放心关注.本文转自网络,著作权属归原创者所有.如有侵权 ...
Windows系统自带录屏功能，再也不用下录屏软件了
使用 Xbox Game Bar 录屏只需要点击搜索图标(或通过快捷键[Win+S]打开)搜索,运行[Xbox Game Bar],或者直接通过[Win+G]快捷键打开就可以啦~ 捕获图标不可用可 ...
python如何设置清屏功能_Python的IDEL增加清屏功能实例
为idle增加一个清屏的扩展ClearWindow就可以了(在http://bugs.python.org/issue6143中可以看到这个扩展的说明). 下面我说安装使用的方法.首先下载clearw ...
Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
小米android n 分屏,小米分屏功能是什么小米Max2分屏模式怎么开启？
小米在今天下午召开了新品发布会,这次的发布会中主要是发布新手机小米Max 2,其最大的亮点就是分屏模式,很多小伙伴对这个不大了解,小米分屏功能是什么,小米Max2分屏模式怎么开启,下面小编就来为大家介 ...
qt实现锁屏功能，即点击锁屏按钮后再点击界面则无效
qt实现锁屏功能,就像我们在使用视频软件的时候,会有一个锁的图标,点击后屏幕就不会被误触. 我想要实现的功能是:在点击了右下角的锁的图标之后,界面上的内容就不能点击了,也就是点击关闭是没有响应的,这样 ...
如何设置电脑锁屏时间_电脑如何设置多屏显示？多屏显示的设置方法
多屏电脑即一台主机 ,二台显示器(或者三屏,四屏,六屏),一套键盘鼠标实现快速切换,各屏幕完全独立显示运行各自程序.接下来,我就教大家如何设置电脑多屏显示电脑双屏显示如何设置呢?现在电脑已成为我们必 ...

关于钉钉投屏功能（通过企业工作台设置投屏）无法通过js取得数据的问题

关于钉钉投屏功能（通过企业工作台设置投屏）无法通过js取得数据的问题相关推荐

最新文章

热门文章