uniapp - 解决编译成钉钉小程序后，发现uView组件库的组件样式失效（就连自定义组件样式失效），完美 100% 解决uniapp编译打包钉钉小程序端后uview组件失效问题

已于 2024-07-29 11:49:39 修改
阅读量3.6k 收藏 3
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 文章标签： uniapp钉钉小程序 uniapp钉钉小程序编译问题 打包编译后样式都乱套了 编译打包后样式消失错位了 unia钉钉平台编译后样式失效 如何解决uview组件库样式丢 自定义组件样式和页面布局混乱
于 2023-11-18 22:39:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/134484902
版权
本文介绍了在uniapp编译钉钉小程序时遇到的uView组件样式失效问题，包括页面布局混乱的情况。问题源于编译后自定义组件json文件中的"styleIsolation":"apply-shared"属性。解决方案是删除该属性，或者全局搜索并替换。通过降低HBuilderX版本或使用特定版本也可解决问题。
摘要由CSDN通过智能技术生成

问题描述

如果我们情况几乎一样，那么本篇博客肯定能帮你解决。

将uniapp开发的项目，编译到钉钉小程序平台发布。

但没想到的是，按照网上文章的配置编译成钉钉小程序后，uview 组件库的部分样式没了，就连页面布局都很奇怪。打开浏览器控制台，发现 class 类名、样式文件都是有的，就是不生效。

uniapp Vue3和Vue2都能用，提供详细示例解决代码。

问题解决

按照我的来，保证能成功。

实际上，这是由于

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
微信小程序使用uView组件库
Lmmmum_J的博客
08-31 1670
在公司做的一个项目是微信小程序，因为小程序的ui图样式很简单，所以一开始是打算自己写的，但是后面发现有一些功能实现起来很冗杂，所以最终选择了使用微信小程序的ui组件库。一开始是使用的是VantUi，但是不知道为什么在我的小程序里面跑不起来，所以后来选择使用uView2.x来进行小程序的开发。具体步骤记录一下！选好存放的位置以及文件命名即可，也可以自己在下面选择vue的的版本，我是用的是vue2打开page.json文件，在里面配置tabBar，底部导航栏配置一个简单的全局样式。
uni-app开发多端之钉钉小程序
dcloudio的博客
11-05 6724
经常有开发者咨询uni-app是否支持钉钉小程序？ 答案当然是支持！ 本文通过将hello uni-app发布到钉钉小程序，演示如何使用uni-app开发钉钉小程序。 扩展钉钉小程序平台 创建hello uni-app项目后，在项目根目录下新增或修改package.json，在根节点下新增如下扩展配置： "uni-app": { "scripts": { "mp-dingtalk": { "title":"钉钉小程序", "env"
uni-app编译成钉钉小程序，真机调试正常，上传后uViewUI组件样式失效，自定义组件样式失效
九的博客
04-12 466
记录一下uni-app 踩的坑。
uni-app编译成钉钉小程序，uViewUI组件样式失效，自定义组件样式失效
weixin_45081743的博客
06-21 3013
uni-app编译成钉钉小程序，uViewUI组件样式失效，自定义组件样式 公司项目需要把原本用uinapp开发的微信小程序想要在钉钉上也能使用，然后就打算用uniapp编译成钉钉小程序，看看是否有坑，不试不知道，一试吓一跳，官方没有提供钉钉的编译方式，按照网上文章的配置编译成钉钉小程序后，初步发现，uView-ui的icon没啦，然后样式和布局都奇奇怪怪的，排查的很久...(直接跳过)，最终定位到原因，组件上的类名是有的，acss文件也是有的，acss文件里面的样式没有在标签上生效，也就是空白的，如下图。
uniapp使用uview通过v-deep修改样式不生效
最新发布
w12_17的博客
06-19 326
需要加上以下代码才可以生效,并且::v-deep之前要加上父元素 class名。
uniapp运行钉钉小程序
YL
03-14 1834
因项目原因，公司需要在钉钉里面开发小程序。之前用uniapp开发过app，H5，小程序。还真没尝试过钉钉小程序，今天就简单的记录下uniapp运行钉钉小程序中的过程。
解决使用HBuilder X开发小程序时uView组件不生效的问题
hahala__的博客
05-25 938
解决使用HBuilder X开发小程序时uView组件不生效的问题----详细步骤
使用uni-app开发微信小程序时u-view样式不生效问题
热门推荐
SZnAl的博客
05-04 1万+
1.组件自定义样式不生效 需要在前面添加 ::v-deep 在存在shadow-root的dom情况下，需要额外在后面添加 >view 才能正常修改 2.输入框下面的错误信息提示文字跟输入框不对齐，向右偏一些 定位到对应的元素后，并找到其父节点 给他的父界面下的子节点添加样式修改信息 ::v-deep u-form-item .u-form-item__message { padding-left: 0rpx !important; } ...
uniapp生成钉钉小程序梳理（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
12-02 4096
uniapp生成钉钉小程序梳理
vehicle-manage-app:钉钉车辆管理系统uni-app + uView ui实现小程序
03-21
【车辆管理应用】是一款基于uni-app框架和uView UI库构建的小程序，旨在提供全面的车辆管理和监控功能。uni-app是一个使用Vue.js语法的多端开发框架，它允许开发者编写一次代码，部署到多个平台，如微信小程序、...
基于微信小程序的疫苗预约接种系统，使用uniapp搭配uview-ui组件库进行开发，后台页面使用layui-admin开发
06-20
## 基于微信小程序的疫苗预约接种系统 1. 系统管理员基本功能： (1)查看数据分析图； (2)接种点信息增删改查； (3)接种点医护人员信息增删改查； (4)预约计划信息增删改查； (5)接种者信息删改查； (6)疫苗...
uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt
12-30
uniapp关于支付宝小程序或钉钉小程序标题栏自定义
微信小程序(uniapp + uView)自定义导航栏
02-29
微信小程序(uniapp + uView)自定义导航栏
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
小程序滑动删除组件+全选批量删除组件+附源码
04-03
使用 uni-app、uview 组件开发，全端（微信小程序、QQ小程序、抖音小程序等等） 支持滑动删除组件、支持左滑删除、长按进入批量删除、全选删除、长按弹窗删除、 组件式开发，文章后面提供了源码下载，可以一键导入...
钉钉小程序使用uview 样式错乱
weixin_48896647的博客
04-02 205
【代码】钉钉小程序使用uview 样式错乱。
uniapp发布钉钉小程序
qq_40419135的博客
04-13 1819
看了一下钉钉原生态的开发，太麻烦了，选择了uniapp进行开发。
使用Uniapp开发钉钉小程序--有你，全是坑，有你，我幸运！！！
Hwyll的博客
08-17 7035
Uniapp踩坑日记前言一、页面添加图片二、添加map组件总结 前言 最近，公司让我独立开发一个钉钉小程序，于是乎就用了uniapp！谁会想到，地狱之门就此打开了！ 全网唯一，持续更新中！！！ 一、页面添加图片 添加图片 重点来了！！图片没有显示出来！！路径没错啊！！！ 难道是img很大，要wait一会？？？ 不行，喊人帮忙！！！ 学姐思考了一番，突然，要放在static文件夹下！！！ 这样一来的话，是可行的！可我还是不清楚原理，知道的小伙伴们在下面留言咯！！ 二、添加map组件 微信小程序自己
uview的内置样式不生效
2301_77172303的博客
09-17 1582
例如u-line-1文本省略达不到效果，可能是没有引用基础样式，不同版本的uview都要在App.vue里引入，如下。
uniapp打包小程序后使用的uview中cell组件 value插槽不生效
06-01
如果您在使用uniapp打包小程序后，使用的uview的cell组件中的value插槽不生效，可能是因为在uniapp中，组件的插槽名需要加上"v-"前缀。 例如，uview的Cell组件中，原本的value插槽是这样定义的： ```html <template #value> <view class="u-cell-value">{{ value }}</view> </template> ``` 但是在uniapp中，需要改为这样： ```html <template #v-value> <view class="u-cell-value">{{ value }}</view> </template> ``` 因此，您可以尝试将uview的Cell组件中的value插槽改为v-value插槽，看看是否能够生效。如果还有其他问题，请提供更多的代码和错误信息，以便更好地帮助您。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值