微信小程序 wx.navigateTo的使用心得

微信小程序 wx.navigateTo的使用心得

在微信小程序开发过程中，我们会经常的用到页面之间的跳转，wx.navigateTo这种方式跳转是最常用的跳转之一，下面我们结合着例子给大家讲解一下。

1、wx.navigateTo(官方)功能描述：

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack
可以返回到原页面。小程序中页面栈最多十层

•  wx.navigateTo(Object object) 以 Promise 风格 调用：支持
  

  需要页面权限：当前是插件页面时，宿主小程序不能调用该接口，反之亦然
  小程序插件：支持，需要小程序基础库版本不低于 2.2.2
  在小程序插件中使用时，只能在当前插件的页面中调用
  微信 Windows 版：支持
  微信 Mac 版：支持
  微信 鸿蒙 OS 版：支持
  功能描述

2、具体参数使用说明参见官方文档

微信公众平台小程序API

3、重要的参数使用说明：

url 参数需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
例如：

3.1、传单个或者多个变量

这个中情况适合于传递参数不多或者通过传递主要参数进行第二次查询的情况
例如:只传变量key1，key2
微信小程序页面 transferVar.wxml

<!--transferVar.wxml-->
 <view  bindtap="navigatorGoto"  data-key1="a"    data-key2="b"  >
...        
...
</view>

微信小程序页面js文件 transferVar.js

//transferVar.js
navigatorGoto:function(e){
  //获取页面的key的值，当然获取方式可以按照自己的方式和实际需求来
  var keyValue1=e.currentTarget.dataset.key1
  var keyValue2=e.currentTarget.dataset.key2
  
  wx.navigateTo({
    url: '/pages/deviceAlarmDetail/deviceAlarmDetail?key1='+keyValue1+'&key2='+keyValue2,  
  })
},

微信小程序跳转页面的js acceptVar.js

//acceptVar.js
  onLoad(options) {
    console.log(options)
    var key1 = options.key1
    var key2= options.key2
  },

3.2、传对象

对于传递参数比较多的情况下，不建议用参数传递，因为单个或者多个参数传递方式有长度限制，在这种情况下，我们可以考虑直接传递对象
微信小程序页面 transferObj.wxml

<!--transferObj.wxml-->
 <view  bindtap="navigatorGoto"  data-obj="{{obj}}"  >
...        
...
</view>

微信小程序页面js文件 transferObj.js

//transferObj.js
navigatorGoto:function(e){
    var obj=e.currentTarget.dataset.obj //获取对象页面的变量obj的值
	wx.navigateTo({
	  url: '/pages/deviceAlarmDetail/deviceAlarmDetail', //这里可以不用传参数
	  events: {
	    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
	    acceptDataFromOpenedPage: function(data) {
	      console.log(data)
	    },
	  },
	  success: function(res) {
	    // 通过eventChannel向被打开页面传送数据
	   
	    res.eventChannel.emit('acceptDataFromOpenerPage', { data: obj })
	  }
	
	})
},

微信小程序跳转页面的js acceptObj.js

//acceptObj.js
Page({
  onLoad: function(option){
    const eventChannel = this.getOpenerEventChannel()
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data) //data就是transferObj传过来的对象值
    })
  }
})