uniapp App热更新后首页样式错乱

已于 2023-09-25 10:03:14 修改
阅读量2.1k 收藏 3
点赞数 4
CC 4.0 BY-SA版权
文章标签： uni-app vue.js 前端
于 2022-11-11 14:35:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ifyouwjk/article/details/127803705

问题描述：

App热更新后，重新进入，首页样式错乱。
（使用plus.runtime.restart()也会出现）
Hbuilderx版本：3.6.8-alpha

解决

  1. 解压缩wgt包
  2. 进入 __uniappview.html （发现几个结束标签颜色有问题）
    在这里插入图片描述
    在第一个出现颜色问题的标签后用 换行处理了一下在这里插入图片描述
  3. 处理完之后再重新打包
  4. 修改文件后缀名 zip → wgt

经过上面操作之后再次更新就不会出现样式错乱的问题了，
如果没有出现上面的情况可以参考（在评论区）https://ask.dcloud.net.cn/question/144630

Yvaine-yy
关注
uniapp自定义组件样式不生效？还以为是 bug，结果是 display 搞的鬼！
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-08 649
最近在用uniapp写项目时，遇到了一个困扰了我半天的问题： 自定义组件的样式怎么加都不生效，搞得我以为记忆错乱了；后来一番研究，终于找到了解决办法，忍不住想记录下来，希望对大家有帮助！问题：自定义组件的样式不生效问题现象在给自定义组件添加样式时，有时候某些样式（比如widthmargin-top）就是不生效。我甚至加了!important都没用，怀疑是不是 uniapp 的锅。问题原因冷静下来排查后，发现问题的根源是自定义组件的默认 display 属性。在 uniapp 中，自定义组件默认是。
uniapp - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
最新发布
资深程序员
04-08 6114
uniapp，微信公众号网页，h5移动端开发，uniapp h5平台输入框弹起软键盘，收起后导致页面无法复原的问题，uniApp输入框弹起软键盘，收起后导致页面无法复原的问题，uniapp移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起，弹起键盘遮盖输入框键盘弹起后不恢复，键盘不收回，input输入时软键盘弹起不能自动收回，UNI-APP页面中input输入框弹起软键盘，收起后会导致页面被顶起，无法复原，H5移动端键盘收起后页面上移不复位，软键盘弹出，布局没有上移，弹出软键盘的时候页面顶起不恢复
uniappH5页面 样式错乱
怪咖`Blog
03-19 1841
今天在编写代码的过程中遇到一个小问题，自己也踩坑了，所以将经验分享出来，希望能帮助到你。
把uniapp打包成exe出现的页面样式的混乱的问题
hcy5201314521的博客
12-19 532
在桌面应用里，因为未知的原因uniapp计算出来的字体大小比在你的浏览器里大一倍。注意：之后设计的时候把高度建议稍微小一点，给标题和菜单栏留一些空间。接下来你需要查的就是，uniapp是基于什么来计算这个尺寸的。在代码中，这个查询字体是设置的什么大小?
uniapp小程序横屏显示样式错乱
hu104160112的博客
06-15 1712
vmax 相对于视口的宽度或高度中较大的那个，其中最大的那个被均分为100单位的vmax。vmin 相对于视口的宽度或高度中较小的那个，其中最小的那个被均分为100单位的vmin。这里我们用vmin，100vmin也就是手机屏幕宽度，一般设计图是750rpx。在开发中有时候会需要开发横屏页面，正常竖屏页面的样式横屏之后会放大错乱。
uniapp使用横竖屏显示样式错乱问题。
早晚的博客
07-06 1978
uniapp切换横竖屏样式显示错乱问题
uniapp配置模板路径页面样式错乱
不靠谱的作曲家
01-09 819
在manifest.json文件中配置了模板路径之后导致，导致系统中所有页面样式错乱，解决办法是在index。html中引入link。
uniapp全局配置固定横屏打包后出现样式问题的解决
行如逆水行舟，不进则退
08-12 612
uniapp全局配置固定横屏打包后首页出现样式比例不对，页面跳转后恢复。去掉pages.json文件中的固定横屏配置，去页面添加手动横屏。//解除屏幕方向的锁定，但是不一定是竖屏；大致是资源加载顺序的问题。
uniapp app调试工具
02-13
当目标平台锁定为微信小程序时，除了上述通用型解决方案外，还可以借助专门针对此场景设计的功能——即在HBuilderX内直接启动模拟器来预览效果，并且能够同步连接手机端实现热更新加载最新改动后的资源文件；...
uniapp编译支付宝小程序 组件样式不生效
阿巴阿巴
06-03 725
uniapp编译支付宝小程序图片显示不完整
uniapp 页面字体乱码问题解决【已解决】
Leijiang0504的博客
07-16 1685
非常简单 ，如果你选择了之后重新渲染页面还是乱码的话，你就把项目关掉，重新启动就OK了。这个不是我们本身代码的问题，调整一下编译器就好了。2,然后以指定编码重新打开，选择utf-8就行了。
6-1 uniapp 打包 App 横屏竖屏切换出现样式混乱问题
能带孩子会做饭
01-24 5523
6-1 uniapp 打包 App 横屏竖屏切换出现样式 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 App 有一个页面需横屏，竖屏进入横屏，横屏页面样式变小，退出横屏进入竖屏再进入竖屏的其他页面，竖屏的其他页面样式变大。
uni-app打包apk后，APP页面样式混乱问题解决
QRcode_Y的博客
12-04 1101
uni-app打包apk后，APP页面样式混乱问题解决
记一下uniapp打包之后的乱码问题
b734775358的博客
07-21 1167
在HBuilder X里面运行是正常的，但是打包之后uniapp自带的组件的按钮部分（uni.showModal和picker都发现这个问题）的汉字会变成乱码，所以记录一下目前解决的办法。2、uni.showModal的情况，不知道为什么修改样式没有生效，所以直接在定义的时候把按钮的文本改成unicode编码,顺便把修改uni.showModal样式的方法贴上。1、修改样式，隐藏原来的文本内容，用伪类来显示文字，一般直接放在APP.vue里面，要注意的是伪类里面的字要换成unicode编码。
uniapp安卓热更新和更新
weixin_44764935的博客
04-22 1264
他俩大概的区别就是，热更新会直接在app内更新，更新完之后直接重启app，不会跳转到一个安装页面；注：这几个权限我不确定是否必须要勾选，因为我在开发的时候plus.runtime.install没有跳转，所以就在网上搜，说是这几个权限没有打开，但是其实我当时是用的热更新，当时还不理解两者的区别，所以，如果在用.apk的包进行更新是如果没有跳转，可以把这几个权限打开试一下。如果当前的版本号小于服务器的版本号，那就是有版本更新，代码如下，可以自行打印一下试试，wgtinfo里面包含了当前的一些版本信息。
uni-app 在 APP 端的版本强制更新与热更新
UserGuan的博客
10-23 2623
② 热更新是指把 app 有改动的地方打包进 wgt 文件，只更新 wgt 文件中的内容，不进行整包安装，在用户视角也叫做省流量更新。② 每次打开 app(onLaunch生命周期)的时候，通过接口请求最新版本信息，再获取当前安装包信息，对比版本号。① 开发后台版本管理功能，每次发版上传 android 安装包，记录版本号、是热更新还是整包更新、是否强制更新等。③ 如果版本号不一致，且接口获取的版本号大于当前应用的版本号，则进行整包更新或热更新。主版本号：不兼容的 API 修改。
uniapp采用wgt包进行热更新时，底部的导航栏图标没有更新
weixin_45942583的博客
04-23 398
解决方案： 将需要更新的底部图标重新命名。
mpvue 转uniapp 导航栏样式错乱问题修复 tabbar 样式修复
a_靖的博客
10-20 1669
效果图：修改前，修改后 找了半天没找到原因，只能自己改样式了，下面是样式代码（在app.vue 里面加上就行） <style> /*每个页面公共css */ uni-tabbar { box-sizing: border-box; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 998; } .uni-tabbar { display: flex; flex-directi
uniapp打包nvue文件样式报错问题解决
weixin_44704360的博客
03-08 1850
解决方案 1.修改.nvue文件中不支持的样式 /* #ifndef APP-PLUS / border: none; / #endif */ 2.修改完检查是否使用app.vue中的样式，有的话同上，逐个修改不支持的样式
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值