【报Bug】Android使用plus.nativeObj.View加载gif图片更新/重置异常

分类：HTML5+

bug反馈

产品分类： HTML5+

HBuilderX版本号： 3.5.3

手机系统： Android

手机系统版本号： Android 9.0

手机厂商：小米

手机机型： 6X

打包方式：云端

示例代码：

<!DOCTYPE html>    
<html>    
    <head>    
    <head>    
        <meta charset="utf-8"/>    
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>    
        <meta name="HandheldFriendly" content="true"/>    
        <meta name="MobileOptimized" content="320"/>    
        <title>Hello H5+</title>    
        <script type="text/javascript" src="../js/common.js"></script>    
        <script type="text/javascript">    
var nWaiting,nTitle; // 原生view的等待界面和title    
var touchX; // nWaiting的点击坐标的x数值    
var backPressed; //返回箭头是否处于按下状态    
var contentWebview=null; //准备打开网址的webview    
var bitmap=null; // 返回图标    
var topoffset=0;    
// H5 plus事件处理    
function plusReady(){    
    if(plus.navigator.isImmersedStatusbar()){// 兼容沉浸式状态栏模式    
        topoffset=Math.round(plus.navigator.getStatusbarHeight());    
    }    
    var bdata = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAACcklEQVR4nO3a0XESURiG4TeO99iBWoGZ+RvADtKBpAPtwBLsANJBrEAs4MyYDmIHSQXkgk0mMLK7ILt8/+F778ici394OGfDsher1Qqn05tTD+A2M4hYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYb089wNCVUq6Ay+blfUQsTjhOZxc1P9tbSlkAX7b+/C0ifpxgnF5Ve2TtwAD4OvIoe1UlSAsGwPsRR9m76kA6MAD+jjTKQVUF0gMD4HaEUQ6umot6T4ybiJgNP83hVbFDasGACnZIT4yfEXE1wjj/Xeod0hPjDpgNPsyRSguyB8Y0Ih6Gn+g4pQSpFQMSgtSMAclAaseARCDngAFJQM4FAxKAnBMGiH8xLKVMgV89ln6MiPthpxkn6R0SEUvgusfSZSnlsnuZftI75LlSygyYdyx7ZH1s/Rl+ouFKAQIvx9ctMGlZlh4lDQhAcywtqRhF+hqyXfMmT1m/6buasL6mzMaY6dilAoENlLuWZRNgnhEl1ZH1ulLKO9bH16eOpdfqz2K9Lt0Oea75EjilfadAsp2SFgQ2UH53LJ2XUr4PPtARSntkbVfL7+rVgEBvlM/NHQDJUh9Z2zWf/puOZbPhJzm8qkDgBaXt/teHcSY5rOpAAJp/c/vclJSrShDYifKI+NPvVV3U/1VzU3LavFyo/25SPUi2qj2ysmYQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsZ4Ak9fPFwUy/HsAAAAASUVORK5CYII=';    
    bitmap = new plus.nativeObj.Bitmap('back');    
    bitmap.loadBase64Data(bdata, function(){    
        bitmap.isLoadSuccess = true;    
        nWaiting&&nWaiting.drawBitmap(bitmap,null,{top:topoffset+'px',left:'0px',width:'44px',height:'44px'},'backicon');    
        console.log('Back bitmap load success');    
    }, function(e){    
        console.log('Back bitmap load failed: '+JSON.stringify(e));    
    });    

    //创建nWaiting    
    creatWaiting();    
}    
if(window.plus){    
    plusReady();    
}else{    
    document.addEventListener('plusready',plusReady,false);    
}    
// 创建原生View控件    
function creatWaiting(){    
    console.log('creatWaiting: '+topoffset);    
    //判断view是否已存在，避免重复创建，尤其调试刷新网页时很容易触发重复创建     
    nWaiting = plus.nativeObj.View.getViewById('nWaiting');    
    if(nWaiting){    
        return;    
    }    
    nWaiting = new plus.nativeObj.View('nWaiting',{top:'0px',left:'0px',height:'100%',width:'100%'});    
    nWaiting.interceptTouchEvent(true);    

    //初始化绘制nwaiting界面    
    nWaiting.drawRect('#D74B28',{top:'0px',left:'0px',height:(topoffset+44)+'px',width:'100%'}) //绘制title背景色    
    bitmap&&bitmap.isLoadSuccess&&nWaiting.drawBitmap(bitmap,null,{top:topoffset+'px',left:'0px',width:'44px',height:'44px'},'backicon');    
    nWaiting.drawText( '标题', {top:topoffset+'px',left:'0px',width:'100%',height:'44px'}, {size:'17px',color:'#CCCCCC'});    
    nWaiting.drawRect('#EEEEEE',{top:(topoffset+44)+'px',left:'0px',width:'100%'}) //绘制等待内容区背景色    
    nWaiting.drawText( '加 载 中 ...', {top:(topoffset+44)+'px',left:'0px',width:'100%',height:'50%'}, {size:'12px',color:'rgb(100,100,100)'});    
    /**非jpg图片切换正常**/    
    nWaiting.drawBitmap('/img/asr/asr.jpg', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');    
    nWaiting.addEventListener("click", function(e){    
        console.log("点击原生控件："+JSON.stringify(e));    
        if(e.clientY<300){    
            nWaiting.drawBitmap( '/img/asr/asr.jpg', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');    
        }else{    
            nWaiting.drawBitmap( '/img/asr/asr.png', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');    
        }    
    }, false);    
    nWaiting.show();    
    /**/    
    /**gif图片，存在暂留现象，多次切换闪退    
    nWaiting.drawBitmap('/img/asr/asr.gif', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img' );    
    nWaiting.addEventListener("click", function(e){    
        console.log("点击原生控件："+JSON.stringify(e));    
        //nWaiting.reset();//对gif无效    
        if(e.clientY<300){    
            nWaiting.drawBitmap( '/img/asr/asr.gif', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');    
        }else{    
            nWaiting.drawBitmap( '/img/asr/closing.gif', {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'} ,'img');    
        }    
    }, false);    
    nWaiting.show();    
    /**/    
    /**使用Bitmap加载非gif图片正常    
    var bitmap1 = new plus.nativeObj.Bitmap('bmp1');    
    bitmap1.load('/img/asr/asr.jpg',function(){    
        console.log('load success!');    
    },function(e){    
        console.log('load failed! '+JSON.stringify(e));    
    });    
    nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');    
    nWaiting.addEventListener("click", function(e){    
        console.log("点击原生控件："+JSON.stringify(e));    
        if(e.clientY<300){    
            bitmap1.load('/img/asr/asr.jpg',function(){    
                console.log('jpg load success!');    
            },function(e){    
                console.log('load failed! '+JSON.stringify(e));    
            });    
            nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');    
        }else{    
            bitmap1.load('/img/asr/head.jpg',function(){    
                console.log('head load success!');    
            },function(e){    
                console.log('load failed! '+JSON.stringify(e));    
            });    
            nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');    
        }    
    }, false);    
    nWaiting.show();    
    /****/    
    /**使用Bitmap加载gif图片异常，一直显示首次加载的gif，点击不再更新    
    var bitmap1 = new plus.nativeObj.Bitmap('bmp1');    
    bitmap1.load('/img/asr/closing.gif',function(){    
        console.log('load success!');    
    },function(e){    
        console.log('load failed! '+JSON.stringify(e));    
    });    
    nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');    
    nWaiting.addEventListener("click", function(e){    
        console.log("点击原生控件："+JSON.stringify(e));    
        if(e.clientY<300){    
            bitmap1.load('/img/asr/asr.gif',function(){    
                console.log('gif load success!');    
            },function(e){    
                console.log('load failed! '+JSON.stringify(e));    
            });    
            nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');    
        }else{    
            bitmap1.load('/img/asr/closing.gif',function(){    
                console.log('closing load success!');    
            },function(e){    
                console.log('load failed! '+JSON.stringify(e));    
            });    
            nWaiting.drawBitmap(bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'25%',left:'25%',width:'50%',height:'25%'},'img');    
        }    
    }, false);    
    nWaiting.show();    
    /****/    
}    
// 使用原生View控件作为动画模板显示窗口     
function showWithWaiting(){    
    nWaiting.show();    
    return;    
    var bShow=bUpdate=false;    

    contentWebview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'contendWebview', {    
        titleNView:{    
            autoBackButton: true,    
            backgroundColor: '#D74B28',    
            titletText: '标题',    
            titleColor: '#CCCCCC',    
        }    
    });    

    contentWebview.addEventListener('close', function(){    
        contentWebview=null;    
    });    
    contentWebview.addEventListener('titleUpdate', function(){    
        bUpdate=true;    
        bShow&&nWaiting.hide();    
    }, false);    
    contentWebview.addEventListener('loaded', function(){// 兼容titleUpdate事件不触发的情况    
        bUpdate||(bUpdate=true,bShow&&nWaiting.hide());    
    }, false);    

    contentWebview.show('pop-in', null, function(){    
        bShow=true;    
        bUpdate&&nWaiting.hide();    
    }, {capture:nWaiting});    
    /**    
    **/    
}    
// 重写返回处理    
var _back=window.back;    
function safeback(){    
    contentWebview?contentWebview.close('pop-out'):(bitmap&&bitmap.clear(),nWaiting&&nWaiting.clear(),_back());    
}    
window.back=safeback;    
        </script>    
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>    
    </head>    
    <body>    
        <p class="des">    
使用nview来做转场动画，以及使用原生view做标题栏。    
        </p>    
        <div class="button" onclick="showWithWaiting()">演示</div>    
        <p class="des" style="font-weight:bold;text-indent:0;">    
逻辑简述：    
        </p>    
        <p class="des">    
启动后先创建一个原生waiting界面，但不显示。    
点击show按钮后，原生waiting做动画进来，同时然后创建一个带原生View控件导航栏的contentWebview加载网络页面，等titleUpdate后显示contentWebview并关闭原生waiting界面。    
        </p>    
    </body>    
</html>

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

在官方Hello H5+项目上修改nativeobj_animation.html,添加图片,点击切换图片。使用jpg图片正常切换。使用gif图片时存在原图片暂留现象，且多次切换后APP闪退。该问题在plus.nativeObj.Bitmap及uniapp中同样存在。

2022-09-03 09:44 负责人:无分享

1 个回复

DCloud_Android_ST

页面关闭时需主动处理plus.nativeObj.Bitmap.clear

3***@qq.com (作者)

不是在页面关闭的时候，是在当前页面使用drawBitmap()更新图片，如果是png/jpg就正常，换成gif动图就不能切换。我是在uniapp上发现的，然后创建5+App项目测试，发现也存在这个问题。在uniapp项目上，我是先关闭plus.nativeObj.View.close()，在重新建一个new plus.nativeObj.View，然后drawBitmap新的gif图片。

2022-09-05 16:18
DCloud_Android_ST

回复 3***@qq.com: uniapp直接用nvue来渲染会更好。你这个问题我会记录看看

2022-09-05 16:40
3***@qq.com (作者)

回复 DCloud_Android_ST: 感谢大神。介绍下为什么我使用plus创建gif动图：开始APP显示动图使用vue页面image组件，运行在安卓一体机，android7.1，RK3399，运行良好。后来采购了一个RK3288，也是android7.1,但是原来的APP就运行不了了，频繁闪退死机。我创建uniapp hello模板项目，在vue/nvue界面用image组件显示gif动图，运行在RK3288一体机上都会出现闪退。没办法，就用plus创建gif动图，就不闪退。纯原生渲染模式，也试过，在nvue页面使用image组件加载动图运行在rk3288平台上就会出现闪退。使用android studio显示动图，rk3288时可以的，也很流畅。plus创建的动图接近android studio的效果。而且我在小米 6x手机上测试nvue页面加载多个image组件显示gif动图，也会出现卡顿。就是在gif动图显示方面，nvue页面image组件不如plus方法。

2022-09-06 16:52
DCloud_Android_ST

回复 3***@qq.com: 你是云打包还是离线打包

2022-09-06 16:56
3***@qq.com (作者)

回复 DCloud_Android_ST: 有原生付费插件，只能云打包

2022-09-07 08:00

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

【报Bug】Android使用plus.nativeObj.View加载gif图片更新/重置异常

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

1 个回复

公告

相关问题

【报Bug】Android使用plus.nativeObj.View加载gif图片更新/重置异常

操作步骤： 无

预期结果： 无

实际结果： 无

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

无

预期结果：

无

实际结果：

无