Comment utiliser ThinkPHP6 pour obtenir une compatibilité multi-terminal

Comment utiliser ThinkPHP6 pour obtenir une compatibilité multi-terminal

Avec la popularité des appareils mobiles, la façon dont les gens accèdent aux sites Web a également beaucoup changé. De plus en plus d'utilisateurs commencent à utiliser des téléphones mobiles, des tablettes et d'autres terminaux mobiles pour accéder à des sites Web et espèrent vivre une bonne expérience. Afin d'obtenir une compatibilité multi-terminal, nous pouvons utiliser certaines fonctions fournies par le framework ThinkPHP6.

Définir plusieurs contrôleurs

Pour un site Web, il doit fournir différentes pages à différents terminaux, ce qui nécessite l'utilisation de différents contrôleurs pour gérer les requêtes. Par exemple, s'il existe un site Internet www.example.com, nous pourrons être amenés à fournir différentes pages pour différents terminaux :

• Côté PC : utiliser la page d'accueil de www.example.com#🎜🎜 #
Terminal mobile : Utilisation de la page d'accueil de m.example.com

Nous pouvons créer deux contrôleurs dans le répertoire de l'application : Index.php et Mobile.php, respectivement. demandes d'accès mobiles. Voici l'implémentation du code d'Index.php et Mobile.php : 🎜 🎜#

Dans l'étape précédente, nous avons créé deux contrôleurs et les avons utilisés pour gérer les demandes d'accès provenant de différents terminaux. Ensuite, nous devons permettre au site Web de prendre en charge différents terminaux via la réécriture d'URL.

Nous pouvons utiliser les règles de routage fournies par ThinkPHP6 pour compléter la fonction de réécriture d'URL. Créez un fichier route.php dans le répertoire route sous le répertoire de l'application et écrivez des règles de réécriture d'URL. Ce qui suit est un exemple simple de règle de réécriture d'URL :

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

Dans le code ci-dessus, nous utilisons la méthode Route::domain('m', function () {}) pour définir un nom de sous-domaine m, ce nom de sous-domaine peut rediriger les demandes d'accès vers la méthode d'indexation du contrôleur mobile.

De plus, nous utilisons également la méthode Route::pattern() pour spécifier la valeur par défaut du paramètre mobile comme Mobile, de sorte que lorsque nous omettons le paramètre mobile dans l'URL d'accès, le framework définir automatiquement la valeur du paramètre mobile pour Mobile.

Compatibilité des modèles

Pour différents terminaux, nous devons fournir différents modèles pour garantir que les utilisateurs puissent bénéficier d'une meilleure expérience d'accès. Afin de réaliser cette fonction, nous pouvons y parvenir via la classe d'adaptateur dans le modèle d'adaptateur.

Nous pouvons créer deux dossiers de modèles dans le répertoire view sous le répertoire de l'application : index et mobile, qui sont utilisés respectivement pour stocker les fichiers modèles correspondants.

Ensuite, nous pouvons spécifier le chemin du modèle correspondant au contrôleur en définissant la méthode $this->view->config('view_path') respectivement dans le contrôleur d'index et le contrôleur mobile. Par exemple, dans le contrôleur d'index, nous pouvons utiliser le code suivant pour définir le chemin du modèle :

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

De même, dans le contrôleur mobile, nous devons également définir le chemin du modèle correspondant. C'est juste que le chemin du modèle ici devrait être le fichier modèle dans le répertoire mobile.

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

De cette façon, nous pouvons fournir différents modèles de pages pour différents terminaux.

CSS Media Query

CSS Media Query est une technique d'implémentation de mise en page réactive en CSS. Cette technologie peut réaliser l’adaptation de la mise en page des pages Web en fonction de différentes largeurs, hauteurs et autres paramètres de l’appareil. Le framework

ThinkPHP6 prend également en charge l'utilisation de la technologie CSS Media Query pour obtenir une compatibilité multi-terminal. Nous pouvons écrire le code suivant dans le fichier modèle :

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

Dans le code ci-dessus, nous définissons un style commun .link pour l'affichage du style par défaut. Dans le même temps, nous utilisons @media screen et (max-width: 768px) {} pour surveiller les changements de largeur d'écran et passer automatiquement au style mobile lorsque la largeur d'écran est inférieure ou égale à 768px.

Summary

Dans cet article, nous implémentons la compatibilité multi-terminal pour le site Web en utilisant les règles de routage, la compatibilité des modèles et la technologie CSS Media Query fournies par le framework ThinkPHP6.

Grâce à l'application de ces technologies, nous pouvons fournir différents contenus et mises en page de pages pour différents terminaux, afin que les utilisateurs puissent bénéficier d'une meilleure expérience d'accès et d'une bonne expérience d'utilisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!