ThinkPHP6 を使用して複数端末の互換性を実現する方法

ThinkPHP6 を使用してマルチターミナル互換性を実現する方法

モバイル デバイスの普及に伴い、人々が Web サイトにアクセスする方法も大きく変化しました。ますます多くのユーザーが携帯電話、タブレット、その他のモバイル端末を使用して Web サイトにアクセスし始めており、優れたエクスペリエンスを得ることを望んでいます。複数端末の互換性を実現するために、ThinkPHP6 フレームワークによって提供されるいくつかの機能を使用できます。

複数のコントローラを定義する

Web サイトの場合、さまざまな端末にさまざまなページを提供する必要があるため、リクエストを処理するためにさまざまなコントローラを使用する必要があります。たとえば、Web サイト www.example.com がある場合、端末ごとに異なるページを提供する必要がある場合があります:

#PC 端末: www.example.com ホームページを使用します
• モバイル端末: m.example.com ホームページを使用する

アプリケーション ディレクトリに Index.php と Mobile.php という 2 つのコントローラーを作成できます。これらは、PC とモバイルからのアクセス要求を処理するために使用されます。それぞれの端子です。以下は、Index.php と Mobile.php のコード実装です。

Index.php

<?php
namespace appindexcontroller;
use thinkController;
class Index extends Controller
{
    public function index()
    {
        return $this->fetch('index');
    }
}

Mobile.php

<?php
namespace appmobilecontroller;
use thinkController;
class Mobile extends Controller
{
    public function index()
    {
        return $this->fetch('index');
    }
}

URL Rewriting

上記1 つのステップで 2 つのコントローラーを作成し、それらを使用してさまざまな端末からのアクセス要求を処理しました。次に、URL を書き換えて Web サイトがさまざまな端末をサポートできるようにする必要があります。

ThinkPHP6 が提供するルーティング ルールを使用して、URL 書き換え機能を完了できます。アプリケーションディレクトリ下のrouteディレクトリにroute.phpファイルを作成し、URL書き換えルールを記述します。以下は、簡単な URL 書き換えルールの例です。

use thinkacadeRoute;
Route::pattern([
    'mobile' => 'Mobile',
]);
Route::domain('m', function () {
    Route::get('/', 'mobile/index');
});

上記のコードでは、Route::domain('m', function () {}) メソッドを使用して、サブドメイン名 m、このサブドメインを設定します。 name は、アクセス要求をモバイル コントローラーのインデックス メソッドにリダイレクトできます。

さらに、Route::pattern() メソッドを使用して mobile パラメータのデフォルト値を Mobile として指定しました。これにより、アクセス URL で mobile パラメータを省略すると、フレームワークが自動的に設定します。 mobile パラメータ値を Mobile に設定します。

テンプレートの互換性

ユーザーがより良いアクセス エクスペリエンスを得ることができるように、端末ごとに異なるテンプレートを提供する必要があります。この機能を実現するには、アダプター パターンのアダプター クラスを通じて実現できます。

アプリケーション ディレクトリの下のビュー ディレクトリに、index と mobile という 2 つのテンプレート フォルダーを作成できます。これらは、それぞれ対応するテンプレート ファイルを保存するために使用されます。

次に、インデックス コントローラーとモバイル コントローラーで $this->view->config('view_path') メソッドを設定することで、コントローラーに対応するテンプレート パスを指定できます。たとえば、インデックス コントローラーでは、次のコードを使用してテンプレート パスを設定できます。

// 设置模板路径
$this->view->config('view_path', app()->getBasePath() . 'view/index/');

同様に、モバイル コントローラーでも、対応するテンプレート パスを設定する必要があります。ここでのテンプレートのパスは、モバイル ディレクトリ内のテンプレート ファイルでなければなりません。

// 设置模板路径
$this->view->config('view_path', app()->getBasePath() . 'view/mobile/');

このようにして、さまざまな端末にさまざまなページ テンプレートを提供できます。

CSS メディア クエリ

CSS メディア クエリは、CSS でレスポンシブ レイアウトを実装するためのテクノロジーです。この技術は、さまざまなデバイスの幅、高さ、その他のパラメータに応じて Web ページのレイアウトを適応させることができます。

ThinkPHP6 フレームワークは、複数端末の互換性を実現するための CSS メディア クエリ テクノロジの使用もサポートしています。テンプレート ファイルに次のコードを記述できます。

// 普通样式
.link {
    text-decoration: none;
    color: #333;
}
// 移动端样式
@media screen and (max-width: 768px) {
    .link {
        color: #0079cf;
    }
}

上記のコードでは、デフォルトでスタイル表示用の共通スタイル .link を設定します。同時に @media screen と (max-width: 768px) {} を使用して画面幅の変化を監視し、画面幅が 768px 以下になると自動的にモバイル スタイルに切り替えます。

概要

この記事では、ThinkPHP6 フレームワークが提供するルーティング ルール、テンプレート互換性、CSS メディア クエリ テクノロジーを使用して、Web サイトのマルチターミナル互換性を実装しました。

これらの技術を応用することで、端末ごとに異なるページコンテンツやレイアウトを提供することができ、ユーザーはより良いアクセス体験や快適な利用体験を得ることができます。

以上がThinkPHP6 を使用して複数端末の互換性を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。