uniapp跳转页面传大量参数

uniapp跳转页面传大量参数

uniapp中使用路由跳转页面时,当需要传递大量参数时,常用的方法是使用query参数或params参数进行传递。但是在传递大量参数时,这两种方式都不太方便,因此需要使用其他方式。

1. 使用globalData

在uniapp中,可以使用globalData定义一个全局变量,将需要传递的参数存储在其中,然后在跳转页面时,将该全局变量作为参数传递到目标页面。具体的步骤如下:

在App.vue文件中定义一个globalData变量:


export default {
  globalData: {
    param1: '',
    param2: '',
    // ...
  },
  onLaunch() {},
  // ...
}

    在发送参数的页面中,将参数存储到globalData中:

    
    this.$app.globalData.param1 = 'value1'
    this.$app.globalData.param2 = 'value2'
    // ...
    

      在跳转页面时,将globalData作为参数传递:

      
      uni.navigateTo({
        url: '/pages/target/target?param1=' + this.$app.globalData.param1 + '&param2=' + this.$app.globalData.param2,
      })
      

      这种方式的优点是不需要使用query参数或params参数,可以传递任意数量的参数,但是需要注意的是,由于globalData是一个全局变量,因此需要注意变量名的唯一性,以免出现冲突。

      2. 使用本地存储

      在uniapp中,可以使用uni.setStorageSync方法将需要传递的参数存储到本地存储中,然后在跳转页面时,将存储的参数作为参数传递到目标页面。具体步骤如下:

      在发送参数的页面中,将参数存储到本地存储中:

      
      uni.setStorageSync('param1', 'value1')
      uni.setStorageSync('param2', 'value2')
      // ...
      

        在跳转页面时,将本地存储中的参数作为参数传递:

        
        uni.navigateTo({
          url: '/pages/target/target',
          success: function(res) {
            // 传递参数
            var pages = getCurrentPages();
            var currentPage = pages[pages.length - 1];
            var options = {
              param1: uni.getStorageSync('param1'),
              param2: uni.getStorageSync('param2'),
              // ...
            }
            currentPage.$vm.$emit('getOptions', options);
          }
        })
        

        
        // 目标页面中获取参数
        created() {
          this.$parent.$on('getOptions', (options) => {
            // 处理参数
          });
        }
        

        这种方式的优点是可以传递任意数量的参数,而且由于使用本地存储,传递的参数不会受到页面跳转的影响,但是需要注意的是,如果存储的参数过多,可能会影响应用的性能。

        3. 封装方法

        在uniapp中,可以将需要传递的参数封装到一个方法中,在调用该方法时传递目标页面的路径和参数,然后在该方法中使用uni.navigateTo方法跳转页面,并将参数作为参数传递。具体步骤如下:

        在utils文件夹中创建navigateTo方法:

        
        // utils.js
        export function navigateTo(url, options) {
          var paramStr = '';
          for (var key in options) {
            paramStr += '&' + key + '=' + options[key];
          }
          paramStr = paramStr.slice(1);
          uni.navigateTo({
            url: url + '?' + paramStr,
          });
        }
        

          在发送参数的页面中,调用navigateTo方法:

          
          import { navigateTo } from '../../utils';
          navigateTo('/pages/target/target', {
            param1: 'value1',
            param2: 'value2',
            // ...
          });
          

          这种方式的优点是将传递参数的过程封装到一个方法中,使调用更加简单方便,而且可以传递任意数量的参数。

          4. 使用vuex

          在uniapp中,可以使用vuex来管理全局状态,将需要传递的参数存储到vuex中,在目标页面中通过vuex获取参数。具体步骤如下:

          在store文件夹中创建一个index.js文件,定义一个state变量,并在mutation中定义一个setParam1方法和一个setParam2方法:

          
          // store/index.js
          export const state = {
            param1: '',
            param2: '',
            // ...
          };
          export const mutations = {
            setParam1(state, param) {
              state.param1 = param;
            },
            setParam2(state, param) {
              state.param2 = param;
            },
            // ...
          };
          

            在发送参数的页面中,使用commit方法将参数存储到vuex中:

            
            import { mapMutations } from 'vuex';
            export default {
              methods: {
                ...mapMutations(['setParam1', 'setParam2']),
                sendParams() {
                  this.setParam1('value1');
                  this.setParam2('value2');
                  // ...
                },
                // ...
              }
            }
            

              在目标页面中,使用mapState方法获取参数:

              
              import { mapState } from 'vuex';
              export default {
                computed: {
                  ...mapState(['param1', 'param2']),
                  // ...
                },
                // ...
              }
              

              这种方式的优点是使用vuex进行状态管理,可以方便地获取参数并且可以在多个页面之间共享状态,但是需要注意的是,如果应用较小,使用vuex可能会增加代码量。

              总结

              在uniapp中,传递大量参数有多种方式,每种方式都有其优点和缺点,需要根据具体情况选择使用。如果需要传递的参数较多,可以考虑使用封装方法或vuex进行状态管理,如果需要传递的参数较少,可以考虑使用globalData或本地存储进行传递。