- 当前 Bug 的表现(可附上截图)
隐藏view以后,camera的cover-view会隐藏,但是,camera本身还是全屏显示
- 预期表现
预期表现是camera也隐藏
- 复现路径
- 提供一个最简复现 Demo
<!–拍照上传–>
<view>
<view hidden=’{{!(showIndex == 4)}}’>
<camera device-position=“back” binderror=“authCamera” style=“width: 100%; height: 100vh;”>
<cover-view class=“controls”>
<cover-view class=“play”>
<button bindtap=‘tokePhoto’ style=“width: 50%; background-color: #7ED321;”>拍照</button>
</cover-view>
</cover-view>
</camera>
</view>
<view class=“flex-wrp” style=“flex-direction:row;” hidden=’{{!(showIndex == 1)}}’>
<view class=“flex-wrp” style=“flex-direction: row;”>
<view style=“width:50%;”>
<button bindtap=‘jypz’ class=“navi-span”>
<text>交易凭证</text>
</button>
</view>
<view>
<button bindtap=‘hgz’ class=“navi-span”>
<text>合格证</text>
</button>
</view>
</view>
</view>
<view hidden=’{{!(showIndex == 2)}}’>
<div class=“weui-cells weui-cells_form”>
<picker mode=“date” bindchange=“jypzDatePicker”>
<div class=“weui-cell”>
<div class=“weui-cell__hd”>
<label for="" class=“weui-label”>日期</label>
</div>
<div class=“weui-cell__bd” style=“padding-left: 10px;”>
<input class=“weui-input” type=“date” value="{{jypzDate}}">
</input>
</div>
</div>
</picker>
<div class=“weui-cell”>
<div class=“weui-cell__hd”>
<label for="" class=“weui-label”>交易凭证</label>
</div>
<div class=“weui-cell__bd” style=“padding-left: 10px;” >
<image wx:if="{{jypzImg}}" src=’{{jypzImg}}’ mode=“aspectFit”
style=“width: 180px; height: 90px; background-color: #eeeeee;”
bindtap=‘psJypz’></image>
<button bindtap=‘showCamera’ data-zpty=‘2’
style=“width: 14vh; height: 8vh; display:inline; padding-left: 10px;” >取景框</button>
</div>
</div>
<div class=“weui-cell”>
<button bindtap=‘cancel’>取消</button>
<button bindtap=‘submitJypz’>提交</button>
</div>
</div>
</view>
<view hidden=’{{!(showIndex == 3)}}’>
<div class=“weui-cells weui-cells_form”>
<picker mode=“date” bindchange=“hgzDatePicker”>
<div class=“weui-cell”>
<div class=“weui-cell__hd”>
<label for="" class=“weui-label”>日期</label>
</div>
<div class=“weui-cell__bd” style=“padding-left: 10px;”>
<input class=“weui-input” type=“date” value="{{hgzDate}}">
</input>
</div>
</div>
</picker>
<div class=“weui-cell”>
<div class=“weui-cell__hd”>
<label for="" class=“weui-label”>商品编码</label>
</div>
<div class=“weui-cell__bd” style=“padding-left: 10px;”>
<input class=“weui-input” bindblur=“bindGoodsCode”></input>
</div>
</div>
<div class=“weui-cell”>
<div class=“weui-cell__hd”>
<label for="" class=“weui-label”>合格证</label>
</div>
<div class=“weui-cell__bd” style=“padding-left: 10px;”>
<image wx:if="{{hgzImg}}" src=’{{hgzImg}}’ mode=“aspectFit”
style=“width: 180px; height: 90px; background-color: #eeeeee;”></image>
<button bindtap=‘showCamera’ data-zpty=‘3’
style=“width: 14vh; height: 8vh; display:inline; padding-left: 10px;” >取景框</button>
</div>
</div>
<div class=“weui-cell”>
<button bindtap=‘cancel’>取消</button>
<button bindtap=‘submitHgz’>提交</button>
</div>
</div>
</view>
</view>
// pages/pzsc/pzsc.js
import {
formatTime
} from ‘…/…/utils/util.js’
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
showIndex: 1,
pzType: 1,
hgzDate: formatTime(new Date()),
jypzDate: formatTime(new Date()),
hgzImg: null,
jypzImg: null,
goodsCode: ‘’,
cameraContext: null
},
authCamera: function(e) {
app.authScope({
scope: ‘scope.camera’,
success: (res) => {
console.log(‘res’, res)
},
fail: (res) => {
console.log(‘res’, res)
},
})
},
bindGoodsCode: function(e) {
this.setData({
goodsCode: e.detail.value
})
},
showCamera: function(e) {
let pzType = e.target.dataset.zpty
pzType = parseInt(pzType)
this.setData({
showIndex: 4,
pzType: pzType
})
},
tokePhoto: function() {
let pzType = this.data.pzType
console.log(‘pzType’, pzType)
let cameraContext = this.data.cameraContext
cameraContext.takePhoto({
success: (res) => {
let imgSrc = res.tempImagePath
console.log(‘imgSrc’, imgSrc)
if (pzType == 2) {
this.setData({
jypzImg: imgSrc
})
} else {
this.setData({
hgzImg: imgSrc
})
}
this.setData({
showIndex: pzType
})
}
})
},
cancel: function() {
this.setData({
showIndex: 1
})
},
submitJypz: function() {
this.setData({
showIndex: 1
})
},
submitHgz: function() {
this.setData({
showIndex: 1
})
let imgSrc = this.data.hgzImg
console.log(‘imgSrc’, imgSrc)
},
hgzDatePicker: function(e) {
let hgzDate = e.detail.value
this.setData({
hgzDate: hgzDate
})
},
jypzDatePicker: function(e) {
let jypzDate = e.detail.value
this.setData({
jypzDate: jypzDate
})
},
jypz: function() {
this.setData({
showIndex: 2
})
},
hgz: function() {
this.setData({
showIndex: 3
})
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function(options) {
let cameraContext = wx.createCameraContext(this)
this.setData({
cameraContext: cameraContext
})
}
})
提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。