How to use ThinkPHP6 to achieve multi-terminal compatibility

How to use ThinkPHP6 to achieve multi-terminal compatibility

With the popularity of mobile devices, the way people access websites has also changed a lot. More and more users are beginning to use mobile phones, tablets and other mobile terminals to access websites, and hope to get a good experience. In order to achieve multi-terminal compatibility, we can use some functions provided by the ThinkPHP6 framework.

Define multiple controllers

For a website, it should provide different pages to different terminals, which requires using different controllers to handle requests. For example, if there is a website www.example.com, we may need to provide different pages for different terminals:

• PC terminal: use www.example.com home page
• Mobile terminal: Using m.example.com homepage

We can create two controllers in the application directory: Index.php and Mobile.php, which are used to handle access requests from PC and mobile terminals respectively. . The following is the code implementation of Index.php and 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

above In one step, we created two controllers and used them to handle access requests from different terminals. Next, we need to enable the website to support different terminals through URL rewriting.

We can use the routing rules provided by ThinkPHP6 to complete the URL rewriting function. Create a route.php file in the route directory under the application directory and write URL rewriting rules. The following is a simple URL rewriting rule example:

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

In the above code, we use the Route::domain('m', function () {}) method to set a subdomain name m, This subdomain name can redirect access requests to the index method of the mobile controller.

In addition, we also used the Route::pattern() method to specify the default value of the mobile parameter as Mobile, so that when we omit the mobile parameter in the access URL, the framework will automatically set the mobile parameter value to Mobile .

Template Compatibility

For different terminals, we need to provide different templates to ensure that users can get a better access experience. In order to achieve this function, we can achieve it through the adapter class in the adapter pattern.

We can create two template folders in the view directory under the application directory: index and mobile, which are used to store the corresponding template files respectively.

Then, we can specify the template path corresponding to the controller by setting the $this->view->config('view_path') method in the index controller and mobile controller respectively. For example, in the index controller, we can use the following code to set the template path:

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

Similarly, in the mobile controller, we also need to set the corresponding template path. It's just that the template path here should be the template file in the mobile directory.

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

In this way, we can provide different page templates for different terminals.

CSS Media Query

CSS Media Query is a technology for implementing responsive layout in CSS. This technology can realize the adaptation of web page layout according to different device width, height and other parameters.

ThinkPHP6 framework also supports the use of CSS Media Query technology to achieve multi-terminal compatibility. We can write the following code in the template file:

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

In the above code, we set a common style .link for style display by default. At the same time, we use @media screen and (max-width: 768px) {} to monitor screen width changes, and automatically switch to the mobile style when the screen width is less than or equal to 768px.

Summary

In this article, we have implemented multi-terminal compatibility for the website by using the routing rules, template compatibility and CSS Media Query technology provided by the ThinkPHP6 framework.

Through the application of these technologies, we can provide different page content and layouts for different terminals, so that users can get a better access experience and a good usage experience.

The above is the detailed content of How to use ThinkPHP6 to achieve multi-terminal compatibility. For more information, please follow other related articles on the PHP Chinese website!