Cara menggunakan ThinkPHP6 untuk mencapai keserasian berbilang terminal

Cara menggunakan ThinkPHP6 untuk mencapai keserasian berbilang terminal

Dengan populariti peranti mudah alih, cara orang mengakses tapak web juga telah banyak berubah. Semakin ramai pengguna mula menggunakan terminal mudah alih seperti telefon mudah alih dan tablet untuk mengakses tapak web, dan berharap mendapat pengalaman yang baik. Untuk mencapai keserasian berbilang terminal, kami boleh menggunakan beberapa fungsi yang disediakan oleh rangka kerja ThinkPHP6.

Tentukan berbilang pengawal

Untuk tapak web, ia harus menyediakan halaman yang berbeza ke terminal yang berbeza, yang memerlukan penggunaan pengawal yang berbeza untuk mengendalikan permintaan. Contohnya, jika terdapat tapak web www.example.com, kami mungkin perlu menyediakan halaman yang berbeza untuk terminal yang berbeza:

• Bahagian PC: gunakan laman utama www.example.com
• Terminal mudah alih: Menggunakan halaman utama m.example.com

kita boleh mencipta dua pengawal dalam direktori aplikasi: Index.php dan Mobile.php, yang digunakan untuk mengendalikan permintaan akses daripada PC dan mudah alih terminal masing-masing. Berikut ialah pelaksanaan kod Index.php dan 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');
    }
}

Penulisan semula URL

di atas Dalam satu langkah, kami mencipta dua pengawal dan menggunakannya untuk mengendalikan permintaan akses daripada terminal yang berbeza. Seterusnya, kami perlu mendayakan tapak web untuk menyokong terminal yang berbeza melalui penulisan semula URL.

Kami boleh menggunakan peraturan penghalaan yang disediakan oleh ThinkPHP6 untuk melengkapkan fungsi penulisan semula URL. Cipta fail route.php dalam direktori laluan di bawah direktori aplikasi dan tulis peraturan penulisan semula URL. Berikut ialah contoh peraturan penulisan semula URL ringkas:

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

Dalam kod di atas, kami menggunakan kaedah Route::domain('m', function () {}) untuk menetapkan nama subdomain m, Subdomain ini nama boleh mengubah hala permintaan akses kepada kaedah indeks pengawal mudah alih.

Selain itu, kami juga menggunakan kaedah Route::pattern() untuk menentukan nilai lalai parameter mudah alih sebagai Mudah Alih, supaya apabila kami meninggalkan parameter mudah alih dalam URL akses, rangka kerja akan ditetapkan secara automatik nilai parameter mudah alih kepada Mudah Alih .

Keserasian Templat

Untuk terminal yang berbeza, kami perlu menyediakan templat yang berbeza untuk memastikan pengguna boleh mendapatkan pengalaman akses yang lebih baik. Untuk mencapai fungsi ini, kita boleh mencapainya melalui kelas penyesuai dalam corak penyesuai.

Kami boleh mencipta dua folder templat dalam direktori paparan di bawah direktori aplikasi: indeks dan mudah alih, yang digunakan untuk menyimpan fail templat yang sepadan masing-masing.

Kemudian, kita boleh menentukan laluan templat yang sepadan dengan pengawal dengan menetapkan kaedah $this->view->config('view_path') dalam pengawal indeks dan pengawal mudah alih masing-masing. Sebagai contoh, dalam pengawal indeks, kita boleh menggunakan kod berikut untuk menetapkan laluan templat:

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

Begitu juga, dalam pengawal mudah alih, kita juga perlu menetapkan laluan templat yang sepadan. Cuma laluan templat di sini mestilah fail templat dalam direktori mudah alih.

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

Dengan cara ini, kami boleh menyediakan templat halaman yang berbeza untuk terminal yang berbeza.

Css Media Query

CSS Media Query ialah teknologi untuk melaksanakan reka letak responsif dalam CSS. Teknologi ini boleh merealisasikan susun atur halaman web adaptif berdasarkan lebar peranti, ketinggian dan parameter lain yang berbeza.

Rangka kerja ThinkPHP6 juga menyokong penggunaan teknologi CSS Media Query untuk mencapai keserasian berbilang terminal. Kami boleh menulis kod berikut dalam fail templat:

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

Dalam kod di atas, kami menetapkan gaya biasa .pautan untuk paparan gaya secara lalai. Pada masa yang sama, kami menggunakan skrin @media dan (lebar maksimum: 768px) {} untuk memantau perubahan lebar skrin dan bertukar secara automatik kepada gaya mudah alih apabila lebar skrin kurang daripada atau sama dengan 768px.

Ringkasan

Dalam artikel ini, kami melaksanakan keserasian berbilang terminal untuk tapak web dengan menggunakan peraturan penghalaan, keserasian templat dan teknologi Pertanyaan Media CSS yang disediakan oleh rangka kerja ThinkPHP6.

Melalui aplikasi teknologi ini, kami boleh menyediakan kandungan dan reka letak halaman yang berbeza untuk terminal yang berbeza, supaya pengguna boleh mendapatkan pengalaman akses yang lebih baik dan pengalaman penggunaan yang baik.

Atas ialah kandungan terperinci Cara menggunakan ThinkPHP6 untuk mencapai keserasian berbilang terminal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!