So nutzen Sie ThinkPHP6, um Multi-Terminal-Kompatibilit?t zu erreichen

Mit der Beliebtheit mobiler Ger?te hat sich auch die Art und Weise, wie Menschen auf Websites zugreifen, stark ver?ndert. Immer mehr Benutzer nutzen Mobiltelefone, Tablets und andere mobile Endger?te, um auf Websites zuzugreifen, und hoffen auf eine gute Erfahrung. Um Multi-Terminal-Kompatibilit?t zu erreichen, k?nnen wir einige Funktionen verwenden, die vom ThinkPHP6-Framework bereitgestellt werden.

Definieren Sie mehrere Controller

Für eine Website sollte sie unterschiedliche Seiten für verschiedene Terminals bereitstellen, was die Verwendung unterschiedlicher Controller zur Bearbeitung von Anfragen erfordert. Wenn es beispielsweise eine Website www.example.com gibt, müssen wir m?glicherweise unterschiedliche Seiten für verschiedene Terminals bereitstellen:

• PC-Seite: Verwenden Sie die Startseite von www.example.com.
• Mobile Seite: Verwenden Sie die Startseite von m.example.com

Wir k?nnen im Anwendungsverzeichnis zwei Controller erstellen: Index.php und Mobile.php, die zur Bearbeitung von Zugriffsanfragen vom PC bzw. mobilen Endger?ten verwendet werden. Das Folgende ist die Code-Implementierung von Index.php und 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-Umschreiben

Im vorherigen Schritt haben wir zwei Controller erstellt und sie verwendet, um den Zugriff verschiedener Terminals zu verwalten Anfrage. Als n?chstes müssen wir die Website durch URL-Umschreiben in die Lage versetzen, verschiedene Terminals zu unterstützen.

Wir k?nnen die von ThinkPHP6 bereitgestellten Routing-Regeln verwenden, um die URL-Rewriting-Funktion abzuschlie?en. Erstellen Sie eine Route.php-Datei im Routenverzeichnis unter dem Anwendungsverzeichnis und schreiben Sie Regeln zum Umschreiben von URLs. Das Folgende ist ein einfaches Beispiel für eine URL-Umschreibungsregel:

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

Im obigen Code verwenden wir die Route::domain('m', function () {})-Methode, um einen Subdomain-Namen m festzulegen, der die Zugriffsanforderung umleiten kann zur Indexmethode des mobilen Controllers.

Darüber hinaus haben wir auch die Route::pattern()-Methode verwendet, um den Standardwert des mobilen Parameters als Mobile anzugeben, sodass das Framework automatisch den mobilen Parameterwert festlegt, wenn wir den mobilen Parameter in der Zugriffs-URL weglassen zu Mobil.

Vorlagenkompatibilit?t

Für verschiedene Terminals müssen wir unterschiedliche Vorlagen bereitstellen, um sicherzustellen, dass Benutzer ein besseres Zugriffserlebnis erhalten. Um diese Funktion zu erreichen, k?nnen wir sie über die Adapterklasse im Adaptermuster erreichen.

Wir k?nnen im Ansichtsverzeichnis unter dem Anwendungsverzeichnis zwei Vorlagenordner erstellen: index und mobile, in denen jeweils die entsprechenden Vorlagendateien gespeichert werden.

Dann k?nnen wir den dem Controller entsprechenden Vorlagenpfad angeben, indem wir die Methode $this->view->config('view_path') im Index-Controller bzw. mobilen Controller festlegen. Im Index-Controller k?nnen wir beispielsweise den folgenden Code verwenden, um den Vorlagenpfad festzulegen:

// 設(shè)置模板路徑
$this->view->config('view_path', app()->getBasePath() . 'view/index/');

Ebenso müssen wir im mobilen Controller auch den entsprechenden Vorlagenpfad festlegen. Es ist nur so, dass der Vorlagenpfad hier die Vorlagendatei im mobilen Verzeichnis sein sollte.

// 設(shè)置模板路徑
$this->view->config('view_path', app()->getBasePath() . 'view/mobile/');

Auf diese Weise k?nnen wir unterschiedliche Seitenvorlagen für verschiedene Endger?te bereitstellen.

CSS Media Query

CSS Media Query ist eine Technologie zur Implementierung eines responsiven Layouts in CSS. Diese Technologie kann die Anpassung des Webseitenlayouts an unterschiedliche Ger?tebreiten, -h?hen und andere Parameter realisieren.

Das ThinkPHP6-Framework unterstützt auch die Verwendung der CSS Media Query-Technologie, um Multi-Terminal-Kompatibilit?t zu erreichen. Wir k?nnen den folgenden Code in die Vorlagendatei schreiben:

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

Im obigen Code legen wir standardm??ig einen gemeinsamen Stil .link für die Stilanzeige fest. Gleichzeitig verwenden wir @media screen und (max-width: 768px) {}, um ?nderungen der Bildschirmbreite zu überwachen und automatisch auf den mobilen Stil umzuschalten, wenn die Bildschirmbreite kleiner oder gleich 768px ist.

Zusammenfassung

In diesem Artikel haben wir die Multi-Terminal-Kompatibilit?t für die Website implementiert, indem wir die Routing-Regeln, die Vorlagenkompatibilit?t und die CSS Media Query-Technologie des ThinkPHP6-Frameworks verwendet haben.

Durch die Anwendung dieser Technologien k?nnen wir unterschiedliche Seiteninhalte und Layouts für verschiedene Terminals bereitstellen, sodass Benutzer ein besseres Zugriffserlebnis und ein gutes Nutzungserlebnis erhalten.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ThinkPHP6, um Multi-Terminal-Kompatibilit?t zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!