找一个有组件的页面运行到支付宝iot
小刘11
- 发布：2024-04-25 16:11
- 更新：2024-04-29 16:12
- 阅读：117
产品分类： uniapp/小程序/阿里
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 专业版 19044.1586
HBuilderX类型： 正式
HBuilderX版本号： 4.08
第三方开发者工具版本号： 3.8.21
基础库版本号： 1.24.8
项目创建方式： HBuilderX
操作步骤：
预期结果：
class样式正常
class样式正常
实际结果：
class样式不正常
class样式不正常
bug描述：
uniapp编译成支付宝小程序可以正常显示，编译成支付宝iot小程序样式就乱了，具体原因是页面组件里面的class样式不生效导致的
最佳回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
感谢反馈，你提到相同代码在支付宝和支付宝 iot 小程序表现不一致。
请提供包含组件的项目源码，记得脱敏和精简，并且简单解释下我该如何运行 支付宝iot 小程序，是新下载 ide吗？
更新：后续交流中发现支付宝 iot 目前不支持样式隔离 "styleIsolation": "apply-shared"，建议在 iot 程序中，在 manifest.json.mp-alipay 设置为 shred
支付宝样式隔离文档
https://opendocs.alipay.com/mini/framework/page-acss
manifest.json 支付宝设置样式隔离
https://uniapp.dcloud.net.cn/collocation/manifest.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE
小刘11 (作者)
项目分别运行到支付宝和iot小程序，iot小程序里面的组件<hx-nav-bar/>的样式是错乱的
-
-
-
回复 小刘11: 好，我复现问题了。这个问题看起来不属于 uniapp 编译的问题：相同的编译产物在不同的渲染模式下展示效果不同，你可以找支付宝平台进行反馈。经过我测试，是不是 iot 平台不认 style 导致的？如果是，你可以使用条件编译进行兼容，官网有支付宝、钉钉小程序如何进行条件编译，针对 iot 不认 style 的情况进行兼容处理
2024-04-28 15:52
-
回复 小刘11: 编译结果经你测试有问题吗？我粗看是 style 没有生效导致的。影响范围有多大，是所有的样式都有问题，还是个别组件渲染有问题？
2024-04-28 15:55
-
-
小刘11 (作者)
回复 DCloud_UNI_OttoJi: 一个项目里这么多组件，组件里那么多的样式，怎么兼容的了，页面的class样式是正常的，组件里就不正常了，所以不存在iot平台不认class的问题，很可能就是编译的时候class样式丢失了
2024-04-28 16:52
-
回复 小刘11: 相同的编译产物，你怎么得出编译 class 样式丢失了结论的，是 html class 信息有丢失，还是 css 文件匹配不上？
2024-04-28 17:36
-
-
-
小刘11 (作者)
回复 DCloud_UNI_OttoJi: 支付宝客服反馈我们编译后的配置他们iot基础库现在不支持，需要我们自己手动更改配置，我私发给你吧，或者能不能给个联系方式，方便沟通
2024-04-29 14:34
小刘11 (作者)
看下图@DCloud_UNI_OttoJi
-
感谢反馈，官方在哪个地方说的不支持，请把原始链接贴一下，这个是样式隔离，默认是 apply-shared ，你可以尝试在 mainifest.json 的 mp-alipay 后面添加 "styleIsolation":"shared"，请注意这种情况下组件和页面的样式是互相受影响的，你需要注意走查 UI 是否受到影响
2024-04-29 15:46
小刘11 (作者)
项目分别运行到支付宝和iot小程序，iot小程序里面的组件<hx-nav-bar/>的样式是错乱的
2024-04-26 11:46
小刘11 (作者)
附件有上传，帮忙看看，急用
2024-04-26 17:14