小程序--设置字体大中小功能
一、需求项目经理说有些用户是老人,字太小看不清,但有些用户是年轻人,字太大显得笨拙,那好吧,给你自行设置好了!问题来了,手机系统设置的字体大小,打开小程序,木有作用T^T,看来只能自己做了。二、方法因为我用的是原生小程序开发,还好看到官方的page-meta方法,要不然估计只能转uniapp那种基于vue的框架才能实现了吧(没想到有什么好的办法了)。三、page-meta介绍https://dev
一、需求
项目经理说有些用户是老人,字太小看不清,但有些用户是年轻人,字太大显得笨拙,那好吧,给你自行设置好了!
问题来了,手机系统设置的字体大小,打开小程序,木有作用T^T,看来只能自己做了。
二、方法
因为我用的是原生小程序开发,还好看到官方的page-meta方法,要不然估计只能转uniapp那种基于vue的框架才能实现了吧(没想到有什么好的办法了)。
三、page-meta介绍
https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html
- 设置字体大小功能可以用里边的 root-font-size 参数 和 page-font-size参数
(page-meta还有很多好用的参数配置,比如动态设置窗口背景颜色、下拉背景、滚动位置等等)
四、page-meta使用方法
-
在需要改变字体大小的wxml页面的 第一个节点 加上:(就是最头头,不要在任何view内)
pageFontSize和rootFontSize设置为可配置
<page-meta
page-font-size="{{pageFontSize}}"
root-font-size="{{rootFontSize}}"
>
</page-meta>
page-font-size参数是没有赋予任何字体样式的页面page字体大小,我这里用的是rem;
root-font-size参数是页面的根字体大小,也就是赋予了样式的字体大小,我这里用的是rem的格式。
-
改样式。之前我给字体设置的样式都是rpx的,是无效的,要都改成rem,除了字体试了一下高度宽度等等也能设置成rem,并根据动态配置缩小放大。
-
做一个配置字体大中小的功能,效果:
- 我用的是本地缓存getStorageSync存储当前设置的字体大小的倍数。
wxml:
<mp-dialog title="字体大小设置" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}" mask-closable="false">
<view class="weui-cells weui-cells_after-title un-margin15 ">
<radio-group bindchange="radioChange" style="width: 100%;">
<label class="weui-cell weui-check__label flex_between margin15" wx:for="{{items}}" wx:key="{{item.value}}">
<view class="header_h1 lr-margin15" style="font-size: {{item.style}};">{{item.name}}</view>
<block wx:if="{{item.checked}}">
<radio value="{{item.value}}" checked="true"/>
</block>
<block wx:else>
<radio value="{{item.value}}"/>
</block>
</label>
</radio-group>
</view>
<view class="flex_center">
<button class="buttom_a confirm" style="margin: 30rpx auto;" bindtap="handleAdd">确认设置</button>
</view>
<view class="margin15 txt_h2 text-left">
<view>
<span class="text-red">* </span>
<span>确认设置完毕后需点开右上角 “...” 打开面板,并点击 “<span class="text-red"> 重新进入小程序 </span>”,以便更新字体大小</span>
</view>
</view>
</mp-dialog>
js:
Page({
data: {
dialogShow: false,
buttons: [{text: '取消'}],
items: [
//{value: "1rem", valuePage: "0.64rem", name: '小', checked: false,style: "0.7rem"},
//{value: "1.2rem", valuePage: "0.66rem", name: '中', checked: false,style: "0.8rem"},
//{value: "1.4rem", valuePage: "0.68rem", name: '大', checked: false,style: "0.9rem"},
//{value: "1.6rem", valuePage: "0.75rem", name: '特大', checked: false,style: "1rem"},
],
rootFontSize: wx.getStorageSync('rootFontSize'),
pageFontSize: wx.getStorageSync('pageFontSize'),
},
tapDialogButton() {
this.setData({
dialogShow: false
})
},
radioChange(e) {
console.log('radio发生change事件,携带value值为:', e.detail.value)
const items = this.data.items
for (let i = 0, len = items.length; i < len; ++i) {
items[i].checked = items[i].value === e.detail.value
}
this.setData({
items
})
},
getCurrentValue: function () {
let _this = this;
let rootFontSize = _this.data.rootFontSize;
let items = [
{value: "1rem", valuePage: "0.64rem", name: '小', checked: false,style: "0.7rem"},
{value: "1.2rem", valuePage: "0.66rem", name: '中', checked: false,style: "0.8rem"},
{value: "1.4rem", valuePage: "0.68rem", name: '大', checked: false,style: "0.9rem"},
{value: "1.6rem", valuePage: "0.75rem", name: '特大', checked: false,style: "1rem"},
]
items.map((item, index)=>{
if(rootFontSize){
if(item.value === rootFontSize){
item.checked = true
}
}else{
items[1].checked = true
}
})
_this.setData({
items: items
})
// debugger
},
handleAdd: function () {
let _this = this;
let rootFontSize = _this.data.rootFontSize
_this.data.items.map((item, index)=>{
if(item.checked === true){
wx.setStorageSync("rootFontSize", item.value);
wx.setStorageSync("pageFontSize", item.valuePage);
app.toast('设置成功!重新进入小程序即可生效', 200)
}
})
// debugger
},
}
wxss:(只贴自己写的样式,其他基于weui框架)
.line{
border-bottom: 1px solid #E5E5E5;
}
.picker-cell{
padding: 32rpx;
position: relative;
}
.arrow {
width: 10px;
height: 10px;
border-top: 2px solid #CBCBCB;
border-right: 2px solid #CBCBCB;
position: absolute;
right: 30rpx;
transform: rotate(45deg) translate(0, -50%);
top: 50%;
}
radio .wx-radio-input.wx-radio-input-checked {
border-color: #1995F3 !important;
background: #1995F3 !important;
}
radio .wx-radio-input {
height: 1.1rem;
width: 1.1rem;
margin-top: -4rpx;
border-radius: 50%;
border: 2rpx solid #999;
background: transparent;
}
radio::before{
font-size: 0.8rem;
top: 50%;
left: 50%;
margin-top: 0;
transform: translate(-80%, -55%);
}
.txt_h2{
color: #333333;
}
(这里要注意的是,需要手动点“重新进入小程序”才能生效。)
四、成功实现!
更多推荐
所有评论(0)