uniapp はタイトルを変更するためにジャンプしてパラメーターを渡します

モバイル アプリケーションの台頭とユーザー数の増加に伴い、クロスプラットフォーム開発フレームワークとして uniapp の使用を選択する開発者が増えています。実際の開発では、ページにジャンプしたりパラメータを渡したりする必要があり、また、ページの内容に合わせてタイトルを変更する必要も出てきます。そこでこの記事では、uniappでパラメータのジャンプやタイトル変更の機能を実装する方法を紹介します。

1. uniapp でのルート ジャンプ

Uniapp は Vue.js をベースにしたフレームワークであり、そのルート ジャンプは基本的に Vue.js と同じです。 uniapp では、uni.navigateTo() メソッドを使用してページにジャンプでき、uni.navigateBack() メソッドを使用して前のページに戻ることもできます。なお、H5側(Webページ)でuni-appシミュレータを使用する場合、uni.navigateBack()メソッドは使用できません。

次は、ターゲット ページにジャンプするサンプル コードです:

uni.navigateTo({
  url: '/pages/targetPage/targetPage'
});

2. パラメーターの受け渡し

実際の開発では、ページ間でデータを受け渡す必要があることがよくあります。たとえば、ログイン後、パーソナル センター ページにユーザーのユーザー名とアバターを表示する必要があります。 uniapp では、パラメータの受け渡しは非常に簡単で、ジャンプ リンクにパラメータを追加するだけです。

以下は、パラメータを渡すためのサンプル コードです。

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john'
});

ターゲット ページ (つまり、targetPage) で、uni.getStorageSync() メソッドを使用して、渡されたパラメータを取得できます。以下はパラメータを取得するためのサンプル コードです。

onLoad: function (options) {
    console.log(options.id);    // 输出：123
    console.log(options.name);  // 输出：john
}

パラメータを渡すときは、文字化けを避けるために encodeURIComponent() メソッドを使用してエンコードすることをお勧めします。ターゲット ページでは、decodeURIComponent() メソッドを使用してデコードできます。

3. タイトルの変更

uniapp では、ページ タイトルを設定することでページ コンテンツをより適切に表示できるため、ユーザーは現在のページに表示されているコンテンツをより簡単に理解できるようになります。 page.json ファイルで「navigationBarTitleText」プロパティを設定するか、uni.setNavigationBarTitle() メソッドを使用できます。

以下はページ タイトルを設定するサンプル コードです:

// 在page.json文件中设置页面标题
{
  "navigationBarTitleText": "页面标题"
}

// 使用uni.setNavigationBarTitle方法设置页面标题
uni.setNavigationBarTitle({
  title: '页面标题'
});

次の点に注意してください:

1. ナビゲーション バーのタイトルをpage.json ファイルでは、uni.setNavigationBarTitle() メソッドを通じて js ファイルに設定されたタイトルが上書きされます。
2. これは現在のページでのみ有効です。新しいページに入るたびにタイトルをリセットする必要があります。

4. ジャンプ パラメータを実装してタイトルを変更する

ページにジャンプするときにパラメータを渡してタイトルを変更する必要がある場合は、次の方法で実現できます:

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john',
  success: function () {
    uni.setNavigationBarTitle({
      title: '目标页面标题'
    });
  }
});

ジャンプ成功時のコールバック関数にはターゲットページのタイトルを設定する必要があることに注意してください。そうしないと、タイトルが正常に変更されない可能性があります。

5. まとめ

この記事では、ページジャンプ、パラメータの受け渡し、タイトル変更などの基本操作をuniappで実装する方法を紹介します。開発者は、実際のプロジェクトで必要に応じてコードをさらにカスタマイズできます。開発中に、ニーズが何であっても、それらを uniapp に実装する方法を見つけることができます。

以上がuniapp はタイトルを変更するためにジャンプしてパラメーターを渡しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。