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

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

1. 在需要改变字体大小的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的格式。

2. 改样式。之前我给字体设置的样式都是rpx的，是无效的，要都改成rem，除了字体试了一下高度宽度等等也能设置成rem，并根据动态配置缩小放大。

3. 做一个配置字体大中小的功能，效果：

• 我用的是本地缓存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;
}

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

四、成功实现！