uniappでジャンプメソッドをカプセル化する方法

uniapp アプリケーションの開発プロセスでは、ログイン ページ、パーソナル センター ページなどに入るなど、さまざまなページにジャンプする必要があることがよくあります。開発を容易にするために、ページジャンプを統一的に管理するジャンプメソッドをカプセル化することができますので、この記事ではuniappでジャンプメソッドをカプセル化する方法を紹介します。

1. カプセル化されたジャンプ メソッド

1. 新しい util.js ファイルを作成してカプセル化されたメソッドを保存し、そのファイル内に navigateTo という名前のメソッドを定義します。このメソッドは 2 つのパラメーターを受け取ります。最初のパラメーターはターゲット ページのパス、2 番目のパラメーターは渡す必要のあるデータです。このうち、path パラメーターは必須であり、データはオプションです。

// util.js

export function navigateTo(url, data = {}) {
  uni.navigateTo({
    url: `${url}?${getObjectKeys(data)
      .map(key => `${key}=${data[key]}`)
      .join('&')}`
  });
}

function getObjectKeys(obj) {
  return Object.keys(obj);
}

2. メソッドでは、getObjectKeys を使用してデータ オブジェクト内のすべてのキー名を取得し、次に、map メソッドと join メソッドを使用してキーと値のペアを文字列に結合します。ここで、map メソッドと join メソッドを簡単に紹介します:

map() メソッドは新しい配列を作成し、その結果は、配列内の各要素が指定された関数を呼び出した後に返される結果です。

join() メソッドは、配列内のすべての要素 (文字列の場合は直接出力、配列とオブジェクトの場合は文字列に変換) を文字列に変換し、その要素を連結します。文字列を単一の文字列に変換します。また、配列内の要素を区切るための区切り文字として文字列を指定できます。

3. 最後に、他のモジュールで使用できるようにこのメソッドをエクスポートします。

2. カプセル化されたジャンプ メソッドを使用する

1. ターゲット ページにジャンプする必要がある場合は、カプセル化された navigateTo メソッドを呼び出します。

//index.vue

import { navigateTo } from '@/utils/util.js';

// 模拟获取用户登录状态
const isLogin = true;

export default {
  methods: {
    goLogin() {
      if (!isLogin) {
        navigateTo('/pages/login/login'); // 跳转到登录页面
      } else {
        navigateTo('/pages/personal/personal'); // 跳转到个人中心页面
      }
    }
  }
}

2. 上記の例では、isLoginの値に基づいてユーザーがログインしているかどうかを判断し、ログインしていない場合はログインページにジャンプします。で、個人のセンターページにジャンプします。

これまでのところ、ジャンプ メソッドを正常にカプセル化し、それを他のコンポーネントで使用することができました。このようにして、複雑なページ ジャンプ ロジックによって引き起こされるコードの混乱を回避し、コードの可読性と保守性を向上させることができます。

3. メソッドの最適化

ジャンプ メソッドをカプセル化しましたが、完全ではなく、いくつかの欠陥がまだあります。たとえば、ターゲット ページが複数のパラメータを渡す必要がある場合、パラメータを手動で結合する必要がありますが、これはさらに面倒です。この問題を解決するには、梱包方法を最適化することができます。

1. パラメータをオブジェクトに渡します:

// index.vue

export default {
  methods: {
    goDetail() {
      navigateTo('/pages/detail/detail', {
        id: 123,
        name: 'uniapp封装跳转方法'
      });
    }
  }
}

2. navigateTo メソッドを変更し、JSON.stringify() を使用してパラメータ オブジェクトを JSON 文字列に変換します。それをエンコードして、クエリ文字列の値としてターゲット ページに渡します。

// util.js

export function navigateTo(url, data = {}) {
  uni.navigateTo({
    url: `${url}?data=${encodeURIComponent(JSON.stringify(data))}`
  });
}

3. ターゲット ページがパラメータを取得した後、JSON.parse() を使用してパラメータを js に変換します。オブジェクト:

// detail.vue

export default {
  onLoad(options) {
    this.queryParams = JSON.parse(decodeURIComponent(options.data));
  }
}

これまでのところ、複数のパラメーターを迅速かつ便利に渡すためにジャンプ メソッドを最適化してきました。

つまり、jump メソッドをカプセル化すると、コードの可読性と保守性が向上するだけでなく、コードの記述がさらに簡素化されます。この記事が、uniapp をより良く学び、使用するのに役立つことを願っています。

以上がuniappでジャンプメソッドをカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。