uniapp页面跳转传参

Question

请问一下我想自己写一个省市选择 但是我不知道传参这部分怎么写 随机点击热门城市里的一个城市之后就会跳转会上一个页面然后 居住地那一栏就会显示出刚点击的城市名称 按省份选择的话随机点击一个省然后再选择一个市就会跳转到居住地那个页面 会以四川省-成都市的格式显示出来 可以的话请给我讲一下如何实现这个功能

Answer 1

在uniapp中页面跳转传参可以通过在跳转时在url后面添加参数来实现。具体实现步骤如下：

在当前页面中点击城市或省份后，跳转到下一个页面时，需要在url后面添加参数来传递选择的城市或省份信息。可以通过uniapp提供的uni.navigateTo或uni.redirectTo方法来跳转页面，并在url后面添加参数，示例代码如下：

// 点击热门城市，跳转到下一个页面
uni.navigateTo({
  url: '/pages/city-select/city-select?city=' + city
})

// 点击省份，跳转到下一个页面
uni.navigateTo({
  url: '/pages/city-select/city-select?province=' + province
})

在下一个页面中，可以通过uni.getLaunchOptionsSync方法获取当前页面跳转时传递的参数信息。根据参数信息来确定用户选择的城市或省份，并将其显示在页面中。示例代码如下：

// 获取当前页面跳转时传递的参数信息
const options = uni.getLaunchOptionsSync()

// 获取用户选择的城市或省份信息
const city = options.query.city
const province = options.query.province

// 在页面中显示选择的城市或省份信息
if (city) {
  // 显示选择的城市信息
  this.selectedCity = city
} else if (province) {
  // 显示选择的省份和城市信息
  this.selectedCity = province + '-成都市'
}

通过以上步骤，可以实现跨页面传参并在页面中显示选择的城市或省份信息。需要注意的是，在实际开发中，还需要考虑参数传递的安全性和合法性，以及参数的编码和解码等问题。