浅樱
浅樱
  • 发布:2021-12-27 11:40
  • 更新:2022-06-15 19:04
  • 阅读:1282

【报Bug】安卓热更新之后重启请求数据拿到了但是页面没有渲染导致布局错乱

分类:uni小程序sdk

产品分类: uni小程序SDK

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: Redmi Note 9 4G

页面类型: vue

SDK版本号: 3.2.9

示例代码:

manifest.json(部分)

"versionName": 20211230,  
    "versionCode": 20211230,

APP.vue

plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {  
                uni.request({    
                    url: configSet.baseUrl + '/client-api/common/project/version/latest',  
                    method: 'POST',  
                    data: {  
                        id: wechatUser.app_project_id,  
                    },    
                    success: (result) => {  
                        var data = result.data ? result.data.data : {}  
                        // 有新版本  
                        console.log('本地版本', widgetInfo.version)  
                        console.log('线上版本', data.version)  
                        if((widgetInfo.version < data.version) && data.url) {  
                            uni.downloadFile({  
                                url: data.url,  
                                success: (downloadResult) => {  
                                    if (downloadResult.statusCode === 200) {  
                                        plus.runtime.install(downloadResult.tempFilePath, {  
                                            force: true  
                                        }, function() {  
                                            console.log('install success...')  
                                            // 重启  
                                            plus.runtime.restart()  
                                        }, function(e) {  
                                            console.error('install fail...', e)  
                                            plus.nativeUI.toast('更新包安装失败,请重启应用后重试')  
                                        })  
                                    }  
                                },  
                                fail: (err) => {  
                                    console.log('下载失败', err)  
                                    plus.nativeUI.toast('更新包下载失败,请检查网络后重试')  
                                }   
                            })  
                        } else {  
                            console.log('暂无新版本')  
                        }  
                    }  
                })  
            })

tab1.vue(js)

console.log('新total_quantity', this.total_quantity)  
                console.log('新total_patient_quantity', this.total_patient_quantity)  
                this.$forceUpdate()

这里对应图片上为患者筹集药品那里的undefined,以及服务患者那里的undefined,控制台打印是有值的,加了 this.$forceUpdate()还是不会重新渲染

tab1.vue(html)

<view>new content 快快快嘿嘿嘿</view>  
        <view>new content 快快快</view>  
        <view>new content 快快快</view>  
        <view class="home-top">  
            <view class="content">  
                <bannerSwiper :dataArr="bannerSwiper"/>  
            </view>  
        </view>

bannerSwiper

<template>  
    <view class="swiper-banner">  
        <swiper class="swiper" :autoplay="true" @change="setDots" v-if="dataArr && dataArr.length > 0">  
            <swiper-item class="swiperItem" v-for="(item, index) in dataArr" :key="index" @click="Navgate(item.bannerUrl)">  
                <view class="swiper-item uni-bg-red">  
                    <image :src="item.bannerImg" mode="widthFix" />  
                </view>  
            </swiper-item>  
        </swiper>  
        <view class="dotBox" v-if="dataArr && dataArr.length > 0">  
            <view class="dot" :class="{ active: currentIndex == index ? true : false }" v-for="(item, index) in dataArr" :key="index"></view>  
        </view>  
    </view>  
</template>

操作步骤:

此问题不是必现问题,但是一直更新同一版本的wgt包在多次卸载重装之后是必现的
1、在模拟器上安装APP,进入首页更新wgt包,安装完成之后重启,页面显示正常;
2、卸载app重装,重复步骤1,页面是显示布局错乱;
3、重复步骤2,布局依旧是错乱的;
4、重复步骤2,还是乱的;
5、将版本号+1,变成新的wgt包,重复前面的步骤,第一次升级基本是正常的(只是偶尔会错乱),安装升级次数越多,页面布局都是错乱的;
6、重复步骤5得到的结果大致相同。

预期结果:

页面显示正常

实际结果:

页面布局显示错乱,且图片显示很大

bug描述:

小程序制作wgt包后进行热更新,安卓安装好更新包后重启,结果首页UI布局错乱,拿到了后台数据,但是页面没有渲染(包括引用组件页面),导致布局错乱,且图片显示尺寸很大。
页面错乱时控制台有以下报错:

2021-12-27 15:00:07.118 7202-7202/com.peconf.medical I/console: [ERROR]cid unmatched [object Object] at view.umd.min.js:1  
2021-12-27 15:00:07.120 7202-7202/com.peconf.medical I/console: [ERROR]TypeError: Invalid attempt to destructure non-iterable instance.  
    In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1  
2021-12-27 15:00:07.126 7202-7202/com.peconf.medical I/console: [ERROR]cid unmatched [object Object] at view.umd.min.js:1  
2021-12-27 15:00:07.127 7202-7202/com.peconf.medical I/console: [ERROR]TypeError: Invalid attempt to destructure non-iterable instance.  
    In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1

下午又试了,发现没有规律了,第一次安装更新也大概率出现此问题

28日补充:
hx版本3.2.9,并非是nvue开发,新版本中添加新的静态内容也没有更新显示在页面上;
只有首页样式错乱,其他tabbar页面是正常的
29日补充:restart之后本地版本更新了,也执行了新wgt包里面js,但是页面显示的却是旧版本的wgt包内容

2021-12-27 11:40 负责人:DCloud_Android_DQQ 分享
已邀请:

最佳回复

愿随风丶飘雪

愿随风丶飘雪 - 勿在浮沙筑高台

原因是手机webview缓存导致的,咱们只需要每次修改引入文件的名字,让他们不一致就行
为了避免手工修改出现错误,我做了个脚本
1.全局安装修复工具

npm install uni-wgt-fix -g

2.在打包好的wgt文件夹所在目录执行 wgt fix 命令

wgt fix

3.会自动生成_fix.wgt的文件,发布时发布_fix.wgt文件就行
QQ: 924289941

DCloud_Android_DQQ

DCloud_Android_DQQ

我先看看 稍后回复你

  • 浅樱 (作者)

    你好,请问有眉目了吗?后面我有更新bug描述,请关注一下,感谢

    2021-12-29 14:05

  • 6***@qq.com

    大大~咋样啊 我也有这个问题

    2021-12-29 17:31

  • 浅樱 (作者)

    回复 6***@qq.com: 我这边有新发现,更新之后首页wgt包还是旧版本的,其他页面是新的wgt包的内容,所以首页布局是乱的

    2021-12-30 10:30

DCloud_Android_DQQ

DCloud_Android_DQQ

老哥。你这个是小程序sdk吗。 看上去是拿hx 升级了一个wgt?

  • 浅樱 (作者)

    是hx打包wgt包进行热更新

    2021-12-30 13:38

  • 浅樱 (作者)

    是我产品分类选错了吗

    2021-12-30 13:39

  • DCloud_Android_DQQ

    回复 浅樱: 选错了。 没事。 你留个qq吧。 或者提供一下 其他可以复现问题的场景。 我上午测试,重试了多次确实没复现

    2021-12-30 14:53

  • 浅樱 (作者)

    回复 DCloud_Android_DQQ: 1812083198

    2021-12-30 15:09

  • 浅樱 (作者)

    回复 DCloud_Android_DQQ: 我们这是必现的,出现的真正问题是新版wgt包部分内容更新,首页内容还是旧的,所以首页布局也是乱的

    2021-12-30 15:14

  • DCloud_Android_DQQ

    回复 浅樱: 加你了。你的意思是 新的wgt里面 首页不变,其他的界面内容变了 才会触发这个问题是吗

    2021-12-30 15:20

  • 浅樱 (作者)

    回复 DCloud_Android_DQQ: 应该说这个问题本身就是我描述的那样,如果新版的wgt包内容全部更新了,也就不会有布局和样式错乱的问题了

    2021-12-30 15:33

DCloud_Android_DQQ

DCloud_Android_DQQ

你留个qq吧。我这边打了了个apk 没复现问题。 我发apk 给你你在你那边试试

  • 浅樱 (作者)

    是wgt包热更新

    2021-12-30 13:39

  • 车轮滚滚

    回复 浅樱: 老哥,问题解决了吗 ? 我也遇到了

    2022-08-27 17:03

  • DCloud_Android_DQQ

    回复 车轮滚滚: 目前是定位部分设备浏览器内核缓存问题。 先使用临时解决方案,修改名称,强制更新缓存

    2022-09-05 16:46

DCloud_Android_DQQ

DCloud_Android_DQQ

用最新版本hx 试试还有没有问题

  • 愿随风丶飘雪

    需要更新SDK吗 我也遇到了相同的问题

    2022-05-07 16:09

  • 愿随风丶飘雪

    我发现界面修改后会出现这个问题,这次更新界面有修改,然后就出现了这个问题

    2022-05-08 17:32

yjf

yjf

只要是wgt热更包,首页有内容修改的情况下,热更后首页样式就会错乱,100%复现。

  • 愿随风丶飘雪

    看这个文章 https://ask.dcloud.net.cn/article/39887

    2022-06-15 19:04

该问题目前已经被锁定, 无法添加新回复