微信小程序优化多次跳转后卡顿问题

一、微信小程序多次跳转会产生卡顿的原理

通过wx.navigateTo 跳转,都会出现保留当前页面,打开新的页面机制。

wx.navigateTo不会将旧页面出栈,会将新页面入栈(栈内元素个数增加,栈内元素5个时,不能再跳转)。手机性能好点,可能10次左右才会导致小程序跳转卡顿崩溃。

二、解决方法:

1、减少wx.navigateTo的使用,看看能不能用wx.redirectTo代替其跳转。

2、如果已经有缓存栈内,是否可以直接将跳转新的页面(有缓存栈),相当于wx.navigateBack返回缓存栈页面。然后修改数据刷新数据即可。

可以将跳转方法统一封装一下如下操作:

//统一跳转  go_to('navigateTo','pages/index/index','keyword=张三')
function go_to(type,url,parameter){
  let pages = getCurrentPages();
	if(pages[pages.length-1].route == url){
		wx.showToast({
		  title: '已在当前页面~',
			icon:'none',
		  duration: 1500
		}); 
		return false;
	}
	for(let index in pages){   //若存在缓存页面,返回当前页面,parameter不为空时,将会更改返回页面的setdata值(注意:只能改变一个值)
		if(pages[index].route == url){
			index = pages.length-1-index;
			if(index ==0||index==-1){
				index = 1;
      }
      if(parameter!=undefined){
        let item_box = parameter.split("=");
        pages[index].setData({
          [item_box[0]]:item_box[1]
        });
      }
			wx.navigateBack({
				delta: index
			});
			return false;
		}
	}
  parameter!=undefined?url = '/'+url+'?'+parameter:url = '/'+url;
  switch (type) {
    case 'navigateTo':
      wx.navigateTo({
        url:url
      });
      break;
    case 'redirectTo':
      wx.redirectTo({
        url:url
      });
      break;
    case 'switchTab':
      wx.switchTab({
        url:url
      });
      break;
    case 'reLaunch':
      wx.reLaunch({
        url:url
      });
      break;
    default:
      wx.navigateTo({
        url:url
      });
      break;
  }
}

然后在相应的位置引入跳转即可。同一个页面跳转到同一个页面,建议直接刷新数据即可,封装的方法里面未做处理。

三、方法简单通用,调用即可。

你可能感兴趣的:(微信小程序,微信小程序,小程序)