小程序--设置字体大中小功能

一、需求
项目经理说有些用户是老人，字太小看不清，但有些用户是年轻人，字太大显得笨拙，那好吧，给你自行设置好了！
问题来了，手机系统设置的字体大小，打开小程序，木有作用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-metapage-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.itemsfor (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},
}

（这里要注意的是，需要手动点“重新进入小程序”才能生效。）

四、成功实现！

小程序--设置字体大中小功能相关推荐

小程序设置字体font-family
不多废话,我今天在整这个需求的时候,经过测试,发现ios和安卓需要不同的处理方式,目前来看缺一不可,直接上方法. 方式一:IOS处理方式用小程序的API去请求网络资源字体文件这里需要注意的是: 代 ...
微信小程序设置字体无效_微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关讨论: Q:小程序开发时能否使用我们自定义 ...
微信小程序设置字体无效_小程序字体粗细无效小程序教程
微信里的小程序字体能调大吗? 谢邀. 微信里的字体是可以设置大小的.在微信"设置"中,点击"通用",可以看到有"字体大小"这一项,用户可以根 ...
微信小程序设置字体无效_微信小程序字体设置
一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-h ...
微信小程序设置字体上下左右居中
今天设置了text-align=center 只水平居中并没有垂直居中, 最后查阅了资料添加一个line-height =80rpx 也就是设置自己的高度等于自己的设置的宽度即可
小程序设置字体大小和字体加粗
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
店长宝微信小程序后台功能简介（四）——小程序设置
本文参考自: 原文地址继续为大家介绍店长宝微信小程序的后台功能,今天介绍后台中的小程序设置功能. 小程序设置功能:版权设置.个人中心.商家设置.商家手机端.小程序跳转.内嵌网页.门店管理.门面管理. ...
微信小程序：字体设计符号组合多功能微信小程序源码
这是一款主打字体设计,符号组合等多模板功能的一款微信小程序源码内含多种功能,比如: 花式字体设计表情字体组合设计翅膀字体组合火星文一键生成符号库空白名称彩色网名等等还有很多,所以小编就 ...

小程序--设置字体大中小功能

小程序--设置字体大中小功能相关推荐

最新文章

热门文章