1***@qq.com
1***@qq.com
  • 发布:2021-12-01 11:07
  • 更新:2021-12-01 11:58
  • 阅读:854

nvue页面无法获取到页面里面的webview组件对象

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.16

HBuilderX类型: 正式

HBuilderX版本号: 3.2.16

手机系统: iOS

手机系统版本号: iOS 15

手机厂商: 苹果

手机机型: 8p

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view class="dd">
<web-view id="test" ref='test' class="test" style="flex: 1;" :src="url"></web-view>
<view class="btnbox">
<!-- <view><text class="text">我是按钮栏</text></view> -->
<view class="textbox" @tap="save"><text class="text">保存到相册</text></view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
url: ''
}
},
methods: {
save() {
console.log(this.$refs.test);

            var currentWebview = this.$scope.$getAppWebview();  
            console.log(currentWebview);  
            console.log(plus.webview.getDisplayWebview());  
            console.log(plus.webview.getWebviewById('7'))  
            console.log(plus.webview.all())  
            // plus.webview.all().map((res,i)=>{  
            //  if(res.id != currentWebview.id){  
            //      plus.webview.getWebviewById(res.id).hide();  
            //  }  
            // })  
            // setTimeout(function() {  
            //  let wv = currentWebview.children()[0]  
            //  console.log(currentWebview.children())  
            // }, 1000);  
            return  
        // 截屏绘制  
        var bitmap = null;  
        bitmap = new plus.nativeObj.Bitmap('test');  
        // 将webview内容绘制到Bitmap对象中  
        ws.draw(bitmap, function() {  
            bitmap.save("_doc/drawScreen.jpg", {  
                overwrite: true  
            }, res => {  
                console.log(res.target); // 图片地址    
                uni.saveImageToPhotosAlbum({  
                    filePath: res.target,  
                    success: function() {  
                        console.log('save success');  
                    }  
                });  
                bitmap.clear(); // 清除Bitmap对象    
            }, error => {  
                console.log(JSON.stringify(error)); // 保存失败信息    
                bitmap.clear(); // 清除Bitmap对象    
            });  
        }, function(e) {  
            console.log('截屏绘制图片失败:' + JSON.stringify(e));  
        }, {  
            check: true, // 设置为检测白屏  
            clip: {  
                top: '0%',  
                left: '0px',  
                height: '50%',  
                width: '100%'  
            } // 设置截屏区域  
        });  
    }  
},  
onLoad(e) {  
    this.url = e.url  
}  
}  

</script>

<style>
.dd {
flex: 1;
}

.btnbox {  
    background-color: #3184ff;  

}  

.textbox {  
    height: 80rppx;  
    justify-content: center;  
    align-items: center;  
}  

.text {  
    color: #FFFFFF;  
}  

</style>

操作步骤:

nvue页面无法获取到页面里面的webview组件对象

预期结果:

获取到页面里面的webview调用其plus api

实际结果:

页面无法获取到页面里面的webview组件对象

bug描述:

nvue 页面里面有webview组件

想获取页面里面的webview 组件调用他的plus API方法进行截图等操作

但是nvue页面无法获取到
通过this.$scope.$getAppWebview().children() 获取为[]

通过plus.webview.all()里面也没有包含放在nvue页面里面的webview,只有当前nvue页面的webview

由于布局要求需要nvue页面进行自行设置webview的高度,vue页面默认全屏因此无法达到效果

2021-12-01 11:07 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

nvue 是 weex 页面并不是 5+ Webview,所以没有这些 API,可以尝试更换文件扩展名为 .vue

  • 1***@qq.com (作者)

    嗯嗯 只能这样了 谢谢

    2021-12-01 15:31

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