现在有一个小程序,对页面数据的实时性很强,本来想用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. 微信小程序页面跳转的三种方式总结

    原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...

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

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

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

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

随机推荐

  1. 利用Roslyn把C#代码编译到内存中并进行执行

    Tugberk Ugurlu在其博文<Compiling C# Code Into Memory and Executing It with Roslyn>中给大家介绍了一种使用.NET下 ...

  2. MYSQL 表结构的修改

    -- 修改字段 默认值 ALTER TABLE house_owner ALTER COLUMN addr SET DEFAULT ""; -- 修改字段 名称 COMMENT & ...

  3. IM-即时通讯技术概述

    IM-即时通讯技术概述 简述 即时通讯技术(IM)支持用户在线实时交谈.如果要发送一条信息,用户需要打开一个小窗口,以便让用户及其朋友在其中输入信息并让交谈双方都看到交谈的内容.大多数常用的即时通讯发 ...

  4. PushSharp的使用

    PushSharp的使用 最近做公司的一个项目.一旦数据库插入新的消息,就要通知服务器,将这些新的消息推送给苹果客户端,以前我们的项目中有人做过这个功能,无奈做的有点复杂,而且代码没注释,我压根就没看 ...

  5. 理解BFC

    BFC:块格式化上下文(Block Formatting Context) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. BFC 是一 ...

  6. nginx启动或者重启失败,报错nginx: [error] open() &quot;/usr/local/var/run/nginx.pid&quot; failed (2: No such file or directory)

    第一种方案: 1. 执行命令 :open /usr/local/etc/nginx 打开nginx安装目录 nginx安装目录默认位置有:(找到适合你的) /etc/nginx/nginx.conf, ...

  7. java反编译工具jad使用

    参考:http://blog.csdn.net/u014472711/article/details/53713269 http://lijingshou.iteye.com/blog/2005717 ...

  8. NET 集合分页查询

    参数: var list = new List<int>(); // 集合 ; // 总数量 ; // 每页查询数量 第一种: ? totalCount / pageSize : tota ...

  9. css3画图那些事(三角形、圆形、梯形等)

    闲来无事,写写图形.当时巩固一下css3吧..前端小白,写的不好还请前辈多指教. 三角形 { width:; height:; border-bottom: 140px solid red ; bor ...

  10. 检查oracle用户默认密码的账户

    1. 检查使用默认用户密码的账号 --11g 通过数据字典SYS.DEFAULT_PWD$或视图DBA_USERS_WITH_DEFPWD select u.username, u.account_s ...