uniapp选择图片会关闭页面怎么办-猿码集

uniapp选择图片会关闭页面怎么办

当我们在使用uniapp开发项目的过程中，经常会遇到用户需要上传图片或选择图片的需求。但是有时候在选择图片的时候却会遇到一个特别恼人的问题，就是选择图片的时候会关闭自己的页面。这样的话会给用户的使用带来不便，那么在这篇文章中，我们就来一起详细的探讨一下，uniapp选择图片会关闭页面怎么办。

1.选择图片会关闭页面的原因

在使用uniapp开发项目的时候，经常会使用到uniapp中自带的组件uni.chooseImage()来实现选择图片的功能。在这里，我们通过调用uni.chooseImage()来选择图片，但是有的时候，当我们调用uni.chooseImage()之后，页面就会自动关闭，这个问题究竟是怎么造成的呢？

其实，这个问题的产生是因为uniapp中的一些安全机制，比如：在调用uni.chooseImage()方法时，uniapp会将当前页面的生命周期包裹在一个新的进程中运行，因此有时候可能会造成页面“隐形盗图”的问题，而我们也就无法看到选择图片的结果。

2.解决方法

那么既然我们已经知道了选择图片会关闭页面的原因，那我们接下来就需要想一些解决的方法了。

2.1 在App.vue中加入onShow生命周期

在App.vue中，我们可以通过添加onShow生命周期来解决选择图片会关闭页面的问题，具体代码如下：


export default {
  onShow() {
    uni.onMemoryWarning(function() {})
  }
}

在这里，通过调用uni.onMemoryWarning()方法来申请内存，避免因为其他原因导致内存不足而出现页面关闭的情况。

2.2 在onLoad生命周期中重启页面

在页面的onLoad生命周期中，我们可以设置一个重启页面的方法，来避免因选择图片而导致页面关闭的问题。具体代码如下：


export default {
  onLoad() {
    let that = this
    uni.chooseImage({
      success(res) {
        that.setData({
          imgSrc: res.tempFilePaths[0]
        })
      },
      fail(err) {
        that.reLaunch()
      }
    })
  },
  reLaunch() {
    uni.reLaunch({
      url: '/pages/home/home'
    })
  }
}

在这里，我们通过在onLoad生命周期中设置重启页面的方法，来避免因选择图片而导致页面关闭的问题。

2.3 使用封装好的方法调用

在使用uniapp开发项目的时候，我们可以封装一些常用的方法，来减少代码量，并且方便我们的调用。在选择图片的时候，我们也可以封装一个选择图片的方法，来避免因选择图片而导致页面关闭的问题。具体代码如下：


import { chooseImage } from '../../utils/img'
export default {
  onLoad() {
    let that = this
    chooseImage({
      success(res) {
        that.setData({
          imgSrc: res.tempFilePaths[0]
        })
      },
      fail(err) {
        that.reLaunch()
      }
    })
  },
  reLaunch() {
    uni.reLaunch({
      url: '/pages/home/home'
    })
  }
}

在这里，通过调用封装好的chooseImage()方法，来避免因选择图片而导致页面关闭的问题。

3.总结

通过本文的介绍，我们了解到了uniapp选择图片会关闭页面的原因，并且针对这个问题，我们提供了三种不同的解决方法。在开发中，我们可以根据自己的需求来选择不同的解决方法，使得我们的开发更加的妥帖和方便。

uniapp选择图片会关闭页面怎么办