この記事では、主に WeChat ミニ プログラムのページ ジャンプとデータ転送の例に関する情報を紹介します。ここでは、自宅で学習して理解するのに役立つサンプル コードを紹介します。
WeChat ミニ プログラムのページ ジャンプとデータ。転送
1. 予備
Android では、アクティビティとフラグメントにスタックの概念があり、WeChat アプレット ページにもスタックの概念があります。 WeChat ミニ プログラム ページにジャンプするには、
1.wx.navigateTo(OBJECT);
3.wx.switchTab(OBJECT); の 4 つの方法があります。 navigateBack(OBJECT)
5. 対応するジャンプ関数を実装するために使用します。
2. (1 )wx.navigateTo(OBJECT)
パラメータタイプ
必須
url | String | は、ジャンプする必要があるアプリケーション内の非タブバーページのパスです。もたらすことができるパスパラメータの後に指定します。パラメーターとパスは ? で区切られ、パラメーター キーとパラメーター値は = で接続され、異なるパラメーターは & で区切られます (例: 'path?key=value&key2=value2') | |
---|---|---|---|
Function | No | インターフェイス呼び出し成功 コールバック関数 | |
Function | No | 失敗したインターフェイス呼び出しのコールバック関数 | |
Function | No | インターフェース呼び出し(成功、失敗両方とも実行されます) | |
サンプルコード: |
現在のページを閉じて、アプリケーション内のページにジャンプします。
Parameter
TypeRequired
Description
url | String | は、ジャンプする必要があるアプリケーション内の非タブバーページへのパスです。パラメータは後に含めることができます。パス 。パラメーターとパスは ? で区切られ、パラメーター キーとパラメーター値は = で接続され、異なるパラメーターは & で区切られます (例: 'path?key=value&key2=value2') | |
---|---|---|---|
No | インターフェイス呼び出し成功 コールバック関数 | fail | |
No | 失敗したインターフェイス呼び出しのコールバック関数 | complete | |
No | インターフェース呼び出し (成功した呼び出しと失敗した呼び出しの両方が実行されます) | ||
(3) wx.switchTab(OBJECT) |
Parameter
TypeRequired
Description
String | は | ジャンプする必要があるtabBarページのパス(ページは app.json の tabBar フィールドで定義する必要があります)、パス | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
No | インターフェイス呼び出しが成功した場合のコールバック関数 | fail | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
No | 失敗したインターフェイス呼び出しのコールバック関数 | complete | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 中国語 Web サイトの他の関連記事を参照してください。