이 글에서는 페이지 라우팅에 대한 관련 내용을 주로 소개하는 WeChat 미니 프로그램에 대한 관련 지식을 제공합니다. 라우팅은 패킷이 소스에서 대상으로 전송될 때 종단간 경로를 결정하는 네트워크 범위를 말합니다. 아래 과정을 살펴보시고 모든 분들께 도움이 되길 바랍니다.
【관련 학습 추천 : 미니 프로그램 학습 튜토리얼】
라우팅이란?
라우팅은 소스에서 대상까지의 패킷의 종단 간 경로를 결정하는 네트워크 전체 프로세스를 나타냅니다. WeChat 애플릿 페이지 라우팅과 라우팅 규칙(경로)을 기반으로 한 페이지에서 다른 페이지로 이동하는 규칙을 이해할 수 있습니다.
1. 페이지 점프를 유발하는 요소
- 애플릿을 시작하고 첫 번째 페이지를 초기화합니다.
- 새 페이지로 점프하고
wx.navigateTo
또는<navigator><code>wx.navigateTo
或者<navigator></navigator>
- 页面重定向,调用
wx.redirectTo
或者<navigator></navigator>
- 页面返回,调用
wx.navigateBack
,页面左上角返回按钮 -
wx.switchTab
实现tabBar
页面切换
Tips: 所有页面都必须在app.json中注册,例如
{ "pages": [ "pages/index/index", "pages/classification/classification", "pages/start/start", "pages/detail/detail", ] }
二、微信小程序中实现页面路由的几种方式
-
wx.navigateTo
,保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面
wx.navigateTo({ url: 'pages/detail/detail', success: function(res) {}, ... })
-
wx.redirectTo
,关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
wx.redirectTo({ url: 'pages/detail/detail', success:function(res){}, ... })
-
<navigator></navigator>
组件跳转方式
<navigator>跳转</navigator>
-
wx.navigateBack
返回上一页
wx.navigateBack({ delta: 1, })
Tips: delta为1时表示返回上一页,为2时表示上上一页,以此类推;如果dalta大于已打开的页面总数,则返回到首页。返回后,元界面会销毁
-
wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
app.json:
{ "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", }, { "pagePath": "pages/car/car", "text": "购物车", }, ... } }
index.js:
wx.switchTab({ url: 'pages/car/car' })
三、小程序路由实现原理
小程序路由是通过自己实现的一个栈(先进先出)来管理的。
当我们通过wx.navigateTo
或者<navigator></navigator>
从A页面跳转到B页面时。路由栈的变化是这样的。
路由栈刚开始只存有页面A,当使用wx.navigateTo
跳转后,页面B推入路由栈并展示到界面上,页面A隐藏。
当我们使用wx.navigateBack
返回时
那么wx.redirectTo
与wx.navigateTo
有什么区别呢?
假如当前已经在二级页面B上,我们使用wx.redirectTo
跳转到C页面,其过程是这样的。
如当前已经在二级页面B上,我们使用wx.redirectTo
페이지 리디렉션, wx.redirectTo
호출 또는 <navigator></navigator>
페이지 반환, wx.navigateBack
호출 > code>, 페이지 왼쪽 상단에 있는 돌아가기 버튼
🎜2 WeChat 미니 프로그램에서 페이지 라우팅을 구현하는 여러 가지 방법🎜🎜🎜
wx .navigateTo
,현재 페이지를 유지하고 애플리케이션의 페이지로 이동하지만 탭바 페이지는 이동하지 않습니다.🎜rrreee- 🎜
wx.redirectTo
,현재 페이지를 닫고 애플리케이션 내 페이지로 점프하지만 탭바 페이지로 점프는 허용되지 않습니다.🎜- 🎜
<navigator></navigator>
컴포넌트 점프 방법🎜- 🎜
wx.navigateBack
이전 페이지로 돌아가기🎜rrreee 🎜🎜팁: delta가 1이면 이전 페이지로 돌아가는 것을 의미하고, 2이면 이전 페이지로 가는 것을 의미합니다. 열린 페이지의 총 개수보다 크면 홈페이지로 돌아갑니다. 반환 후에는 메타 인터페이스가 삭제됩니다.🎜🎜- 🎜
wx.switchTab
tabBar 페이지로 이동하고 tabBar가 아닌 다른 모든 페이지를 닫습니다. Strong>🎜 app.json:🎜
wx.navigateTo
또는 <navigator></navigator>
를 통해 페이지 A에서 페이지 B로 이동할 때. 라우팅 스택의 변경 사항은 다음과 같습니다. 🎜
wx.navigateTo
를 사용하여 점프하면 페이지 B가 라우팅 스택으로 푸시되어 인터페이스에 표시되고 페이지 A는 숨겨집니다. 🎜🎜wx.navigateBack
을 사용하여 🎜
wx.redirectTo
와 wx.navigateTo
의 차이점은 무엇인가요?🎜🎜이미 보조 페이지 B에 있는 경우 wx.redirectToC 페이지로 이동하는 과정은 다음과 같습니다. 🎜wx.redirectTo
를 사용하여 C 페이지로 이동합니다. 과정은 다음과 같습니다. 🎜 [외부 링크 이미지 전송...(img-mkPnbKug-1650431194878)]🎜🎜페이지 B가 튀어나오고, 그 다음 페이지 C가 스택에 푸시됩니다. 이때 스택에는 아직 두 페이지만 있습니다. . 🎜🎜【관련 학습 추천: 🎜미니 프로그램 학습 튜토리얼🎜】🎜위 내용은 WeChat 미니 프로그램의 페이지 라우팅에 대한 지식 포인트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于基础架构原理的相关内容,其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于云服务的配置详解,包括了创建使用云开发项目、搭建云环境、测试云服务等等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

西安坐地铁用的小程序为“乘车码”。使用方法:1、打开手机微信客户端,点击“发现”中的“小程序”;2、在搜索栏中输入“乘车码”进行搜索;3、直接定位城市西安,或者搜索西安,点击“西安地铁乘车码”选项的“去乘车”按钮;4、根据腾讯官方提示进行授权,开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于开发工具介绍的相关内容,包括了下载开发工具以及编辑器总结等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

Dreamweaver Mac版
시각적 웹 개발 도구
