Bagaimana untuk mengalih keluar gaya halaman web dalam uniapp

Kini semakin banyak tapak web mempunyai aplikasi mereka sendiri pada terminal mudah alih, dan beberapa rangka kerja pembangunan aplikasi mudah alih baharu perlahan-lahan muncul di mata umum. UniApp ialah salah satu rangka kerja pembangunan aplikasi mudah alih yang popular. Ia dibangunkan sepenuhnya berdasarkan pustaka komponen applet Vue.js dan WeChat dan boleh dijalankan pada berbilang platform pada masa yang sama. Walau bagaimanapun, dalam pembangunan sebenar, gaya halaman web lalai UniApp mungkin membuat pembangun tidak berpuas hati.

Langkah 1: Kosongkan gaya CSS lalai UniApp

Gaya CSS lalai UniApp adalah dalam fail helaian gaya asasnya dan kami boleh mengatasinya dengan memperkenalkan gaya bahagian fail CSS tersuai. Operasi khusus adalah seperti berikut:

1. Buat fail baharu bernama reset.css dalam direktori statik projek.
2. Tulis kandungan berikut dalam fail:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/*自定义的其他样式*/

Kod ini mengosongkan gaya CSS lalai UniApp dengan mengatasi nilai lalai semua elemen HTML (yang termasuk margin , padding, border dan sifat-sifat lain), yang setara dengan membina gaya anda sendiri dari bawah. Kami juga boleh menambah gaya CSS tersuai lain di bawah kod ini untuk mencantikkan lagi halaman web.

3. Rujuk fail CSS ini dalam komponen App.vue. Tambahkan kod berikut dalam teg templat:

<style lang="scss" rel="stylesheet">
  @import "../static/reset.css";
</style>

Ini adalah untuk mengosongkan gaya CSS lalai UniApp dengan merujuk fail CSS luaran dalam komponen App.vue. Di sini kami menggunakan kaedah import untuk mengelakkan penambahan fail gaya berulang kali pada fail HTML.

Langkah 2: tetapkan semula gaya CSS global

Selepas mengosongkan gaya CSS lalai UniApp, kami perlu menambah beberapa tetapan semula gaya CSS global, untuk mengelakkan beberapa masalah dalam pembangunan kemudian.

1. Buat fail baharu bernama common.scss dalam direktori statik projek.
2. Tulis kandungan berikut dalam fail ini:

html, body {
    height: 100%;
    min-height: 100%;
}

body {
    color: #333;
    font-size: 15px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #fff;
}

input[type="text"], input[type="number"], input[type="password"] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
input[type="submit"], input[type="button"], button {
    border: none;
    outline: none;
    background-color: tranparent;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*自定义的其他样式*/

Gaya CSS ini boleh menyelesaikan beberapa masalah ketidakkonsistenan gaya antara platform yang berbeza. Contohnya, dalam platform iOS dan Android, sudut bulat kotak input adalah berbeza Menggunakan kod ini boleh mengekalkan konsistensi kotak input pada platform yang berbeza. Pada masa yang sama, kod ini juga menyasarkan beberapa komponen UI yang biasa digunakan, seperti butang. Ia boleh menyelesaikan beberapa ketidakkonsistenan dalam gaya pada pelbagai platform.

3. Rujuk fail CSS ini dalam komponen App.vue. Seperti sebelum ini, tambahkan kod berikut pada teg templat:

<style lang="scss" rel="stylesheet">
  @import "../static/common.scss";
</style>

Ringkasan

Melalui langkah di atas, kami boleh mengalih keluar gaya halaman web lalai dalam pembangunan UniApp dan melaksanakan reka bentuk peribadi halaman web. Antaranya, kami mengosongkan gaya lalai semua elemen dan menyesuaikan gaya dari bawah dan menetapkan semula gaya CSS global untuk menyelesaikan beberapa isu ketidakserasian gaya antara platform yang berbeza. Akhirnya, kami mendapat aplikasi UniApp yang lebih halus dan cantik.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar gaya halaman web dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!