uni-app 存在第二次打开小程序时获取 webview 对象为 null 的问题

发布于 1周前 作者 caililin 来自 Uni-App

uni-app 存在第二次打开小程序时获取 webview 对象为 null 的问题

操作步骤：

暂无

预期结果：

多次进入同样页面app不闪退，正常显示内容

实际结果：

app闪退

bug描述：

存在第二次打开小程序,获取webview对象为null的问题。

  1. 异常信息: 见图示1

  2. 定位到异常信息出错位置sdk.js, 错误调试发现webview对象为null(图示2)

  3. 在第一次进入页面时候显示Error: event hide is not supported.(图示3)

  4. 在uni代码中如果不执行一段网络请求则不会触发这个问题.

async getDeviceProperties() {  
    await apiManager.device.getDeviceProperties(this.type).then((res) => {  
    });  
}  

getDeviceProperties(loadedDeviceTypeId: number | undefined) {  
    return rcsRequest.get<RcsHttpResponse<any>>(`/api/v1/loadedDeviceTypes/${loadedDeviceTypeId}`);  
}  

get<T>(url: String, param?: Object, header?: Object, isArrayBuffer: Boolean = false, showLoading: Boolean = true, showErrorToast: Boolean = true) {  
    return _rcsRequest<T>({  
        url: url,  
        header: header,  
        method: "GET",  
        data: param,  
        isArrayBuffer: isArrayBuffer,  
        showLoading: showLoading,  
        showErrorToast: showErrorToast,  
    });  
}


Harmonyos Next教程
1 回复

针对你提到的 uni-app 中第二次打开小程序时获取 webview 对象为 null 的问题，这通常与小程序的生命周期管理和 webview 组件的使用方式有关。以下是一些可能的解决方案和代码示例，帮助你更好地管理 webview 对象。

问题分析

  1. 生命周期问题：小程序页面在后台被销毁后重新打开时，之前的 webview 实例可能已经被清理。
  2. 对象引用问题：可能在页面或组件的某个生命周期钩子中错误地引用了 webview 对象。

解决方案

方案一：确保在正确的生命周期钩子中访问 webview

在 uni-app 中，通常会在 onReady 或 onLoad 生命周期钩子中初始化 webview。但是，如果页面被重新加载，这些钩子可能会被多次调用。因此，你需要确保在访问 webview 之前，它已经被正确创建。

export default {
  data() {
    return {
      webview: null,
    };
  },
  onReady() {
    // 检查 webview 是否存在，如果不存在则创建
    if (!this.webview) {
      this.webview = this.selectComponent('#my-webview');
    }
    // 现在可以安全地使用 this.webview
  },
  methods: {
    handleWebviewEvent() {
      if (this.webview) {
        // 执行相关操作
      } else {
        console.error('Webview 对象未初始化');
      }
    },
  },
};

方案二：监听页面显示/隐藏事件

通过监听小程序的页面显示和隐藏事件，可以更好地管理 webview 的生命周期。

onShow() {
  // 页面显示时，重新获取或初始化 webview
  this.webview = this.selectComponent('#my-webview');
},
onHide() {
  // 页面隐藏时，可以执行一些清理工作（如果需要）
  // 例如：this.webview = null; // 但通常不需要手动置空，除非有内存管理需求
},

方案三：使用全局状态管理

如果 webview 需要在多个页面或组件间共享，考虑使用 Vuex 或其他全局状态管理工具来管理 webview 的状态。

// store.js (Vuex 示例)
const store = new Vuex.Store({
  state: {
    webview: null,
  },
  mutations: {
    setWebview(state, webview) {
      state.webview = webview;
    },
  },
});

// 在组件中
this.$store.commit('setWebview', this.selectComponent('#my-webview'));

总结

以上方案提供了不同的方法来处理 uni-app 中 webview 对象为 null 的问题。关键在于确保在访问 webview 之前，它已经被正确创建，并且要根据小程序的生命周期来管理 webview 的状态。希望这些代码示例能帮助你解决问题。

回到顶部