ホームページ >ウェブフロントエンド >jsチュートリアル >マルチレベルページに戻る WeChat アプレットを実装する方法
この記事は主にWeChatアプレットでマルチレベルページを返す実装方法に関する関連情報を紹介します。この記事がそのような機能を実現するのに役立つことを願っています。 。
マルチレベルのページに戻る WeChat アプレットの実装方法
WeChat アプレットの開発では、前のページに戻るのは非常に一般的な操作であり、最も一般的な操作は、電話のリターン キーをクリックして、 をクリックすることです。どちらの場合も前のページに戻るためのカスタム ボタン。電話機の戻るボタンをクリックするときに処理を行う必要はありません。リターン効果を実現するためのカスタム ボタンの場合は、WeChat が提供する API を呼び出す必要があります:
wx.navigateBack(OBJECT)
wx を使用することもできます。 navigateBack メソッドを使用して、デルタの値を設定するだけです。 はい:
//在C页面内 navigateBack,将返回A页面,delta = 1 时与 wx.navigateBack() 效果一致 wx.navigateBack({ delta: 2 })
ただし、この場合、前の 2 つ以上のページに戻るには、電話機の戻るボタンをクリックする必要があります。上記のメソッドを直接使用して処理することはできません。これを実現するために、次の 2 つの方法を使用しました。
方法 1: ページ C の onUnload メソッドで wx.navigateBack() を呼び出します。これにより、ページ A に戻ることができます。ただし、ページ C の場合は問題が発生します。 WeChat チャット セッションに共有し、ミニ プログラムを閉じて、チャット セッションからページ C を開きます。また、wx.navigateBack() メソッドが呼び出され、この例外が報告されます:
WAService.js:9 navigateBack with an unexist webviewId 0
方法 2: もう 1 つの方法は、ページを開くことです。B の onShow メソッドで wx.navigateBack() を呼び出して return を実装し、方法 1 の問題を回避します。実装の考え方は以下の通りです:
① ページCのonUnloadメソッドで、getCurrentPages()メソッドで現在のページスタックを取得できるかどうかを判定します。ページスタックの長さに基づいて決定され、与えることができます 全ページのデータ設定パラメータ、前の 2 ページに戻る例:
//这里是页面C的 onUnload 方法 onUnload: function() { var that = this //判断页面栈里面的页面数是否大于2 if(getCurrentPages().length > 2) { //获取页面栈 let pages = getCurrentPages() //给上一个页面设置状态 let curPage = pages[pages.length - 2]; let data = curPage.data; curPage.setData({'isBack': true}); } },
② ページ B の onShow メソッドで、 isBack の値に基づいて wx.navigateBack() を呼び出します:
//这里是页面B的 onShow 方法 onShow: function() { var that = this //如果 isBack 为 true,就返回上一页 if(that.data.isBack) { wx.navigateBack() } },
メソッド 1 とメソッド 2 の両方 ページ C からページ A に直接移動する代わりに、最初にページ B を経由する必要があるため、ページ B がしばらく点滅します. もっと良い方法があれば教えてください。
関連する推奨事項:
WeChatミニプログラムでのアバターのアップロードの詳細な説明
WeChatミニプログラムのプロセス進行状況のグラフスタイル機能の実装方法
以上がマルチレベルページに戻る WeChat アプレットを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。