网络延迟监控小程序 | 野狗小程序开发大赛作品分享

1,368 阅读2分钟
原文链接: mp.weixin.qq.com

好吧,我研究小程序时间不是很长,但是我使用野狗的时间比较长,应该有一年多。对野狗擅长做什么比较了解。所以,我做了一个监控网络延迟的一个小程序,其后台使用野狗。下面让我来说一说我是怎么做的。





1. 后端实现


首先,通过网络爬虫的方式爬到了联通和电信的相关节点的网络延迟数据(通过Python进行数据爬取的)。


拿到数据之后,下面做的事情就是在服务器把数据写进野狗。这个地方我使用的野狗的REST API。野狗并没有提供各个语言的支持,想想也理解,毕竟Firebase也都没有做Python平台的。


2. WXML&WXSS


界面就是通过Flex布局写的,没有其他技巧,毕竟是一个工具,没有那么复杂的布局。


3. JavaScript


上面说了,自己通过Python把数据从各个接口抓取过来并且通过REST API写到野狗。之后通过野狗的微信小程序文档那样子,一步一步做植入:

  • 下载wilddog-weapp-all.js到小程序的根目录。

  • 使用require把wilddog-weapp-all.js引入小程序。

  • 在app.js中设置一个getDataList的一个数据路由。数据路由不懂的可以去看一下群主的博客...

  • 在index.js中就使用一个onLoad方法,在onLoad方法中一下几个点:

    • 定时器来控制页面数据的更新时间,虽然野狗的数据是实时更新的,但是如果数据频繁更新的话会很快,让人感觉很不友好。

    • 通过野狗的value事件监听,实时的获取数据,但是,上面已经说了,页面的数据不是实时更新的,250ms更新一次。

    • 其他的就没有了。

    • 附一段我写的小程序代码:

  this.ref.child("/Unicom/Shanghai-Unicom").on('value',function(snapshot,prKey){
      clearTimeout(timer2)
      this.setData({
        ShanghaiUnicomValue:snapshot.val(),
        changed2: 'changed'
      })
      var timer2 = setTimeout(function() {
        self.setData({
          changed2: ''
        })
      },250)
    },this)


全部源码请下载:下载地址

https://blog.wilddog.com/wp-content/uploads/2017/01/wilddog-ping-demo.zip