uni-app 3.1.14 alpha iOS云打包存在样式问题

uni-app 3.1.14 alpha iOS云打包存在样式问题

开发环境 版本号 项目创建方式
Windows Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：Alpha

HBuilderX版本号：3.1.14

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iPhone 7 Plus

页面类型：vue

打包方式：云端

示例代码：

<div class="avatar-wrap" @click.stop="$emit('expDetail')">  
  <image  
    src="info.author.avatar.url"
    class="avatar"  
    class="info.author.labels ? 'avatar-labels' : ''"
  ></image>
  <text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>  

/* 头像 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%
}
.avatar-labels {
  border: 3px solid $app-blue-6
}

操作步骤：

<div class="avatar-wrap" @click.stop="$emit('expDetail')">  
  <image  
    src="info.author.avatar.url"
    class="avatar"  
    class="info.author.labels ? 'avatar-labels' : ''"
  ></image>
  <text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>  

/* 头像 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%
}
.avatar-labels {
  border: 3px solid $app-blue-6
}

预期结果：

<div class="avatar-wrap" @click.stop="$emit('expDetail')">  
  <image  
    src="info.author.avatar.url"
    class="avatar"  
    class="info.author.labels ? 'avatar-labels' : ''"
  ></image>
  <text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>  

/* 头像 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%
}
.avatar-labels {
  border: 3px solid $app-blue-6
}

实际结果：

<div class="avatar-wrap" @click.stop="$emit('expDetail')">  
  <image  
    src="info.author.avatar.url"
    class="avatar"  
    class="info.author.labels ? 'avatar-labels' : ''"
  ></image>
  <text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>  

/* 头像 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%
}
.avatar-labels {
  border: 3px solid $app-blue-6
}

bug描述：

本地调式没问题，云打包后圆形头像的宽高变大


更多关于uni-app 3.1.14 alpha iOS云打包存在样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

提供一下 uniapp id

更多关于uni-app 3.1.14 alpha iOS云打包存在样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


App id:UNI7C247C1

问题确认：部分情况下 rpx 计算错误，已加分，后续修复
临时解决方案：
修改 HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/app-vue-style-loader/lib/addStylesClient.js、 HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js 文件中的 /{[\s\S]+?}|@media.+{/g 为 /{[\s\S]+?}|@media.+?{/g

收到。感谢开发者回复

从您描述的问题来看，这是一个在uni-app 3.1.14 alpha版本iOS云打包后出现的样式兼容性问题。主要问题在于云端打包后圆形头像的宽高尺寸异常增大，而本地调试时显示正常。

分析您的代码，有几个可能的原因：

  1. CSS单位兼容性问题：在iOS云端打包环境中，rpx单位的计算可能出现了偏差。建议尝试将80rpx改为px单位测试，比如40px（基于750设计稿的换算）。

  2. image组件样式冲突：您的image组件上重复使用了class属性，这在Vue中是无效的。正确的写法应该是：

<image 
  src="info.author.avatar.url"
  :class="['avatar', info.author.labels ? 'avatar-labels' : '']"
></image>
回到顶部