uniapp實現(xiàn)全局設置字體大小(小中大的字體切換)
更新時間：2023年06月23日 11:08:53 作者：小佩丫
隨著UniApp的流行,越來越多的開發(fā)者選擇使用它來構建跨平臺應用程序,下面這篇文章主要給大家介紹了關于uniapp實現(xiàn)全局設置字體大小(小中大的字體切換)的相關資料,需要的朋友可以參考下
一、效果圖
二、原理解析
要實現(xiàn)文字大小的動態(tài)切換，考慮到使用
rem機制。只需要通過修改根節(jié)點的font-size值，就能改變文字呈現(xiàn)出來的大小
但是一般我們的項目始用的都是px或rpx單位，全局修改單位未免不現(xiàn)實。所以這里用到了postcss-px-to-viewport插件。
postcss-px-to-viewport可以幫助我們把項目的單位進行統(tǒng)一的轉(zhuǎn)換，且不需要改動源代碼。
所以思路為：
- 利用postcss-px-to-viewport把單位全部轉(zhuǎn)換為rem
- 把根節(jié)點font-size值寫入vuex中。
- 實現(xiàn)字體大小設置頁面。修改大小后，要把值寫入緩存和vuex。
- APP啟動時，從緩存里讀取上次設置的fontSize值，賦值給vuex_fontsize。
- 其他需要被控制大小的頁面，頂部添加代碼：
<page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta>
（說明：寫進緩存是為了下次進入頁面時還能保留上次設置的值，寫進vuex中是為了可以響應式修改。）
三、代碼實現(xiàn)
（一）、安裝和配置postcss-px-to-viewport
1、安裝命令：
npm install postcss-px-to-viewport --save-dev
2、根目錄下創(chuàng)建一個 postcss.config.js文件，文件內(nèi)容如下：
const path = require('path')
module.exports = {
parser: 'postcss-comment',
plugins: {
'postcss-import': {
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
},
'autoprefixer': {
overrideBrowserslist: ["Android >= 4", "ios >= 8"],
remove: process.env.UNI_PLATFORM !== 'h5'
},
// 借助postcss-px-to-viewport插件，實現(xiàn)px轉(zhuǎn)rem，文檔：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
// 以下配置，可以將px轉(zhuǎn)換為rem，如果要調(diào)整比例，可以調(diào)整 viewportWidth 來實現(xiàn)
'postcss-px-to-viewport': {
unitToConvert: 'px', // 需要轉(zhuǎn)換的單位。我這里是px，如果你的項目都是用的rpx，就改成rpx
viewportWidth: 1800,// 密度，一般為750 || 375。這里可以自己修改
unitPrecision: 5,
propList: ['*'],
viewportUnit: "rem", // 指定需要轉(zhuǎn)換成的視窗單位，默認vw
fontViewportUnit: 'rem', // 字體需要轉(zhuǎn)成的單位，只針對 font-size 屬性
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false
},
'@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
}
}（二）在vuex里定義vuex_fontsize
在你的store存儲里添加變量，我設置的是
vuex_fontsize: 18.75 //數(shù)值根據(jù)自己項目調(diào)整
（三）實現(xiàn)字體設置頁面
利用滑塊，設置font-size的值。點擊確定后，要把所設置的值寫入vuex_fontsize和緩存里。
<template>
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
<view class="content">
<view>
<view class="fontchange">文字大小</view>
</view>
<view style="width:100%;padding: 0 10px;">
<slider
:min="16.25"
:max="21.25"
:value="fontValue"
@change="sliderChange"
:step="2.5"
/>
<view class="change-fontsize-box">
<text style="font-size: 12px;">
最小
</text>
<text style="font-size: 14px;">
標準
</text>
<text style="font-size: 16px;">
最大
</text>
</view>
</view>
<view style="padding: 20px 10px;width: 100%;">
<u-button type="primary" @click="submit">確定</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
fontValue: 18.75,
};
},
onShow() {
this.fontValue = this.vuex_fontsize;
},
methods: {
sliderChange(e) {
this.fontValue = e.detail.value;
}
submit() {
this.$u.vuex('vuex_fontsize', this.fontValue);
uni.setStorageSync("fontSize", this.vuex_fontsize);
uni.showToast({
title: '設置成功',
icon:'none',
duration: 1500
});
},
},
};
</script>
<style>
.fontchange {
font-size: 0.8rem;
margin: 20px 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.change-fontsize-box{
margin: 10px 18px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
</style>（四）App啟動時，讀取緩存值，賦值給vuex_fontsize
修改App.vue文件，添加以下代碼
onLaunch: function() {
//讀取Storage里的字體大小
let fontsize = uni.getStorageSync("fontSize")
if (fontsize) {
this.$u.vuex('vuex_fontsize', fontsize);
}
}（五）其他頁面引用
在需要用到的頁面加上page-meta。如果是全局修改，就需要全部頁面都加上這。
<template> <page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta> <view> ... </view> </template>
用開發(fā)者工具可以看到根節(jié)點html的font-size值可以被成功設置，且頁面元素的單位都是rem。大功告成~
總結
到此這篇關于uniapp實現(xiàn)全局設置字體大小的文章就介紹到這了,更多相關uniapp全局設置字體大小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
jQuery和JavaScript節(jié)點插入元素的方法對比
本文主要介紹jQuery與JavaScript節(jié)點的插入方法，以及他們的具體代碼實現(xiàn)方法，大家可以對比下他們之間的不同，希望對大家編寫代碼有所幫助2016-11-11
最近項目經(jīng)理我個項目練練手，其項目需求是要實現(xiàn)翻書效果，看到這個需求后，我真是懵了，這咋整，我可是java出身的啊，這個問題真是難住我了，后來有同事的指導，問題順利解決，下面小編把學習心得分享，感興趣的朋友可以參考下2016-06-06
JS控制文本框textarea輸入字數(shù)限制的方法，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了淺談Emergence.js 檢測元素可見性的 js 插件，詳細的介紹了Emergence.js安裝和使用方法，具有一定的參加性，有興趣的可以了解一下2017-11-11
javascript中強制執(zhí)行toString()具體實現(xiàn)
Javascript通常會根據(jù)方法或運算符的需要而自動把值轉(zhuǎn)成所需的類型，這可能導致各種錯誤，接下來為大家介紹下javascript如何強制執(zhí)行toString()，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了JCrop+ajaxUpload 圖像切割上傳的實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
基于Bootstrap的Metronic框架實現(xiàn)條碼和二維碼的生成及打印處理操作
這篇文章主要介紹了基于Bootstrap的Metronic框架實現(xiàn)條碼和二維碼的生成及打印處理操作的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
js解析xml字符串和xml文檔實現(xiàn)原理及代碼(針對ie與火狐)
分別針對ie和火狐分別作了對xml文檔和xml字符串的解析,考慮到了瀏覽器的兼容性,至于在ajax環(huán)境下解析xml，其實原理是一樣的，只不過放在了ajax里，還是要對返回的xml進行解析,感興趣的朋友可以了解下，或許對你學習js解析xml有所幫助2013-02-02
這篇文章主要介紹了小程序自定義導航欄兼容適配所有機型（附完整案例），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
JAVASCRIPT是AJAX技術中不可或缺的一部分，所以想學好AJAX以及現(xiàn)在流行的AJAX框架，學好JAVASCRIPT是最重要的，通過本篇文章給大家介紹javascript基礎知識及常用方法總結，對js基礎知識及常用方法相關知識感興趣的朋友一起學習吧2016-01-01