uni-app Barcode扫码首次获取相册权限选择图片后返回至扫码页面卡死

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.98

手机系统：Android

手机系统版本号：Android 14

手机厂商：华为

手机机型：iphone se

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<view class=“set_icon” :style="‘position: fixed; left: 340rpx; bottom:’ + phoneHeight + ‘rpx;’" @click=“toFlash”> <u-icon name="fingerprint" :color="fil? '#55aaff' : '#ffffff'" size="36"></u-icon> <text style="color: #FFFFFF; font-size: 24rpx;">轻触照亮</text> </view> <view class="set_test" :style="'position: fixed; left: 180rpx; bottom:' + textHeight + 'rpx;'"> <text class="test-text">扫描 </text> <text class="test-text" style="color:#1C86EE ; ">机身条形码</text>

</view> <view class="set_icon" :style="'position: fixed; left: 340rpx; bottom:' + photoHeight + 'rpx;'" [@click](/user/click)="setPhoto"> <u-icon name="photo" :color="fils? '#55aaff' : '#ffffff'" size="36"></u-icon> <text style="color: #FFFFFF; font-size: 24rpx;">相册</text> </view> </view> </view> </template> <script> import { apiScanGateway } from '@/apis/eqPorject.js'; import { apiAddProjectMember, } from '@/apis/user.js'; import topPlaceholder from '@/components/topPlaceholder.vue' export default { onHide() { }, components: { topPlaceholder }, onLoad() { console.log('onLoad') let { statusBarHeight, windowHeight } = uni.getSystemInfoSync(); this.statusBarHeight = statusBarHeight; uni.$on('event-name', (parameter) => { // 调用对应的方法 this.toStart(); console.log('子页面返回'); }) }, onShow() { console.log("omhow", this.filsShow) if (this.filsShow) { this.toStart(); this.fils = false; } }, onReady() { console.log('onReady') setTimeout(() => { this.$nextTick(() => { const query = uni.createSelectorQuery().in(this); query.select("#1").boundingClientRect(ret => { console.log("扫码组件位置信息：", ret); this.calcIconPosition(ret); }).exec(); }); },100) }, onHide() { this.$refs.barcode.cancel(); }, data() { return { filArr: [0, 10], SetSacn: true, fil: false, fils: false, phoneHeight: '', //手电筒高度 photoHeight: '', //相册高度 textHeight: "", //文字提示高度 statusBarHeight: 0, currentCateId: 6905, //默认分类 filsShow: false, } }, methods: { // 扫描成功的处理 success1(e) { console.log("success1:", e); uni.showLoading({ mask: true, title: '识别中' }) if (e.detail.code == 0) { let qrTime = Date.now() let userMessage = JSON.parse(e.detail.message); let params = { canControl:false, canDesign:false, canEdit:false }; params.userId=this.$store.state.userId; params.projectId=userMessage.projectId; params.curUserId=userMessage.curUserId; if ((qrTime - userMessage.timestamp) > 1000 * 60 * 5) { uni.$u.toast("当前二维码已过期"); this.toStart(); } else { console.log("params",params) apiAddProjectMember(params).then(res => { console.log("邀请成员", res) if (res.success) { uni.$u.toast("加入成功"); this.toStart(); } else { uni.$u.toast('加入失败:'+res.error) console.log("res",res) this.toStart(); } }) } } else { uni.navigateTo({ url: `/pages/subpages/index/manualOperationModel?id=${e.detail.message}`, success: res => { uni.hideLoading() } }); } }, calcIconPosition(ret) { switch(uni.getSystemInfoSync().platform){ case 'android': this.phoneHeight=ret.bottom- 250; this.textHeight =ret.bottom -380; this.photoHeight=ret.bottom -510; break; case 'ios': this.phoneHeight=ret.bottom- 310; this.textHeight =ret.bottom -460; this.photoHeight=ret.bottom -590; } console.log('距离底部的高度',ret,this.phoneHeight,this.textHeight,this.photoHeight) }, // 扫描失败的处理 fail1(e) { console.log("fail1:" + JSON.stringify(e)); uni.showToast({ title: '扫描失败请重新扫描', success: res => { uni.navigateBack({ delta: 1 }) } }) }, // 打开页面即开启扫码 toStart() { this.$refs.barcode.start({ conserve: true, filename: '_doc/barcode/' }); }, // 返回上一个页面 returnPrePage() { console.log('返回'); uni.navigateBack({ delta: 1 }); }, // 扫码添加 sacnAdd() { this.SetSacn = true; }, // 手动添加 manualAdd() { // this.SetSacn = false; // if (this.$refs.barcode) { // this.$refs.barcode.cancel(); // 停止扫描 // } uni.navigateTo({ url: '/pages/subpages/index/manualOperationModel' }) }, // 打开手电筒 toFlash: function() { if (!this.fil) { this.fil = true this.$refs.barcode.setFlash(true); } else { this.fil = false this.$refs.barcode.setFlash(false); } }, // 打开相册 setPhoto() { let _this = this; if (!_this.fils) { _this.fils = true; _this.filsShow = true; } else { _this.fils = false } uni.chooseImage({ count: 1, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'], //从相册选择 success: function(res) { console.log(JSON.stringify(res.tempFilePaths)); }, complete: function(res) { _this.fils = false; _this.filsShow = true; console.log("调用结束", _this.fils, _this.filsShow); } }); }, handleMenuTap(id) { console.log('id', id); _this.currentCateId = id; console.log(_this.currentCateId); } } } </script>

h691938207 1楼•4 天前

在uni-app中使用Barcode扫码功能时，如果首次获取相册权限并选择图片后返回至扫码页面时出现卡死的情况，可能是由于以下原因导致的：

1. 权限问题

首次获取相册权限时，系统可能会弹出权限请求对话框，这可能会导致页面卡住。
解决方法：确保在获取权限之前已经处理了权限请求的回调逻辑。

2. 页面生命周期问题

在返回扫码页面时，页面生命周期可能没有正确处理，导致页面卡死。
解决方法：检查 onShow 和 onHide 等生命周期函数，确保在返回页面时正确初始化或恢复状态。

3. Barcode插件问题

Barcode插件本身可能存在一些兼容性或性能问题，导致在返回页面时卡死。
解决方法：尝试更新Barcode插件到最新版本，或者使用其他扫码插件。

4. 内存泄漏

在选择图片并返回页面时，可能因为内存泄漏导致页面卡死。
解决方法：检查代码，确保没有未释放的资源或内存泄漏。

5. 异步操作未完成

在选择图片并返回页面时，可能有一些异步操作未完成，导致页面卡住。
解决方法：确保所有异步操作在返回页面之前已经完成。

6. 页面栈问题

返回页面时，页面栈可能没有正确恢复，导致页面卡死。
解决方法：检查页面栈的操作，确保返回页面时页面栈状态正常。

代码示例

以下是一个简单的示例，展示了如何在返回页面时正确处理生命周期和权限请求：

onShow() {
  // 页面显示时初始化扫码功能
  this.initBarcodeScanner();
},
onHide() {
  // 页面隐藏时释放资源
  this.releaseBarcodeScanner();
},
methods: {
  initBarcodeScanner() {
    // 初始化扫码功能
    uni.authorize({
      scope: 'scope.writePhotosAlbum',
      success: () => {
        // 权限获取成功，初始化扫码
        plus.barcode.scan({
          success: (res) => {
            console.log('扫码结果:', res);
          },
          fail: (err) => {
            console.error('扫码失败:', err);
          }
        });
      },
      fail: (err) => {
        console.error('权限获取失败:', err);
      }
    });
  },
  releaseBarcodeScanner() {
    // 释放扫码资源
    plus.barcode.close();
  }
}