When doing a small program, it is not difficult to find that after using Navigateto to play the page jump, click on the top left corner or return to the previous page to display the page, then the problem is coming, their jump rules What is Это?结合到实际业务中如何灵活运用呢？
Что такое стек страниц?
Кто первым пришел, кто разбирается в апплете WeChatРабочая среда:
Рабочая среда апплета разделена на уровень рендеринга и уровень логики, на уровне рендеринга работают шаблоны WXML и стили WXSS, а на уровне логики работают сценарии JS.
Уровень рендеринга и логический уровень апплета управляются двумя потоками: интерфейс слоя рендеринга использует WebView для рендеринга, логический уровень использует поток JsCore для запуска сценария JS. Апплет имеет несколько интерфейсов, поэтому на уровне рендеринга есть несколько потоков WebView. Связь между этими двумя потоками будет ретранслироваться через клиент WeChat, а сетевой запрос, отправленный логическим уровнем, также будет перенаправлен через Native. апплета показано на рисунке ниже.
Мы видим, что страница отображается с использованием одного потока WebView. Если открыто 10 страниц, будет открыто 10 потоков WebView.В настоящее время десять потоков webView в памяти называются стеками страниц. Разумеется, апплет будет ограничивать и эту память, текущий лимит стека страниц не более десяти. Маршрутизация страницы в апплете контролируется самой структурой апплета. Мы не должны управлять ею вручную. Структура апплета управляет всеми интерфейсами через структуру стека страниц. Когда происходит скачок маршрутизации, стек страниц сделает соответствующие Измените, текущий стек страниц можно получить с помощью getCurrentPages() на странице апплета.
Возьмите каштан: Сначала получите стек страниц на родительской странице:
const page = getCurrentPages(); // 父页面
console.log('父页面', page); //父页面
Перейти на подстраницу через wx.navigateTo, а затем получить стек страниц на подстранице:
const page = getCurrentPages(); // 子页面
console.log('子页面', page); //子页面
выход:
Как видно из вышеприведенного примера, мы можем получить текущий стек страниц в странице через метод getCurrentPages(), и получить массив, где каждый элемент — это объект Page каждой страницы (то есть на странице. ЭТОТ объект), и мы запускаем некоторое мышление...
Производительность стека страниц при скачках маршрутизации?
Когда происходит переключение маршрутизации, стек страниц ведет себя следующим образом:
| место действия | производительность стека страниц | Соответствующий API перехода маршрутизации |
|---|---|---|
| инициализация апплета | Новый стек страниц | |
| открыть новую страницу | новая страница | wx.navigateTo или использовать компонент |
| перенаправление страницы | Текущая страница всплывает, и новая страница выдвигается. | wx.redirectTo или использовать компонент |
| страница назад | Страница продолжает появляться до тех пор, пока целевая страница | wx.navigateBack или используйте компонент или пользователь, нажмите верхнюю левую кнопку возврата |
| Переключение вкладок | Все страницы открываются, остается только новая вкладка. | |
| Перезагрузить | wx.reЗапустить или использовать компонент |
Когда мы работаем над проектом, разумное использование переходов маршрутизации и стеков страниц сэкономит много кода, и соответственно улучшится взаимодействие с пользователем.Поэтому очень важно установить правила перехода по страницам перед запуском проекта.
Практический прикладной анализ стека страниц
Далее, давайте проанализируем процесс изменения стека страниц.Из анализа важный вопрос, который нам нужно понять, заключается в том, что когда клиент нажимает кнопку возврата, он перейдет к какому интерфейсу.В этом смысл нашего анализа страницы изменение стека.
Во-первых, мы дважды вызываем navigationTo на странице, и стек страницы выглядит следующим образом.
Интерфейс, отображаемый в это время, — страница C. Если клиент вернется в это время, все будет нормально. Первый интерфейс для отката — страница B, затем страница A. Но если wx.redirectTo({url:'pageD'}) вызывается на интерфейсе pageC, ситуация будет другой.Давайте сначала посмотрим на ситуацию со стеком страниц после перехода на pageD.
По положению стека мы можем его проанализировать. Если вы используете wx.redirectTo для перехода на страницу pageD, то при откате вы не сможете снова вернуться на страницу C, а вернетесь непосредственно на страницу B.
Благодаря приведенному выше анализу стека страниц мы видим, что изменение стека повлияет на порядок, в котором клиент откатывает страницы, поэтому очень важно разумно использовать различные методы перехода в соответствии с вашими потребностями. При неправильном использовании это приведет к путанице и путанице.
Ниже анализируется ситуация с перелистыванием дубликатов страниц:
Как показано на рисунке, в стеке появляются два идентичных интерфейса страницы B. В это время, если пользователь нажмет клавишу выхода, страница появится дважды, и данные одного интерфейса также являются старыми данными. Поэтому, чтобы избежать этой проблемы, мы должны избегать многократного помещения PageB в стек на странице PageC, поэтому используйте wx.navigateBack({delta:1}); на странице pageC для перехода к предыдущей странице. Задачу обновления данных можно решить в функции onShow страницы.
Сценарий: пользователь на странице подтверждения заказа щелкает левый верхний угол, чтобы вернуться
Гипотетический сценарий: пользователь напрямую нажимает «Купить сейчас» на странице сведений о продукте, чтобы разместить заказ на покупку, переходит на страницу подтверждения заказа и после успешной оплаты переходит на страницу успешной оплаты. стрелка в верхнем левом углу, чтобы вернуться...
Обработка: в это время вы должны войти на страницу сведений о продукте, поэтому, когда вы подтвердите, что платеж на странице заказа успешно перешел, вы должны поместить страницу подтверждения заказа и новую страницу в стек, после чего вы не можете использовать wx.navigateTo для перехода к страницы, вы должны использовать wx .redirectTo
Сценарий: пользователь на странице подтверждения заказа выбирает существующего грузополучателя.
Гипотетический сценарий: на странице подтверждения заказа пользователю необходимо выбрать существующего грузополучателя, а список грузополучателей находится на другой странице, затем после того, как пользователь нажмет «Выбрать грузополучателя», используйте wx.navigateTo для перехода к списку грузополучателей, нажмите грузополучателя, вернуться на страницу подтверждения заказа с параметрами... Обработка: используйте wx.navigateTo на странице подтверждения заказа, чтобы перейти к списку грузополучателей, затем получить стек страниц в событии клика в списке грузополучателей, перейти непосредственно на предыдущую страницу setData, а затем вернуться на предыдущую страницу, показать код :
const page = getCurrentPages()
if (page.length > 1) {
page[page.length - 2].setData({
收货人: 选中的某个收货人详情 //[object]
})
wx.navigateBack({
delta: 1
})
}
Как упоминалось в приведенном выше примере, текущий стек страниц получается с помощью метода getCurrentPages() на странице, и получается массив, в котором каждый элемент является объектом Page каждой страницы, тогда мы можем использовать метод setData непосредственно Изменение данных, отображаемых на предыдущей странице, и прямой возврат на предыдущую страницу.
В это время официальное напоминание:
Хотя этот метод прост, чиновник также напоминает, что данные стека страницы могут быть изменены самостоятельно, но! Будьте осторожны, в противном случае это приведет к ошибке состояния страницы.
Суммировать: 总觉得漏了点啥，又想不起来…… 官方文档应有尽有，多研究官方文档，多引发思考并手写demo尝试，总会有一些新的发现，另外，方法千万条，随便选一条，根据自己业务逻辑选用合适的方法。