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>