uni-app 求px2vw插件

在uni-app中，你可以通过编写一个自定义插件来实现px2vw的转换功能。下面是一个简单的插件实现示例，该插件会在编译阶段将px单位转换为vw单位，以适配不同屏幕尺寸。

1. 创建插件目录结构

首先，在你的uni-app项目根目录下创建一个plugins目录，并在其中创建一个名为px2vw的文件夹。文件夹内创建以下文件：

• index.js：插件的入口文件。
• webpack.config.js：用于配置webpack的转换规则。

2. 编写插件代码

index.js

const path = require('path');
const px2vw = require('postcss-px-to-viewport');

module.exports = {
    id: 'uni-px2vw',
    apply(api) {
        api.chainWebpack(config => {
            config.module
                .rule('style')
                .test(/\.(css|scss|less|stylus|postcss)(\?.*)?$/)
                .use('postcss-loader')
                .loader('postcss-loader')
                .tap(options => {
                    options.postcssOptions = {
                        plugins: [
                            px2vw({
                                viewportWidth: 375, // 设计稿宽度
                                unitPrecision: 5,   // px转换为vw的小数位数
                                minPixelValue: 1,   // 小于1px的数值不做转换
                                propList: ['*']     // 需要转换的属性，'*'代表全部
                            })
                        ]
                    };
                    return options;
                });
        });
    }
};

webpack.config.js（可选）

如果你需要对webpack进行更多配置，可以在此文件中添加。但对于简单的px2vw转换，上面的index.js已经足够。

3. 配置uni-app使用插件

在vue.config.js（如果你使用的是Vue CLI）或manifest.json（uni-app原生配置）中配置插件。

vue.config.js（如果使用Vue CLI）

const px2vwPlugin = require('./plugins/px2vw');

module.exports = {
    configureWebpack: {
        plugins: [
            px2vwPlugin
        ]
    }
};

manifest.json（uni-app原生配置）

在manifest.json的scripts部分添加插件路径：

{
    "scripts": {
        "custom": {
            "hooks": {},
            "plugins": {
                "uni-px2vw": {
                    "package": "./plugins/px2vw"
                }
            }
        }
    }
}

4. 使用插件

完成上述配置后，你可以直接在你的uni-app项目中使用px单位，它们将在编译阶段自动转换为vw单位。

以上代码提供了一个基本的px2vw插件实现，你可以根据具体需求进行调整和优化。