c***@youyoucz.com
c***@youyoucz.com
  • 发布:2022-11-24 15:22
  • 更新:2022-11-24 15:22
  • 阅读:188

【报Bug】横屏 iOS 应用的 nvue 原生页面使用 uni.chooseImage 选择相册图片后, 所有nvue页面的宽度都计算不正确. (横屏应用的宽度应该是宽高中较大值)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

手机系统: iOS

手机系统版本号: iOS 16

手机厂商: 苹果

手机机型: iPhone 13

页面类型: nvue

vue版本: vue2

打包方式: 离线

项目创建方式: HBuilderX

示例代码:

manifest.json: 设置应用为全屏 "screenOrientation" : [ "landscape-primary" ],

"app-plus" : {  
        "usingComponents" : true,  
        "nvueStyleCompiler" : "uni-app",  
    "screenOrientation" : [ "landscape-primary" ],  
}

调用 uni.chooseImage 的页面

<template>  
    <view class="content">  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
            <div class="steps">  
                <text class="step">步骤1: 点击”查看nvue页面“按钮, 页面是全屏的宽度</text>  
                <text class="step">步骤2: 点击”点击上传图片“按钮, 在相册选择一张图片</text>  
                <text class="step">步骤3: 点击”查看nvue页面“按钮, 观察nvue页面的宽度异常</text>  
            </div>  

            <div class="btn" @click="clickChooseImage">点击上传图片</div>  
            <div class="btn" @click="gotoNvuePage">查看nvue页面</div>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: '复现步骤:'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            gotoNvuePage() {  
                uni.navigateTo({  
                    url: '/pages/test/test'  
                })  
            },  
            clickChooseImage() {  
                uni.chooseImage({  
                    count: 1, //默认9  
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有  
                    sourceType: ['album'], //从相册选择  
                    success: function(res) {  
                        if (res.errMsg != "chooseImage:ok") {  
                            return uni.showToast({  
                                title: '选择图片失败',  
                                duration: 2000  
                            });  
                        }  
                        uni.showToast({  
                            title: '选择图片成功',  
                            duration: 2000  
                        });  
                    },  
                    fail: (err) => {  
                        uni.showToast({  
                            title: '选择图片失败2',  
                            duration: 2000  
                        });  
                    }  
                });  
            }  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .step {  
        display: block;  
    }  

    .steps {  
        width: 500rpx;  
    }  

    .text-area {  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
    }  

    .btn {  
        margin-top: 10rpx;  
        height: 50rpx;  
        line-height: 50rpx;  
        font-size: 15rpx;  
        width: 300rpx;  
        color: lightseagreen;  
        border: 1rpx solid lightseagreen;  
        text-align: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  

唤起相册后, 在nvue页面, 页面异常

<template>  
    <div class="nvue">  
        <div class="backbtn" @click="back">{{'返回'}}</div>  
        <div class="text">  
            这个是 nvue 页面, 正常情况下这个页面有一个全屏的红色框. bug情况下红框没有全屏<br>  
            {{style}}  

        </div>  
    </div>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                style: `nvue根节点的属性: width: 750rpx; height: 100vh;`  
            }  
        },  
        methods: {  
            back() {  
                uni.navigateBack()  
            }  
        }  
    }  
</script>  

<style>  
    .nvue {  
        width: 750rpx;  
        height: 100vh;  
        flex: 1;  
        border: 2rpx solid red;  
        box-sizing: border-box;  

        display: flex;  
        align-items: center;  
        justify-content: center;  

        font-size: 12rpx;  
        font-weight: 400;  
        overflow: auto;  
    }  

    .backbtn {  
        height: 50rpx;  
        line-height: 50rpx;  
        font-size: 15rpx;  
        text-align: center;  
        border: 1px solid lightseagreen;  
        color: red;  
    }  
</style>

操作步骤:

操作过程

  1. 在nvue页面中会使用uni.chooseImage 访问相册, 会唤起图片选择和确认选择等页面,
  2. 选择图片后返回到nvue页面后, nvue页面的宽度变的很窄, 宽度由之前的812变为了375.
  3. 之后进入其他的nvue页面, 都是出现了宽度变窄的错误,
  4. 重启应用以后才能恢复正常

预期结果:

预期结果

  1. nvue页面的宽度是将屏幕铺满
  2. 以750rpx为页面宽度基准的其他图标和按钮大小都正常

实际结果:

预期结果

  1. nvue页面的宽度是无法将屏幕铺满
  2. nvue页面的的其他图标和按钮大小都偏小,

bug描述:

首先应用是一个横屏应用, (812x375), 在实现页面布局时, 均使用 ``width: 750rpx; 的方式来填满页面宽度.

在访问相册选择图片的页面后, 回到nvue页面, 或者进入新的nvue页面,
nvue页面的宽度不能将设备撑满

2022-11-24 15:22 负责人:无 分享
已邀请:

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