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

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

钮钴禄泡泡
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp APP端安卓在线升级功能
06-16
在移动应用开发中，"uniapp APP端安卓在线升级功能"是提高用户体验和确保软件安全性的关键特性。uniapp是一个跨平台的开发框架，它允许开发者使用一套代码库来构建iOS、Android、Web等多平台的应用。对于Android平台...
6-1 uniapp 打包 App 横屏竖屏切换出现样式混乱问题
能带孩子会做饭
01-24 5087
6-1 uniapp 打包 App 横屏竖屏切换出现样式 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 App 有一个页面需横屏，竖屏进入横屏，横屏页面样式变小，退出横屏进入竖屏再进入竖屏的其他页面，竖屏的其他页面样式变大。
把uniapp打包成exe出现的页面样式的混乱的问题
hcy5201314521的博客
12-19 300
在桌面应用里，因为未知的原因uniapp计算出来的字体大小比在你的浏览器里大一倍。注意：之后设计的时候把高度建议稍微小一点，给标题和菜单栏留一些空间。接下来你需要查的就是，uniapp是基于什么来计算这个尺寸的。在代码中，这个查询字体是设置的什么大小?
uniapp热更新详细流程（App端）
最新发布
二锅头
06-12 996
将你写的云函数上传部署，如图右键，上传所有云函数（不然打包成app后，app无法使用该云函数，也就监测不到版本是否更新）最后，要更新版本时，在数据库中改新包的链接和版本号，再次登录app，即可监测到版本更新。当然，你也可自行创作开发个版本管理平台。祝，顺利。
uniapp热更新,告别云打包
绳墨BigHead
12-08 3571
前言 项目一直使用uniapp来打包APP,但是每次发布测试或者上线,都要使用官方的云打包…有大小限制不说,周五等时间等待的时间比打包的时间更加长,所以就想着能不能热更新呢?说干就干 调研阶段 首先在官网的文档上找了一下,发现原来官方就有热更新的平台,这不巧了嘛官方文档,这里根据官方文档把插件安装好,文档写的还是很详细的,插件分两个,包的管理平台没什么可说,基本按照官方文档走就可以了,这里主要说一下APP的插件上的使用和一些完善的部分 静默更新 根据官方的文档走完,基本就能更新包了,因为更新的过程
uniapp 开发H5打包微信小程序样式失效的解决之道
无神的博客
11-11 7712
使用uniapp开发H5，样式已经按照UI设计稿全部实现。但是在打包微信小程序调试的时候，遇到很多样式失效的问题。问了度娘很久，并没有完全解决样式失效的问题。于是自己按照从度娘上查到的方法去进行组合尝试，最终样式失效问题得到了完全的解决。样式不生效的原因：u-view框架组件自带的class优先级高于开发者自定义的优先级，所以显示的是组件的默认样式（网上有说是样式隔离）。解决办法就是提高自定义样式的优先级，使用自定义的样式去覆盖默认样式。
uniApp——hubuilder版本与手机端SDK不匹配解决方法
qq_32944491的博客
03-08 4591
本应用使用hbuilderxx.xx或对应的cli版本编译，而手机端SDK版本是x.x.x
uniapp开发app，进行app更新组件
01-17
本篇将详细讲解如何在uniapp中实现APP的更新组件功能，以确保用户能够及时获取最新的应用版本。 一、uniapp简介 uniapp是基于Vue.js开发的多端统一开发框架，通过uni-app，开发者可以使用Vue.js语法编写代码，然后...
uniapp APP端客服插件
05-16
【uniapp APP端客服插件】是专门为基于uniapp框架的移动应用开发设计的一款客服集成解决方案。uniapp是一个跨平台的开发工具，允许开发者用一套代码编写应用，同时支持iOS、Android以及H5等多个平台。这款客服插件的...
uniapp APP打开浏览器界面(browser.js)
07-31
uniapp APP打开浏览器界面
uniapp 打包App 电商源码
06-01
5. **热更新**：uniapp支持热更新机制，开发者可以无需用户手动更新应用，即可实现代码的实时部署和修复。 6. **社区生态**：uniapp拥有活跃的开发者社区，提供各种插件和教程，方便开发者扩展功能和学习。 在...
uniapp中app真机模拟以及小程序编译后css样式异常失效问题原因及解决方案
热门推荐
weixin_45745641的博客
01-01 1万+
最近写使用uniapp写app，开发的时候写样式都是使用浏览器h5进行调试一切正常，但是最后进行手机真机调试的时候css样式出现了异常，本文归纳常见的问题比如在h5页面显示正常：但是在真机调试app的实现则显示：vue页面在App端的渲染引擎默认是系统webview（不是手机自带浏览器，是rom的webview），在较老的手机上，比如Android4.4、5.0或iOS8，一些新出的css语法是不支持的。注意这不意味着不能使用flex，Android4.4也支持flex，只是不要使用太新的css。可以找An
记一下uniapp打包之后的乱码问题
b734775358的博客
07-21 774
在HBuilder X里面运行是正常的，但是打包之后uniapp自带的组件的按钮部分（uni.showModal和picker都发现这个问题）的汉字会变成乱码，所以记录一下目前解决的办法。2、uni.showModal的情况，不知道为什么修改样式没有生效，所以直接在定义的时候把按钮的文本改成unicode编码,顺便把修改uni.showModal样式的方法贴上。1、修改样式，隐藏原来的文本内容，用伪类来显示文字，一般直接放在APP.vue里面，要注意的是伪类里面的字要换成unicode编码。
App升级中心 uni-upgrade-center WGT热更新遇到的一些问题
jueshileqishou01的博客
08-02 1206
uniapp升级中心的坑
uniapp发布h5和小程序样式或者一些其他问题
m0_50663823的博客
08-23 1967
uniapp发布h5和小程序样式或者一些其他问题
HBuilderX打包人人商城app详解
qq_37691559的博客
03-03 359
人人商城打包、app识别成H5解决方法、wap2app返回按钮退出应用解决方法、人人商城打包app两个标题栏解决方法
uniapp小程序横屏显示样式错乱
hu104160112的博客
06-15 1192
vmax 相对于视口的宽度或高度中较大的那个，其中最大的那个被均分为100单位的vmax。vmin 相对于视口的宽度或高度中较小的那个，其中最小的那个被均分为100单位的vmin。这里我们用vmin，100vmin也就是手机屏幕宽度，一般设计图是750rpx。在开发中有时候会需要开发横屏页面，正常竖屏页面的样式横屏之后会放大错乱。
uniapp window版3.8.7 自定义组件钉钉小程序样式不生效！！
qq_33836424的博客
07-07 482
刚入一家公司，接手的项目中有一个钉钉小程序项目，一开始下载的 HBuilderX@3.8.7版本，一开始拉取项目后直接打开，没啥问题，具体的自定义组件样式没有失效，后续几次偶尔打开，期间清理过整个unpackage文件，重新打包了之后，样式就失效了，刚开始认为缺失某些文件，但是我啥都没改动过。查阅csdn相关找到问题所在，HBuilderX新版本的问题。2.HbuilderX版本降到3.5.3。只是记录，他人csdn的链接可能失效。
uniapp打包 H5 样式失效以及隐藏H5的顶部导航栏
m0_58293192的博客
07-18 1559
uniapp打包 H5 样式失效以及隐藏H5的顶部导航栏
uniapp app开发热更新
11-22
uniapp app开发热更新可以通过以下步骤实现： 1. 在uni-app项目的根目录下创建一个名为`update`的文件夹，用于存放热更新的资源文件。 2. 在`update`文件夹中创建一个名为`manifest.json`的文件，用于记录热更新的版本信息和资源文件列表。示例内容如下： ```json { "version": "1.0.0", "packages": [ { "path": "update.zip", "md5": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx" } ] } ``` 其中，`version`表示当前热更新的版本号，`packages`数组中的每个对象表示一个资源包，`path`表示资源包的路径，`md5`表示资源包的MD5值。 3. 将需要热更新的资源文件打包成一个zip文件，命名为`update.zip`，并放置在`update`文件夹中。 4. 在uni-app项目的`main.js`文件中添加热更新的代码。示例代码如下： ```javascript import { checkUpdate, downloadUpdate, applyUpdate } from 'uni-updater'; // 检查是否有新版本 checkUpdate({ url: 'http://example.com/update/manifest.json', // 热更新资源的manifest.json文件的URL success: (res) => { if (res.hasUpdate) { // 下载新版本资源 downloadUpdate({ url: 'http://example.com/update/update.zip', // 热更新资源的zip文件的URL success: (res) => { // 应用新版本资源 applyUpdate({ success: () => { // 热更新成功 }, fail: (err) => { // 热更新失败 } }); }, fail: (err) => { // 下载资源失败 } }); } }, fail: (err) => { // 检查更新失败 } }); ``` 以上代码中，`checkUpdate`函数用于检查是否有新版本的热更新资源，`downloadUpdate`函数用于下载新版本的热更新资源，`applyUpdate`函数用于应用新版本的热更新资源。 请注意，以上代码中的URL需要替换为实际的热更新资源的URL。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值