这个服务器监控微信小程序，有点意思

[jerrodpoole]

写在前面

想写一个服务器监控的网页供自己用，突发奇想能不能用小程序实现。然而遇到了一些问题，众所周知小程序请求地址必须在开发信息中手动报备并且要求域名备案。而我想实现的是可以动态添加节点，并且通过小程序直接连接到服务器，不经过第三方服务器。琢磨了一段时间做了这个，可以实现小程序和服务器的点对点连接。

特点

• 直接通过小程序和服务器的点对点连接，数据不经过第三方中转
• 不要求服务器域名备案，可以直接使用 ip，甚至局域网地址
• 看起来还挺好看的，如果不符合你的审美，可以自定义显示样式

原理

这是一个黑魔法（ hhh 开玩笑

原理很简单，是巧妙运用了小程序 image 组件的 bindload 接口，当图片加载成功时会返回图片的宽和高。也就是说一个图片能够返回两个数值，前后端约定好请求 API 后可以动态创建 image 获取一系列数值。

注意这个接口是不要求图片地址是备案域名，不用在小程序开发信息中报备。但是这种信息传递方式比较低下，只适合传递少量的信息，但是对这个需求来说足够了。

但是直接传递大体积的二进制图片很浪费带宽，解决方案是后端动态生成 svg 图片。也就是说，动态返回下面这种形式的文字信息：

<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"></svg>

详细的实现可以看这个文件

截图给你

不是所有人都有空去打开小程序，截个图放这里，长这样：

节点列表界面

自定义主题样式界面

小程序二维码和后端 github 地址

扫码或者微信搜索 miniStatus 小程序

后端项目地址：https://github.com/axipo/mini-status

（顺手求个 star

[tanranran]

LZ 思路骨骼清奇，太强了。

[dixeran]

骚操作，学到了

[proqj]

666 牛皮

[misaka19000]

哈哈哈有点意思

[zhuangjia]

有点意思

[narmgalaxy]

可以直接生成一个图片呢，把数据画在图片上。弊端 浪费流量，好处就是数据量更大了。

[narmgalaxy]

你这思路确实 np，学习了。

[hlwjia]

这思路太 np 了！

[jerrodpoole]

@narmgalaxy #6 此路不通的，wx.canvasGetImageData 需要先 CanvasContext.drawImage，而 CanvasContext.drawImage 所要绘制的网络图片要通过 getImageInfo / downloadFile 先下载，下载需要先配置开发信息，死胡同。微信几乎把所有能想到的方法都堵死了 :（

[s609926202]

@jerrodpoole 所以实际不可行喽？

[s609926202]

@s609926202 抱歉看错了，是 6 楼的不可行，😓

[jerrodpoole]

@s609926202 #10 这个提问有点模糊，不知道说的是哪个不可行
楼上说的`把数据画在图片上`的做法不可行，解释过了
利用 bindload 获取宽和高的办法是可行的，毕竟都做出来了，总不至于空口说浪费大家时间啦

[jerrodpoole]

@s609926202 #11 没事没事，消息延迟，我又跟你发了一遍

[neekeV2]

这个思路好骚啊

[Meiyun]

不错啊 写到我博客了

[qiayue]

miniStatus 转成二进制是
01101101011010010110111001101001010100110111010001100001011101000111010101110011

再每 12 位分割，最后补 0，得到
011011010110 : 1750
100101101110 : 2414
011010010101 : 1685
001101110100 : 884
011000010111 : 1559
010001110101 : 1141
011100110000 : 1840
四次请求就可以传递了
1750,2414
1685,884
1559,1141
1840,0

[jerrodpoole]

@qiayue #16 如果用到的字符有限的话，可以自制码表，甚至可以更省

[vc1]

数据转 10 进制纯数字，不知道最大到几位

[Tink]

骚气

[etouyang]

骚年, 好想法