ホームページ > WeChat アプレット > ミニプログラム開発 > WeChatアプレットのページジャンプとデータ転送例の詳細説明

WeChatアプレットのページジャンプとデータ転送例の詳細説明

高洛峰
リリース: 2017-02-18 11:31:31
オリジナル
1840 人が閲覧しました

WeChat アプレット ページのジャンプとデータ転送

1. パイロット

Android では、アクティビティとフラグメントにスタックの概念があり、WeChat アプレット ページにもスタックの概念があります。 WeChat ミニ プログラム ページにジャンプするには、

1.wx.navigateTo(OBJECT);
3.wx.switchTab(OBJECT); の 4 つの方法があります。 navigateBack(OBJECT)
5. 対応するジャンプ関数を実装するために使用します。

その中で、navigateTo は、次のページにジャンプするときに、元のページをページ スタックに保存します。この場合、電話機の戻るボタンをクリックして前のページに移動します。

  1. redirectTo と switchTab はどちらも、最初にスタック内の元のページをクリアしてから、ターゲット ページをスタックにプッシュします。これら 2 つのジャンプ方法は両方とも、システムのリターン キーを使用して前のページに戻ることはできませんが、ミニ プログラムを直接終了します

  2. redirectTo を使用する場合は、ページ内で再度 tabBar またはジャンプ ボタンを使用する必要があります。前のページに戻ることはできません。

  3. switchTab によってジャンプされるページは、tabBar で宣言されたページである必要があります。

  4. tabBar で定義されたフィールドは 5 ページを超えることはできず、アプレットのページ スタック レベルは 5 レベルを超えることはできません。 。

  5. navigateBack は、ページ スタック内の指定されたページにのみ戻ることができ、通常は navigateTo と組み合わせて使用​​されます。

  6. wx.navigateToとwx.redirectToではタブバーページへのジャンプはできません


  7. 2. ページジャンプの具体的な操作はwx.switchTabのみです。

  8. (1 )wx.navigateTo(OBJECT)

現在のページを保持し、アプリケーション内のページにジャンプします。元のページに戻るには、wx.navigateBack を使用します。

パラメータ


タイプ

必須説明url文字列はtabBarページのパスです、パスの後にできることパラメータ付き。パラメーターとパスは ? で区切られ、パラメーター キーとパラメーター値は = で接続され、異なるパラメーターは & で区切られます (例: 'path?key=value&key2=value2')successFunction Noインターフェイス呼び出し成功 コールバック関数failFunctionNo失敗したインターフェイス呼び出しのコールバック関数completeFunctionNoインターフェース呼び出し(成功、失敗両方とも実行されます)
wx.navigateTo({
 url: 'test?id=1'//实际路径要写全
})
ログイン後にコピー
//test.js
Page({
 onLoad: function(option){
 console.log(option.query) 
 }
})
ログイン後にコピー
サンプルコード:

注: ミニプログラムを使用する際にユーザーに迷惑をかけないよう、ページ パスは 5 レベルまでしか指定できないため、複数レベルのインタラクションを避けるようにしてください。

(2) wx.redirectTo(OBJECT)

現在のページを閉じて、アプリケーション内のページにジャンプします。


パラメータ

タイプ


必須

説明url文字列はいジャンプする必要がありますアプリケーション内の非タブバー ページへのパス (その後)パスはパラメータを取ることができます。パラメーターとパスは ? で区切られ、パラメーター キーとパラメーター値は = で接続され、異なるパラメーターは & で区切られます (例: 'path?key=value&key2=value2')successFunction Noインターフェイス呼び出し成功 コールバック関数failFunctionNo失敗したインターフェイス呼び出しのコールバック関数completeFunctionNoインターフェース呼び出し (成功した呼び出しと失敗した呼び出しの両方が実行されます)
wx.redirectTo({
 url: 'test?id=1'
})
ログイン後にコピー
(3) wx.switchTab(OBJECT)
サンプルコード:

tabBar ページにジャンプし、他のすべての非を閉じます-tabBar ページ

OBJECT パラメータの説明:

Parameter

Type

Required

Description必要なtabBarページのパスですジャンプするには (app.json で定義されたページの tabBar フィールドにある必要があります)、パスの後にパラメータを取得することはできません
urlString
successFunctionNo成功したインターフェイス呼び出しのコールバック関数
failFunctionNo失敗したインターフェイス呼び出しのコールバック関数
complete FunctionNoインターフェイス呼び出しの終了時のコールバック関数 (呼び出しが成功または成功した場合に実行されます)失敗しました)

示例代码:

{
 "tabBar": {
 "list": [{
  "pagePath": "index",
  "text": "首页"
 },{
  "pagePath": "other",
  "text": "其他"
 }]
 }
}
ログイン後にコピー

wx.switchTab({
 url: '/index'
})
ログイン後にコピー

(4)wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

OBJECT 参数说明:


参数类型必填说明
deltaNumber1返回的页面数,如果 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

页面链接。


参数类型必填说明
urlString
应用内的跳转链接
redirectBooleanfalse打开方式为页面重定向,对应 wx.redirectTo(将被废弃,推荐使用 open-type)
open-typeStringnavigate可选值 ‘navigate'、'redirect'、'switchTab',对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
hover-classStringnavigator-hover指定点击时的样式类,当hover-class=”none”时,没有点击态效果
hover-start-timeNumber50按住后多久出现点击态,单位毫秒
hover-stay-timeNumber600手指松开后点击态保留时间,单位毫秒

示例代码:

<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,onShowonHide
页面重定向调用 API wx.redirectTo 或使用组件onLoad,onShowonUnload
页面返回调用 API wx.navigateBack 或用户按左上角返回按钮onShowonUnload(多层页面返回每个页面都会按顺序触发onUnload)
Tab 切换调用 API wx.switchTab 或使用组件 或用户切换 Tab各种情况请参考下表

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):


当前页面路由后页面触发的生命周期(按顺序)
AANothing happend
ABA.onHide(), B.onLoad(), B.onShow()
AB(再次打开)A.onHide(), B.onShow()
CAC.onUnload(), A.onShow()
CBC.onUnload(), B.onLoad(), B.onShow()
DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(从分享进入)AD.onUnload(), A.onLoad(), A.onShow()
D(从分享进入)BD.onUnload(), B.onLoad(), B.onShow()

4.参数传递

(1)通过路径传递参数

通过路径传递参数在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和中使用方法相同
示例代码:以wx.navigateTo为代表

"
wx.navigateTo({
 url: &#39;test?id=1&#39;//实际路径要写全
})
ログイン後にコピー

//test.js
Page({
 onLoad: function(option){
 console.log(option.id) 
 }
})
ログイン後にコピー

参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;

test?id=1 中id为参数键,1 为参数值

在目的页面中onLoad()方法中option对象即为参数对象,可以通过参数键来取出参数值

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

更多微信小程序 页面跳转和数据传递实例详解相关文章请关注PHP中文网!


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート