Серия uni-app: переход к передаче значения uni.navigateTo
Серия uni-app: переход к передаче значения uni.navigateTo

в uni-приложении,Если вы хотите пройтиuni.navigateToМетод переходит на другую страницу и проходитпараметр,Для его передачи можно использовать параметр URL-адреса маршрутизации страницы или стек страниц. Но да,пожалуйста, обрати внимание,uni.navigateToНе заменит текущую страницу,И да помещает текущую страницу в стек,и перейдите на страницу в приложении. Это означает, что можно вернуться к предыдущим страницам через стек страниц.

Ниже приведены два часто используемых метода передачи значений:

1. Использование параметров URL

можно пройтипараметрдобавлено на целевую страницуURLначальство。Затем на целевой странице перейдитеthis.$route.queryчтобы получить этопараметр。

Пример

Отправить страницу A):

Язык кода:javascript
копировать
uni.navigateTo({
    url: '/pages/targetPage/targetPage?param1=value1&param2=value2'
});

Получить страницу (Страница B, а именно targetPage):

Язык кода:javascript
копировать
export default {
    onLoad(query) {
        // Объект запроса содержит результаты поиска, вызванные переходами на страницы.
        console.log(query.param1); // Выход: value1
        console.log(query.param2); // Выход: value2
    }
}

2. Используйте стек страниц

Хотяuni.navigateToОн не поддерживает передачу данных напрямую через стек страниц.,но можно использоватьuni.setStorageSyncилиuni.setStorageХранить данные в локальном кеше,Затем на целевой странице перейдитеuni.getStorageSyncилиuni.getStorageполучить。

Пример

Отправить страницу A):

Язык кода:javascript
копировать
// Хранить данные в локальном кеше
uni.setStorageSync('myKey', 'myValue');

// Затем перейдите на целевую страницу
uni.navigateTo({
    url: '/pages/targetPage/targetPage'
});

Получить страницу (Страница B, а именно targetPage):

Язык кода:javascript
копировать
export default {
    onLoad() {
        // Получить данные из локального кэша
        let value = uni.getStorageSync('myKey');
        console.log(value); // Выход: myValue
    }
}

Что следует отметить:

  • При использовании параметров URL-адреса существуют ограничения на длину параметра, и не рекомендуется передавать большие объемы данных или конфиденциальные данные.
  • При использовании локального кэша обеспечьте безопасность данных и очистите кэш, когда это необходимо, чтобы избежать утечки данных или занятия слишком большого места для хранения.
  • Если вы передаете сложные структуры данных (например, объекты или массивы), вам может потребоваться сначала преобразовать их в строки JSON, а затем проанализировать их обратно на целевой странице.
  • в некоторых случаях,Возможно, придется использоватьuni.redirectToилиuni.reLaunch来替换当前页面или重新加载应用,Это зависит от ваших потребностей.
  • uni.navigateTo да uni-app Один в кадре, используемый для перехода по страницам. API. При использовании этого API При переходе на страницу вы обычно можете передать некоторый параметр для управления поведением перехода или передать данные на целевую страницу. Следующие да и uni.navigateTo Все возможные значения данных или параметры, относящиеся к:

Параметры API uni.navigateTo

Язык кода:javascript
копировать
uni.navigateTo({
    url: «Путь к странице», // Путь к целевой странице может включать параметр
    success?: Function, // Функция обратного вызова для успешного вызова интерфейса
    fail?: Function, // Функция обратного вызова при сбое вызова интерфейса
    complete?: Function // Функция обратного вызова в конце вызова интерфейса (выполняется независимо от того, успешен вызов или нет)
});

Подробное описание

  • url:
    • Да uni.navigateTo Основной параметр указывает путь к целевой странице, на которую нужно перейти.
    • Параметры можно брать после пути и использовать между параметрами и путями. ? Используются отдельные клавиши параметров и значения параметров. = Подключено, используются разные параметры & 分隔;нравиться:path?key1=value1&key2=value2
    • Параметры будут переданы на целевую страницу onLoad функция, как query часть параметров.

параметры функции обратного вызова

  • success: Функция обратного вызова, выполняемая при успешном переходе на страницу. Никаких конкретных параметров не передается, но ее можно передать. uni.getCurrentPages() Получить информацию о текущем стеке страниц.
  • fail: Функция обратного вызова, выполняемая при сбое перехода на страницу, передает в качестве параметра объект, содержащий информацию об ошибке.
  • complete: Независимо от того, был ли переход на страницу успешным или неудачным, функция обратного вызова будет выполнена без передачи определенных параметров.

Здравствуйте, я Фейхен.

Приглашаем вас подписаться на меня, чтобы получать обучающие ресурсы, ежедневный обмен информацией о технологических изменениях и правилах выживания в отрасли;

boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода