前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

实战项目丨小程序开发中页面跳转的一些总结

在项目开发中,我们很多时候都会遇到需要点击按钮跳转页面的情况。HTML中我们使用<a></a>标签或者监听标签的onclick事件来达到预期效果,而在小程序中,官方提供了以下六种跳转方式。

  • wx.switchTab(API) 跳转到tabBar页面,并关闭其他所有非tabBar页面
  • wx.reLaunch(API) 关闭所有页面,打开到应用内的某个页面
  • wx.redirectTo(API)关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到tabbar页面。
  • wx.navigateTo(API)保留当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面。使用wx.navigateBack可以返回到原页面。
  • wx.navigateBack(API)关闭当前页面,返回上一页面或多级页面。可以通过getCurrentPages获取当前的页面栈,决定需要返回几层。
  • navigator(组件)页面中使用链接跳转,相当于HTML中的<a></a>标签用法

很多时候我们都需要在页面跳转时进行传值,以上六种方式中只有wx.switchTabwx.navigateTo不能传递参数外,其他四种都可以带参数进行页面跳转。而我们跳转一般都需要保留当前页面,不需要对当前页面进行销毁,所以我们选择组件navigator或者API 接口中的wx.navigateTo来实现带参数跳转效果。

在2.7.3基础库版本之前,两者跳转方式都是在url后拼接参数。如“path?key=value&key2=value2”。但在2.7.3基础库之后,官方提供了一种新的参数传递方式,但只在wx.navigateTo接口中有效。

我们该选择哪种跳转方式?

如何选择跳转方式,并不是根据我们心情去选择的,我们应该根据实际业务以及参数类型等来选择跳转方式。

两种方式对字符串传递的比较:

//index.wxml
	<!-- 使用navigator组件实现传参跳转 -->
	<navigator url="/pages/news/news?type=IT内容" open-type="navigate">跳转到内容发布页面(navigator)</navigator>
	<!-- 绑定按钮点击事件,使用常规方式 -->
	<button bindtap="skipNewsPage">跳转到内容发布页面(button)</button>
	<!-- 绑定按钮点击事件,使用2.7.3基础库提供的新方式 -->
	<button bindtap="skipNewsPageEvents" plain="true">跳转到内容发布页面(button)</button>
//index.js 
//常规跳转方式 
skipNewsPage: function(e) { 
wx.navigateTo({ url: "/pages/news/news?type=IT内容" }); 
}, 
//新方法跳转方式 
skipNewsPageEvents: function(e) { 
wx.navigateTo({ 
url: "/pages/news/news", 
events: { 
acceptType: function(data) { 
console.log(data); 
}
 }, 
success: (res) => { 
//通过eventChannel向被打开页面传递数据 res.eventChannel.emit('acceptType', {type: "IT内容"});
 } 
}) 
}
//news.js 
onLoad: function (options) { 
var that = this; 
/** 
* 使用navigator或wx.navigateTo在url后直接带参数都可以这样获取值 
*/ 
var navType = options.type; 
console.log("url直接带参数传递:" + navType) 
/** 
* 使用2.7.3基础库之后的方式需要这样获取 
*/ 
const eventChannel = that.getOpenerEventChannel(); eventChannel.on('acceptType', function(data) { 
console.log("新方式传递参数:" + data.type); 
}); 
}

从以上输出内容我们可以看出两者在传递字符串(数值类型也是如此)时是没有区别的,相对于直接在url后跟参数,使用events方式传递参数代码编写比较多,且需要在显示页面进行获取。因此若传递参数为字符串时,我们可以依然使用传统的url后跟参数的方式跳转。

传递数组参数的比较:

我们将上述代码中的type值改为type=['1','2','3'],从运行结果我们可以看出,使用url后拼接参数的方式传递过来的值是字符串类型,而不是我们的数组,因此在使用时需要使用JSON.parse()转换。而events方式传递来的值依旧是数组。这两种方式各有优势,选择时建议使用events传值,不需要做JSON转换。

传递对象参数的比较:

我们将上述代码中type的值改为对象item={'a':1,'b':2,'c':3},从运行结果来看,我们使用url后跟参数的方式传递参数在页面取到的值为[Object object],我们最终获取对象中的某个值时,其报错找不到对象属性。而使用events传递参数时,不存在这个问题,对象依旧是对象,因此在选择时,我们若传递对象或者数组对象,那么应该使用events的方式传递参数。

综上所述,我们在开发中直接使用events传递参数的方式,这样避免了参数类型不明确时导致的错误。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言