美文网首页
uniapp踩坑记

uniapp踩坑记

作者: maomizone | 来源:发表于2022-04-21 14:21 被阅读0次

首先我是用cli创建的项目

1.项目配置px转rpx

  • 安装postcss-pxtorpx-pro
  • vite.config.ts配置
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
  css: {
    postcss: {
      plugins: [
        require('postcss-pxtorpx-pro')({
          // 转化的单位
          unit: 'rpx',
          // 单位精度
          unitPrecision: 5,
          // 不需要处理的css选择器
          selectorBlackList: [],
          // 不需要转化的css属性
          propBlackList: [],
          // 直接修改px,还是新加一条css规则
          replace: true,
          // 是否匹配媒介查询的px
          mediaQuery: false,
          // 需要转化的最小的pixel值,低于该值的px单位不做转化
          minPixelValue: 2,
          // 不处理的文件
          exclude: /node_modules|components/gi,
          // 转化函数
          // 视口375px
          transform: (x: any) => 2 * x
        })
      ]
    }
  },
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src')
      }
    ]
  }
})

相关文章

  • uniapp踩坑记

    首先我是用cli创建的项目 1.项目配置px转rpx 安装postcss-pxtorpx-pro vite.con...

  • uniapp踩坑笔记

    前进,前进。 使用cli 会提示模版选择框(不同模版适配程度不同,hello uni-app可以直接运行,有的则不...

  • uniapp 踩坑记录

    uni.makePhoneCall打包后不生效的问题 需要勾选权限android.permission.CALL_...

  • uniapp开发踩坑

    自定义组件v-model不可以自定义model,只能使用默认的value/input,否则小程序无效 原本我使用的...

  • 踩坑记-uniapp+uView(HBuilder)

    平时开发中遇到的一些问题,简单整理一下,方便后续开发借鉴。 A:uView1.x和2.x的u-swiper轮播图组...

  • 2022-09-27- uniapp-app 开发踩坑总结

    uniapp-app 开发踩坑总结1、 iOS 设置宽 100% 和 paddding:20rpx 会出现下侧滚动...

  • uniapp image app端不显示

    踩坑历程 事情是这个样子的~ uniapp 中的 image 组件中,mode 属性的默认值是 scaleToFi...

  • uniapp 启动图踩坑

    目前公司有个需求 需要在app启动时展示两张图片,在通过baidu了解后,通过增加页面得方式并关闭默认uniapp...

  • Uniapp与golang,使用Protobufjs通讯

    目前以我的感觉,坑差不多踩完了,所以记录下 客户端UniApp,刚开始用官方的protobufjs 生成pb文件,...

  • Android Material Design 踩坑记(2)

    Android Material Design 踩坑记(1) CoordinatorLayout Behav...

网友评论

      本文标题:uniapp踩坑记

      本文链接:https://www.haomeiwen.com/subject/lfiiertx.html