이 글은 주로 WeChat 미니 프로그램 페이지 점프와 데이터 전송 예시를 소개합니다. 집에서 학습하고 이해하는 데 도움이 되는 예제 코드를 소개합니다. 도움이 필요한 친구들은 이를 참고할 수 있습니다
WeChat 미니 프로그램 페이지 점프와 데이터 transfer
1. Pilot
Android에서는 Activity와 Fragment에 스택 개념이 있고 WeChat 애플릿 페이지에도 스택 개념이 있습니다. WeChat 미니 프로그램 페이지로 이동하는 방법은 4가지가 있습니다:
2.wx.redirectTo(OBJECT);
5. 해당 점프 기능을 구현하는 데 사용합니다.
분석:
그 중 navigateTo는 다음 페이지로 이동할 때 원본 페이지를 페이지 스택에 저장합니다. 이 경우에는 전화기의 돌아가기 버튼을 클릭하여 이전 페이지로 이동합니다.
redirectTo 및 switchTab은 먼저 스택의 원본 페이지를 지운 다음 대상 페이지를 스택에 밀어 넣습니다. 이 두 가지 점프 방법은 모두 시스템의 Return 키를 통해 이전 페이지로 돌아갈 수 없으며 미니 프로그램을 직접 종료합니다.
-
redirectTo를 사용할 때 페이지에서 tabBar 또는 점프 버튼을 다시 사용해야 합니다.
switchTab으로 이동한 페이지는 tabBar에 선언된 페이지여야 합니다.
tabBar에 정의된 필드는 5페이지를 초과할 수 없으며 애플릿의 페이지 스택 수준은 5레벨을 초과할 수 없습니다. .
navigateBack은 페이지 스택의 지정된 페이지로만 돌아갈 수 있으며 일반적으로 NavigateTo와 함께 사용됩니다.
wx.navigateTo 및 wx.redirectTo는 탭바 페이지로 점프하는 것을 허용하지 않습니다. wx.switchTab만 사용하여 탭바 페이지로 이동할 수 있습니다
-
2. (1 )wx.navigateTo(OBJECT)
현재 페이지를 유지하고 애플리케이션의 페이지로 이동하려면 wx.navigateBack을 사용하여 원래 페이지로 돌아갑니다.
Parameter
TypeRequiredurl | String | ||
---|---|---|---|
success | Function | No. 끝 인터페이스 호출 (성공한 호출과 실패한 호출 모두 실행됩니다) | |
샘플 코드: | wx.navigateTo({ url: 'test?id=1'//实际路径要写全 }) |
||
주의: 미니 프로그램을 사용할 때 사용자에게 문제를 일으키지 않기 위해 다음 사항을 규정합니다. 페이지 경로는 5단계까지만 가능하므로 다단계 상호작용 방식은 피하세요. | (2) wx.redirectTo(OBJECT) | ||
Parameter | Type | Required |
url
String
은 점프해야 하는 애플리케이션의 tabBar가 아닌 페이지에 대한 경로입니다. 경로. 매개변수와 경로는 ?로 구분되고, 매개변수 키와 매개변수 값은 =로 연결되며, 서로 다른 매개변수는 &로 구분됩니다. 예를 들어 'path?key=value&key2=value2'
Function
No. 끝 인터페이스 호출(성공한 호출과 실패한 호출 모두 실행됨)
wx.redirectTo({ url: 'test?id=1' }) |
(3) wx.switchTab(OBJECT) | ||
---|---|---|---|
Parameter | Type | ||
Description | url | ||
is | 점프해야 하는 tabBar 페이지의 경로 (페이지는 app.json의 tabBar 필드에 정의되어야 함), 경로는 | success | |
No | 성공적인 인터페이스 호출을 위한 콜백 함수 | fail |
함수
No인터페이스 호출 종료 시 콜백 함수(호출 성공 또는 실패 시 실행)参数 | 类型 | 必填 | 说明 |
---|---|---|---|
delta | Number | 1 | 返回的页面数,如果 delta 大于现有页面数,则返回到首页。 |
示例代码:
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码 // 此处是A页面 wx.navigateTo({ url: 'B?id=1' })
// 此处是B页面 wx.navigateTo({ url: 'C?id=1' })
// 在C页面内 navigateBack,将返回A页面 wx.navigateBack({ delta: 2 })
(5)使用
navigator
页面链接。
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 应用内的跳转链接 | |
redirect | Boolean | false | 打开方式为页面重定向,对应 wx.redirectTo(将被废弃,推荐使用 open-type) |
open-type | String | navigate | 可选值 ‘navigate'、'redirect'、'switchTab',对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能 |
hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class=”none”时,没有点击态效果 |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | Number | 600 | 手指松开后点击态保留时间,单位毫秒 |
示例代码:
<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator> <navigator url="index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
3.页面的路由和生命周期
(1)页面的路由
在小程序中所有页面的路由全部由框架进行管理,对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由后页面 | 路由前页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad,onShow | |
打开新页面 | 调用 API wx.navigateTo 或使用组件 | onLoad,onShow | onHide |
页面重定向 | 调用 API wx.redirectTo 或使用组件 | onLoad,onShow | onUnload |
页面返回 | 调用 API wx.navigateBack 或用户按左上角返回按钮 | onShow | onUnload(多层页面返回每个页面都会按顺序触发onUnload) |
Tab 切换 | 调用 API wx.switchTab 或使用组件 或用户切换 Tab | 各种情况请参考下表 |
Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):
当前页面 | 路由后页面 | 触发的生命周期(按顺序) |
---|---|---|
A | A | Nothing happend |
A | B | A.onHide(), B.onLoad(), B.onShow() |
A | B(再次打开) | A.onHide(), B.onShow() |
C | A | C.onUnload(), A.onShow() |
C | B | C.onUnload(), B.onLoad(), B.onShow() |
D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
D(从分享进入) | A | D.onUnload(), A.onLoad(), A.onShow() |
D(从分享进入) | B | D.onUnload(), B.onLoad(), B.onShow() |
4.参数传递
(1)通过路径传递参数
通过路径传递参数在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和
示例代码:以wx.navigateTo为代表
" wx.navigateTo({ url: 'test?id=1'//实际路径要写全 })
//test.js Page({ onLoad: function(option){ console.log(option.id) } })
参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;
test?id=1 中id为参数键,1 为参数值
在目的页面中onLoad()方法中option对象即为参数对象,可以通过参数键来取出参数值
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
위 내용은 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를 무료로 생성하십시오.

인기 기사

뜨거운 도구

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

Dreamweaver Mac版
시각적 웹 개발 도구

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
