现在有一个小程序,对页面数据的实时性很强,本来想用socket,仔细研究了一下,万剑不离其中,它是websocket。服务端不会用,所以使用了传统的http请求方式。开发微信小程序必须要知道的事

1.请先看官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

说明:官方文档的路由触发方式对页面生命周期的影响。如图:

在项目过程中,服务端不开心的说,你怎么一直请求我,我服务都反应不过来快崩溃了。经过控制台仔细查看发现,只要打开过的小程序页面的定时器都在不间断的运行着,这是为什么?

后来研究发现,微信小程序为什么会有页面生命周期这个概念,因为它和我们传统的web浏览器切换页面的机制是不同的。小程序的页面切换,是页面的显示和隐藏,只有没有启动过的页面才会进行初始化onLoad()。

明白了,页面跳转后,隐藏了页面,但是依然后台运行着。为了减轻服务端的请求压力,必须保证不展示页面的数据,停止刷新。具体操作请查看如下代码:

主要实现在js文件中


var obj=wx.createSelectorQuery();
var config = require('../../config.js');
var app = getApp();
Page({
    data: {
    timerTask:''//本页面的定时任务,要在这里声明定时器的变量名
        ,title: '工作面'
        ,listRy: {'bianhao': '0','xingming': '0','dangqianquduan': '0','daodashike': '0','banci': '0','jibie': '0','bumen': '0'}
        ,listXz: [
            {'bianh': '0','machineid': '0','detectorid': '0','xtime': '0','quduanming': '0'},
            {'bianh': '0','machineid': '0','detectorid': '0','xtime': '0','quduanming': '0'},
            {'bianh': '0','machineid': '0','detectorid': '0','xtime': '0','quduanming': '0'},
        ]
    },
    onReady:function(res) {
        // 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
    },

    onLoad: function (e) {
        var title = e.title
        var that = this
        wx.setNavigationBarTitle({
            title: title
        });

    },
  onShow: function () {
    var that = this;
    var id = e.id
    //页面加载成功后,要先请求一次数据,否则会在定时时间到达时才会请求数据
    search_data(that, id);
    //将定时器赋值给data中的timerTask变量,便于关闭定时器调用
    that.setData({
      timerTask: setInterval(function () {
        search_data(that, id);
      }, config.timeOut)
    })
  },
  onHide: function () {
    //写在onHide()中,切换页面或者切换底部菜单栏时关闭定时器。
    clearInterval(this.data.timerTask);
  },
    qiehuan_click: function(e) {
        this.setData({
            select:e.target.dataset.num
        })
    },
})

function search_data(that,id){
    wx.request({
      url: config.service.host
      , method: 'post'
      , data: {'query': 'gzm','bianh': id}
      , header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      }
      , dataType: 'json'
      , success: function (re) {
           console.log(re)
        if (re.statusCode==200){
            //这里是成功后的操作
        }
      }
    })
}

来源:https://blog.csdn.net/weixin_42799222/article/details/86528216

微信小程序页面跳转后js定时器没有销毁的问题的更多相关文章

  1. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  2. 微信小程序——页面跳转及传参

    小程序页面跳转 微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转. 为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式. 1. ...

  3. 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo

    }) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...

  4. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

  5. 微信小程序页面跳转方法汇总

    微信小程序前端页面跳转有多种方式,汇总如下: Tips: 小程序前端的页面跳转之后,跳转之前的页面并不会凭空消失,而是存进了一个类似“页面栈”的空间里: 只有当这个所谓的“页面栈”满了之后页面才会退出 ...

  6. 直击--vue项目微信小程序页面跳转web-view不刷新-根源

    背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...

  7. 微信小程序页面跳转 的几种方式

    最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...

  8. 微信小程序页面跳转方法和携带参数详解

    1.页面跳转方式     (1)标签跳转   open-type的属性值对应api里的用法即wx.的用法   1 <navigator url="/page/navigate/navi ...

  9. 微信小程序~页面跳转和路由

    一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面,如图3-6所示,在首页使用2次wx.navigateTo后,页面层级会有三层,我们把这样的一个页面层级称为页面栈.

随机推荐

  1. Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(2)

    Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(2) 上一篇里介绍了Color-Coded Picking的思路和最基本的实现.在处理GL_POINTS时已经没有问题,但是处 ...

  2. lua高阶用法 OO的实现

    //Lua的类的实现,可以派生,可重写方法 local _class={} function class(super) local class_type={} class_type.ctor=fals ...

  3. POJ2184 Cow Exhibition[DP 状态负值]

    Cow Exhibition Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12420   Accepted: 4964 D ...

  4. poj分类

    初期: 一.基本算法:      (1)枚举. (poj1753,poj2965)      (2)贪心(poj1328,poj2109,poj2586)      (3)递归和分治法.      ( ...

  5. (easy)LeetCode 237.Delete Node in a Linked List

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  6. YUV主要采样格式理解

    主要的采样格式有YCbCr 4:2:0.YCbCr 4:2:2.YCbCr 4:1:1和 YCbCr 4:4:4.其中YCbCr 4:1:1 比较常用,其含义为:每个点保存一个 8bit 的亮度值(也 ...

  7. seeting菜单界面形成--优化

    本文是上一篇文章的优化版: 上文链接地址:http://www.cnblogs.com/zzw1994/p/5016864.html 上文中有很多方法都是过时,并且效率不是很高,主要对JAVA代码进行 ...

  8. Notes on Probabilistic Latent Semantic Analysis (PLSA)

    转自:http://www.hongliangjie.com/2010/01/04/notes-on-probabilistic-latent-semantic-analysis-plsa/ I hi ...

  9. 无状态、REST、RESTful 和 Web Services【整理】

    在理解 OpenStack 的过程中,常常遇到 REST 这个概念,现从各处搜罗如下: 对 Web Service 的理解: Web 服务有点像对计算机友好的网页,基于让程序可以跨网络交换信息的标准和 ...

  10. C# webkit.net的简单使用

      webkit.net 0.5下载地址https://sourceforge.net/projects/webkitdotnet/files/WebKit%20.NET%200.x/0.5/WebK ...