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或本地存储进行传递。

uniapp跳转页面传大量参数