uni-app 设置了skyline模式后 动态绑定的class编译出错

uni-app 设置了skyline模式后 动态绑定的class编译出错

示例代码：

{
  "mp-weixin": {
    "appid": "wx05d6ba889e3344b6",
    "lazyCodeLoading": "requiredComponents",
    "rendererOptions": { "skyline": { "defaultContentBox": true } },
    "setting": {
      "urlCheck": false,
      "minified": true
    },
    "optimization": {
      "subPackages": true
    },
    "usingComponents": true
  }
}

<view 
    class='position-item rounded-[20rpx] flex items-center mb-[24rpx]' 
    v-for='(item, index) in positionArr' 
    :key='index' 
    :class='positionIndex === index ? "position-item-active" : ""' 
    @click='choosePosition(item, index)'
>
</view>

操作步骤：

设置为skyline之后，动态绑定一个class就可以了。

预期结果：

不应该出现多余符号

实际结果：

出现了多余符号

bug描述：

设置了skyline模式之后，动态绑定的class，在小程序编译出来会携带\符号，导致微信开发者工具报错


| 项目信息           | 详细信息             |
|-------------------|--------------------|
| 产品分类         | uniapp/小程序/微信     |
| PC开发环境操作系统 | Mac                |
| PC开发环境操作系统版本号 | 16                 |
| 第三方开发者工具版本号 | 1.06.2405102       |
| 基础库版本号     | 3.4.3              |
| 项目创建方式     | CLI                |
| CLI版本号        | 3.0.0-3090920231225001 |

更多关于uni-app 设置了skyline模式后 动态绑定的class编译出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

报错跟代码如图


更多关于uni-app 设置了skyline模式后 动态绑定的class编译出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢反馈，你提到 skyline 编译有问题，我尝试对比一下加之前 加之后的编译产物是否有区别。
我看是否添加 manifest.json 里的 skyline 对编译产物没有影响。编译产物里看起来是一样的。
但是渲染后会丢失 [] ，这个是小程序平台的限制，你可以参考社区的插件进行 postcss 插件进行兼容，比如 https://uni-helper.js.org/vite-plugin-uni-tailwind ，搜索 · characterMap

有没有文档呢，uniapp如何单个页面配置skyline模式呢？

这个情况比较奇怪，单纯开启了全局的skyline模式的时候，不会报错。但是在pages.json某个页面单独配置了"renderer": “skyline”，“componentFramework”: “glass-easel”。则会爆出这种错误，不太清楚是不是因为配置的问题？

回复 三里清风: 我们可能理解的不是一件事情，我以为是渲染后丢失了[] 你看我更新之后的评论

回复 DCloud_UNI_OttoJi: 感谢，我已经清楚原因了。这个问题是因为skyline模式下，不再支持模版中携带转义符号。顺便问一句，uniapp什么时候能支持skyline，手写海报真的烦

回复 三里清风: 好，你可能需要使用插件来绕过编译丢失的问题

因为你提供的复现 demo 内容不全，我使用下面的页面
<template>
<view class=‘position-item rounded-[20rpx] flex items-center mb-[24rpx]’ v-for=’(item, index) in positionArr’
:key=‘index’ :class=‘positionIndex === index ? “position-item-active” : “”’ @click=‘choosePosition(item, index)’>
{{index}}
</view>
</template>

<script lang="ts" setup> const choosePosition = (item, index) => { console.log(item, index) } const positionIndex = 1 const positionArr = [{ id: 1 }] </script>

在 manifest.json 中添加 “lazyCodeLoading”: “requiredComponents”,
“rendererOptions”: { “skyline”: { “defaultContentBox”: true } },
“setting”: {
“urlCheck”: false,
“minified”: true
},
“optimization”: {
“subPackages”: true
},
“usingComponents”: true
使用 hbuilderx 使用 vue3 编译到微信小程序平台，控制台没有报错，需要我调整哪里

在 uni-app 中使用 Skyline 模式时，动态绑定 class 可能会出现编译错误或运行异常。这通常是因为 Skyline 模式对 Vue 的编译和渲染机制进行了优化和调整，导致某些 Vue 的特性在 Skyline 模式下无法正常工作。

可能的原因和解决方案

  1. 动态 class 绑定语法问题
    确保你的动态 class 绑定语法是正确的。例如：

    <template>
  <view :class="{'active': isActive, 'error': hasError}"></view>
</template>

  2. Skyline 模式下的限制
    Skyline 模式对 Vue 的渲染机制进行了优化，可能会限制某些动态绑定的行为。尝试将动态 class 绑定替换为静态 class，或者在 Skyline 模式下避免使用复杂的动态绑定。

  3. 检查 uni-app 版本
    确保你使用的是最新版本的 uni-app。某些旧版本可能存在 Skyline 模式下的兼容性问题，更新到最新版本可能会解决这些问题。

  4. 使用 style 绑定替代 class 绑定
    如果动态 class 绑定在 Skyline 模式下出现问题，可以尝试使用 style 绑定来替代。例如：

    <template>
  <view :style="{color: textColor, fontSize: fontSize + 'px'}"></view>
</template>

  5. 检查编译器和运行时的配置
    确保你的 uni-app 项目配置中没有错误的编译器或运行时配置。检查 manifest.json 和 pages.json 文件，确保 Skyline 模式的配置正确。

  6. 调试和日志输出
    在出现问题时，可以通过 console.log 输出相关变量，检查动态 class 绑定的值是否符合预期。这有助于定位问题的具体原因。

示例代码

以下是一个简单的示例，展示如何在 uni-app 中正确使用动态 class 绑定：

<template>
  <view :class="{'active': isActive, 'error': hasError}">Hello World</view>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    };
  }
};
</script>

<style>
.active {
  color: green;
}

.error {
  color: red;
}
</style>
回到顶部