方式	优点	缺点
globalData	双向传参、全应用可用	不及时
storage	双向传参、全应用可用	不及时
路由	简单方便、及时	正向传参
通信通道	双向传参、及时	仅 wx.navagateTo() 接口调用才可用
页面栈	可操作数据和函数、及时	反向传参、仅 wx.navagateTo() 和<navigator open-type="navigateTo" url="/bbb?id=1"></navigator〉才可用

第一种：url传值

A页面部分js代码


 Page({
   toDetailPage: function (e) {
     var name = "斗帝蓝电霸王龙Pro";
     wx.navigateTo({
       url: '/pages/detail/detail?name =' + name,
     }
 })

B页面部分js代码


 Page({
   /**
     * onLoad生命周期函数--监听页面加载
    */
   onLoad: function (option) {
     console.log(option); // 斗帝蓝电霸王龙Pro
    /**
     * 这种普通函数中this的指向是动态的，为了保证函数内部可以访问到组件实例
     * 这里将this赋值给that
     * 如果你想直接使用this，可以使用箭头函数，箭头函数没有自己的this
     * 他会继承外层作用域的this
     * 在箭头函数中this的指向是定义的上下文,而不是执行时的上下文(`不清楚的可以看001例子说明`)
    */
     let that = this
     that.setData({
       name：option
     })
   },
 })


 // 001
 // 举个例子来说明：
 const obj = {
   name: '斗帝蓝电霸王龙Pro',
   sayHello: function() {
     console.log(`Hello, ${this.name}!`);
   },
   sayHelloArrow: () => {
     console.log(`Hello, ${this.name}!`);
   }
 };
 
 obj.sayHello(); // 输出：Hello, 斗帝蓝电霸王龙Pro!
 obj.sayHelloArrow(); // 输出：Hello, undefined!
 
 // 下面我来分析一下这段代码
    /**
     * sayHelloArrow是一个箭头函数。当我们调用obj.sayHello()时，
     * this指向的是调用该方法的对象obj，所以输出的结果是Hello, 斗帝蓝电霸王龙Pro!。
     * 而当我们调用obj.sayHelloArrow()时，由于箭头函数的this是在定义时确定的,
     * 而定义sayHelloArrow时的上下文是全局上下文，
     * 所以this.name实际上是指向全局对象（在浏览器中是window对象）的name属性，而全局对象
     * 没有name属性，所以输出的结果是Hello, undefined!。`
    */

url传值使用详细说明

说明：url上直接携带参数长度是有限的且不支持特殊符号，可用编码、解码的方式解决，在传参之前进行编码encodeURIComponent()，接收的时候进行解码decodeURIComponent()。

api跳转

A页面部分js代码


 //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
 wx.switchTab({
     url:'/pages/detail/detail?id=5213828',
 })
 //关闭所有页面，打开到应用内的某个页面
 wx.reLaunch({
   url: '/pages/detail/detail?id=5213828',
 })
 //关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
 wx.redirectTo({
   url: '/pages/detail/detail?id=5213828',
 })
 //保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
 wx.navigateTo({
   url: '/pages/detail/detail?id='+ encodeURIComponent(this.data.id),
 })
 //以上四种路由方式在传参和接参上没有任何区别

B页面部分js代码


 Page({
   //地址传参带过来的参数只能在该方法的options参数中获取
   onLoad:function(options){
     console.log(decodeURIComponent(options.id)) // '5213828' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串
   }
 })

组件跳转

A页面部分wxml


 <view>
   <navigator open-type="switchTab" url="/pages/detail/detail?id=5213828">
   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
   </navigator>
   <navigator open-type="reLaunch" url="/pages/detail/detail?id=5213828">
   关闭所有页面，打开到应用内的某个页面
   </navigator>
   <navigator open-type="redirectTo" url="/pages/detail/detail?id=5213828">
   关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
   </navigator>
   <navigator open-type="navigateTo" url="/pages/detail/detail?id=5213828">
   保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
   </navigator>
 </view>
 //以上四种路由方式在传参和接参上没有任何区别

B页面部分js代码


 Page({
   //地址传参带过来的参数只能在该方法的options参数中获取
   onLoad:function(options){
     console.log(options.id) //'5213828' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串
   }
 })

第二种：将值缓存在本地，再从本地取值

A页面部分js代码


 Page({
   toDetailPage: function (e) {
     var name = "斗帝蓝电霸王龙Pro";
     wx.setStorageSync("name", name);
     wx.navigateTo({
       url: '/pages/detail/detail'
     })
   }
 })

B页面部分js代码


 Page({
     /**
     * onLoad生命周期函数--监听页面加载
     */
   onLoad: function (option) {
     var name = wx.getStorageSync("name");
     console.log(name); // 斗帝蓝电霸王龙Pro
   }
 })

第三种：全局传值(应用实例传值)

app.js页面代码


 App({
   globalData: {
     name: '斗帝蓝电霸王龙'
   }，
   // onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）
   onLaunch() {
   // 读取 token
     this.getToken()
   },
   getToken() {
     // 读取本地的token
     // this 指向应用实例本身
     this.token = wx.getStorageSync('token')
     this.refreshToken = wx.getStorageSync('refreshToken')
   },
   setToken(key, token) {
     // 存储到应例实例当中
     this[key] = token
     // 存储到本地存储当中
     wx.setStorageSync(key, token)
   }
 })

其他页面js代码


 // 获取应用实例
 const app = getApp();
 Page({
   onLoad: function (option) {
     console.log(app.globalData.name); // 斗帝蓝电霸王龙
     // 重新存储新的 token
     app.setToken('token', '斗帝蓝电霸王龙Pro')
     app.setToken('refreshToken', '斗帝蓝电霸王龙Pro')
   },
   getToken() {
     console.log(app.token);  // 斗帝蓝电霸王龙Pro
     console.log(app.refreshToken); // 斗帝蓝电霸王龙Pro
   }
 })

第四种：组件传值

父传子

父组件


 // 父组件的wxml
 <classDetail  detail="{{name}}"></classDetail>
 // 父组件的js
 data:{
     name:"父组件---斗帝蓝电霸王龙Pro"
  }
 
 // 父组件的json（要把子组件注册进去）
 "usingComponents": {
     "classDetail": "./components/classDetail/index"
   }

子组件


 // 子组件的js
   properties:{
     detail: String
   }
 
 // 子组件的wxml
 <view>{{detail}}<view>  // 父组件---斗帝蓝电霸王龙Pro子传父

子传父

子组件


 // 子组件.wxml
 <button bindtap="changeSelect">添加</button>
 
 // 子组件的js
 changeSelect(){
   // 在子组件当中通过this.triggerEvent("自定义事件名"，要传递的数据)
   this.triggerEvent("updataSelect", '子组件---斗帝蓝电霸王龙Pro')
 }

父组件


 // 父组件的wxml
 // 在父组件的子标签中声明自定义事件 bind:自定义事件名="事件名"
 // 注意，这里的changeSelect是父组件js里的方法名称，updataSelect是子组件js里传递的方法名称
 <shudanbook index="{{ index }}" bind:updataSelect="changeSelect" ></shudanbook>
 
 // 父组件的js
   changeSelect(e){
   //获得传递过来的值
     console.log(e.detail) // 子组件---斗帝蓝电霸王龙Pro
   }

第五种：使用通信通道（通信通道是wx.navitageTo()独有的）

A页面部分js代码


 wx.navigateTo({
   url: "/pages/detail/detail?name='斗帝蓝电霸王龙Pro'",
   events: {
     // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
     acceptDataFromOpenedPage: function(data) { //参数名字随便起，前后页面对应上即可
     //对发送回来的数据进行处理
       console.log(data)         // 斗帝蓝电霸王龙Plus
     },
     someEvent: function(data) { // 参数名字随便起，前后页面对应上即可
       console.log(data)        // 斗帝蓝电霸王龙Pro max
     }
   },
   success: function(res) {
     // 通过eventChannel向被打开页面传送数据
     res.eventChannel.emit('acceptDataFromOpenerPage', { data: '斗帝蓝电霸王龙Pro' })//参数名字随便起，前后页面对应上即可
   }
 })

B页面部分js代码


 Page({
   onLoad: function(option){
     //获取通信通道
     const eventChannel = this.getOpenerEventChannel()
     // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
     eventChannel.on('acceptDataFromOpenerPage', function(data) {
       //对发送过来的数据进行处理
       console.log(data)   // 斗帝蓝电霸王龙Pro
     })
     //向上一页面发送数据
     eventChannel.emit('acceptDataFromOpenedPage', {data: '斗帝蓝电霸王龙Plus'});
     eventChannel.emit('someEvent', {data: '斗帝蓝电霸王龙Pro max'});
   }
 })

第六中：使用页面栈（只对当前页面栈中存在的页面生效）

A页面部分js代码


 Page({
   data:{
     name:'斗帝蓝电霸王龙Pro',
     age:22
   },
   eatFood:function(food){
     console.log('eating '+ food)    
   }
 })

B页面部分js代码


 Page({
   onLoad: function (options) {
     // 获取当前页面栈
     const pages = getCurrentPages();
     // 获取上一页面对象
     let prePage = pages[pages.length - 2];
     console.log(prePage.data.name) // 斗帝蓝电霸王龙Pro
     prePage.eatFood('斗帝蓝电霸王龙Pro') // eating 斗帝蓝电霸王龙Pro
   }
 })

总结

globalData与storage原理相同都是将数据放在一个公共的地方全应用随意取用，但是他们的数据不推送也不关联，即globalData和storage中的数据更新了，但已经获取过值的页面其对应的值并不会更新。
解决办法：将各页面获取值的事件放到onShow()中，每次页面进入前台的时候都会重新从globalData和storage中取值。
路由携带参数简单方便，但是地址长度有限不能携带大量参数和特殊符号。
解决办法：在传参之前进行编码encodeURIComponent()，接收的时候进行解码 decodeURIComponent()。如此大量参数可以携带但是只能单方面传递参数，即只能a向b传，反之则不行。
通信通道，页面可以互相传参，但是该通道仅存在于wx.navagateTo()的接口调用时才有效。
页面栈，这是一个极其强大功能，它本质上不是向页面传参而是直接修改页面参数和方法。通过页面栈我们可以拿到该页面的对象，然后就可以对该页面的各项数据和函数进行操作。但是这种方法只能在b页面去操作a页面，并不能在a页面操作b页面，因为此时页面栈中还没有b。并且该方法也仅限于通过wx.navagateTo()或 <navigator open-type="navigateTo" url="/pages/detail/detail?id=5213828">跳转</navigator> 这两种方式进入b页面才可使用，因为其他方式跳转到b页面时已经销毁了其他所有页面，页面栈中已经没有上一个页面了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/769889