uni-app 编译不完整

uni-app 编译不完整

开发环境 版本号 项目创建方式
Mac 10.13.6 HBuilderX 
## 示例代码：

```html
<input placeholder="请输入搜索内容" placeholder-style="font-size: 24upx; color: red"/>

操作步骤：

<input placeholder="请输入搜索内容" placeholder-style="font-size: 24upx; color: red"/>
运行到微信小程序模拟器

预期结果：

<input placeholder="请输入搜索内容" placeholder-style="font-size: 24rpx; color: red"/>

实际结果：

<input placeholder="请输入搜索内容" placeholder-style="font-size: 24upx; color: red"/>

bug描述：

在input标签中使用placeholder-style属性.其中的upx未被转换成rpx


更多关于uni-app 编译不完整的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

upx 不支持动态绑定且现在不建议使用 ，建议使用 rpx https://ask.dcloud.net.cn/article/36130

更多关于uni-app 编译不完整的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的编译转换问题。在 uni-app 中，upx 到 rpx 的转换主要针对样式表（CSS）中的尺寸单位，而 placeholder-style 属性作为内联样式字符串，其内部的 upx 单位在编译到小程序平台时可能不会被自动转换。

解决方案：

  1. 直接使用 rpx：在 placeholder-style 属性中直接使用目标平台（微信小程序）的单位 rpx，这是最推荐的做法，代码更清晰且无编译隐患。

    <input placeholder="请输入搜索内容" placeholder-style="font-size: 24rpx; color: red"/>

  2. 使用条件编译：如果项目需要同时支持多个平台（如小程序和H5），可以使用条件编译针对不同平台书写不同的单位。

    <input placeholder="请输入搜索内容"
       placeholder-style="font-size: 24upx; color: red"
       :placeholder-style="placeholderStyle"/>

    computed: {
    placeholderStyle() {
        // 在H5平台使用px，在小程序平台使用rpx
        #ifdef H5
        return 'font-size: 24px; color: red';
        #endif
        #ifdef MP-WEIXIN
        return 'font-size: 24rpx; color: red';
        #endif
    }
}

  3. 使用计算属性动态生成样式字符串：通过 JavaScript 动态生成样式字符串，在其中进行单位判断和转换。

    computed: {
    placeholderStyle() {
        // 可根据平台或其他逻辑返回不同的样式字符串
        const fontSize = uni.upx2px(24) + 'px'; // 如果需要转换为px
        // 或者直接返回rpx
        return `font-size: 24rpx; color: red`;
    }
}
回到顶部