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

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

不言
リリース: 2018-06-23 15:33:34
オリジナル
2281 人が閲覧しました

この記事では、主に WeChat ミニ プログラムのページ ジャンプとデータ転送の例に関する情報を紹介します。ここでは、自宅で学習して理解するのに役立つサンプル コードを紹介します。

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. (1 )wx.navigateTo(OBJECT)

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

パラメータタイプ

必須

説明urlStringは、ジャンプする必要があるアプリケーション内の非タブバーページのパスです。もたらすことができるパスパラメータの後に指定します。パラメーターとパスは ? で区切られ、パラメーター キーとパラメーター値は = で接続され、異なるパラメーターは & で区切られます (例: '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)

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


Parameter

TypeRequired

Description

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

Parameter

TypeRequired

Description

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

示例代码:

{
 "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中文网!

相关推荐:

微信小程序实现实时圆形进度条的方法

微信小程序 监听手势滑动切换页面的实现

以上がWeChat アプレットのページジャンプとデータ転送の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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