uniapp secara dinamik menetapkan fon kepada saiz seragam

Dalam pembangunan aplikasi mudah alih, reka bentuk UI adalah bahagian yang sangat penting. Antaranya, saiz fon adalah bahagian yang sangat penting kerana ia secara langsung mempengaruhi pengalaman membaca pengguna. Dalam UniApp, kami boleh menetapkan saiz fon secara dinamik dalam beberapa cara mudah untuk memastikan konsistensi aplikasi.

Kaedah pertama: Tetapkan saiz fon global

Untuk menetapkan saiz fon global, anda boleh menggunakan pembolehubah Vue.config.productionTip untuk menetapkan gaya global apabila aplikasi dimulakan. Tambahkan kod berikut dalam App.vue:

export default {
    onLaunch: function() {
        Vue.config.productionTip = false
        uni.setGlobalStyle({
            'html,body': {
                fontSize: uni.upx2px(32) + 'px'
            }
        })
    }
}

Di mana, uni.upx2px(32) menukar 32upx kepada saiz piksel sebenar. Ini akan menggunakan saiz fon lalai sebanyak 32 piksel.

Jika anda perlu menukar saiz fon, anda boleh memberikan pilihan dalam tetapan aplikasi dan menyimpan pilihan pengguna secara setempat. Sebagai contoh, tetapan pengguna boleh disimpan secara setempat menggunakan komponen uni-storage:

export default {
    methods: {
        onChangeFontSize: function(value) {
            uni.setStorageSync('font-size', value)
            uni.setGlobalStyle({
                'html,body': {
                    fontSize: uni.upx2px(value) + 'px'
                }
            })
        }
    }
}

Memanggil kaedah ini pada halaman boleh menetapkan saiz fon berbeza yang dipilih oleh pengguna.

<uni-list>
    <uni-list-item v-for="(item, index) in fontSizes" :key="index" :title="item.title" :icon="item.value === currentFontSize ? 'checkmark' : ''" @click="onChangeFontSize(item.value)"></uni-list-item>
</uni-list>

Kaedah kedua: Tetapkan saiz fon secara dinamik mengikut jenis komponen

Kaedah kedua ialah menetapkan saiz fon yang berbeza untuk komponen yang berbeza. Contohnya, butang dan kotak teks mungkin memerlukan saiz fon yang berbeza. Anda boleh menggayakan komponen dengan menambahkan atribut gaya tersuai pada komponen, seperti ditunjukkan di bawah:

<uni-button custom-style="font-size: 28upx;">My Button</uni-button>
<uni-input custom-style="font-size: 24upx;"></uni-input>

Dalam contoh ini, kami menetapkan butang kepada saiz fon 28upx dan kotak teks kepada saiz fon 24upx. Ambil perhatian sekali lagi bahawa kami menggunakan upx dan bukannya piksel untuk memastikan rupa yang konsisten merentas peranti dengan saiz yang berbeza.

Kelemahan kaedah ini ialah anda perlu mencari semua komponen dalam aplikasi yang perlu mengubah suai saiz fon dan menambah atribut gaya tersuai secara manual. Jika aplikasinya sangat besar, ini boleh menjadi sangat menyusahkan.

Kesimpulan

Secara keseluruhannya, menetapkan saiz fon secara dinamik dalam UniApp adalah sangat mudah. Anda boleh menetapkan saiz fon lalai secara global dan menyediakan pilihan saiz fon dalam aplikasi, atau anda boleh menetapkan saiz fon secara individu untuk setiap komponen. Walau apa pun, pastikan anda mengekalkan rupa dan rasa yang konsisten merentas peranti dengan saiz yang berbeza untuk memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci uniapp secara dinamik menetapkan fon kepada saiz seragam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!