三里清风
三里清风
  • 发布:2024-05-13 14:03
  • 更新:2024-05-13 15:03
  • 阅读:903

【报Bug】uniapp 设置了skyline模式之后,动态绑定的class编译出错

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 16

第三方开发者工具版本号: 1.06.2405102

基础库版本号: 3.4.3

项目创建方式: CLI

CLI版本号: 3.0.0-3090920231225001

示例代码:
// 在 manifest.json 中配置  

/* 小程序特有相关 */  
  "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,在小程序编译出来会携带\符号,导致微信开发者工具报错

2024-05-13 14:03 负责人:无 分享
已邀请:
三里清风

三里清风 (作者)

报错跟代码如图

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

感谢反馈,你提到 skyline 编译有问题,我尝试对比一下加之前 加之后的编译产物是否有区别。

我看是否添加 manifest.json 里的 skyline 对编译产物没有影响。编译产物里看起来是一样的。

但是渲染后会丢失 [] ,这个是小程序平台的限制,你可以参考社区的插件进行 postcss 插件进行兼容,比如 https://uni-helper.js.org/vite-plugin-uni-tailwind ,搜索 · characterMap

  • 三里清风 (作者)

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

    2024-05-13 14:43

  • 三里清风 (作者)

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

    2024-05-13 14:45

  • DCloud_UNI_OttoJi

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

    2024-05-13 14:51

  • 三里清风 (作者)

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

    2024-05-13 15:02

  • DCloud_UNI_OttoJi

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

    2024-05-13 15:04

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

因为你提供的复现 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 编译到微信小程序平台,控制台没有报错,需要我调整哪里

要回复问题请先登录注册