侧边栏壁纸
博主头像
小莫唐尼

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 29 篇文章
  • 累计创建 40 个标签
  • 累计收到 191 条评论

目 录CONTENT

文章目录

Uniapp老年模式(设置单位大小)

小莫唐尼
2022-04-15 / 0 评论 / 6 点赞 / 589 阅读 / 1,629 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-15,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

说明:部分业务场景可能会使用到老年模式,比如浙里办应用上线;本次记录uniapp的老年模式解决方案;引用插件,将项目中的字体单位rpx换成rem,结合官网提供的page-meta属性,通过控制根字体大小,达到调节字体大小要求。

1. 第一步:创建uniapp项目

2. 第二步

安装第三方插件postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

3. 第三步

项目根目录创建postcss.config.js,并写入如下配置:

// postcss.config.js

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插件,实现rpx转px,文档:https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置,可以将rpx转换为1/2的px,如20rpx=10px,如果要调整比例,可以调整 viewportWidth 来实现
    'postcss-px-to-viewport': {
      unitToConvert: 'rpx', // 需要转换的单位
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ['*'],
      fontViewportUnit: 'rem', // 字体需要转成的单位,只针对 font-size 属性
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false
    },
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  }
}

4. 第四步

使用vuex状态管理,将当前的字体大小设置进行存储、修改

5. 第五步

在需要适配老年模式的页面<template> 中加入以下代码

<template>
    <page-meta :root-font-size="`${this.$store.state.elderModeSize}px`"></page-meta>
    <view> 页面内容 </view>
</template>

***注意事项:此种方法navbar和tabbar的字体大小不能改变 ***

思考:uniapp按理来说是可以根据设备的字体大小来做适配的,但是应该如何实现?

6

评论区