So verwenden Sie ThinkPHP6, um Multi-Terminal-Kompatibilität zu erreichen

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:

// 设置模板路径
$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.

// 设置模板路径
$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;
}
// 移动端样式
@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!