uni-app showToast在main.js不显示

uni-app showToast在main.js不显示

示例代码:

import App from './App'  

// #ifndef VUE3  
import Vue from 'vue'  
import './uni.promisify.adaptor'  
Vue.config.productionTip = false  
App.mpType = 'app'  

uni.showLoading({  
    title:'加载中'  
})  

// uni.showToast({  
//  title:'123',  
//  icon:'none'  
// })  
const app = new Vue({  
  ...App  
})  
app.$mount()  
// #endif  

// #ifdef VUE3  
import { createSSRApp } from 'vue'  
export function createApp() {  
  const app = createSSRApp(App)  
  return {  
    app  
  }  
}  
// #endif  

操作步骤:

在main.js直接调用showToast或showLoading不显示,通过setTimeout(() => {},0)调用可以显示。

预期结果:

希望可以直接调用showToast或showLoading,能正常显示。

实际结果:

main.js直接调用showToast或showLoading不显示。

bug描述:

showToast和showLoading在main.js直接调用不显示,通过setTimeout(() => {},0)调用没问题。希望在main.js可以直接调用。

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 Windows 10 专业版
HBuilderX类型 正式
HBuilderX版本 3.99
浏览器平台 Chrome
浏览器版本 123.0.6312.58
项目创建方式 HBuilderX
App下载地址或H5网址 https://87x434258u.goho.co/

更多关于uni-app showToast在main.js不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

不生效的根本原因就是调用uni.showToast()这个方法时,vue实例并没有挂载到页面上,因此此时dom中没有<uni-app></uni-app>这个节点,而该方法又依赖于这个节点去挂载弹窗元素,所以showToast()没有按照预期显示内容。另外uni这个对象中有很多的方法会涉及到dom操作,基本上都需要在挂载dom成功以后才能生效。

更多关于uni-app showToast在main.js不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不能在main.js调用

没有这样的使用方法

uni-app 中,showToast 是一个用于显示消息提示的 API。如果你在 main.js 中调用 uni.showToast 但没有看到提示,可能有以下几种原因:

1. 调用时机问题

main.js 是应用的入口文件,通常在这里进行一些全局配置和初始化操作。如果在 main.js 中过早地调用 uni.showToast,可能会导致提示无法显示,因为页面尚未完全加载。

解决方法: 确保在页面加载完成后再调用 uni.showToast。例如,可以在 onLaunchonShow 生命周期钩子中调用。

// main.js
App({
  onLaunch() {
    uni.showToast({
      title: '应用已启动',
      icon: 'none'
    });
  }
});

2. 页面未加载完成

如果 uni.showToast 在页面加载之前调用,可能会导致提示无法显示。

解决方法:uni.showToast 放在页面的 onLoadonShow 生命周期钩子中。

// pages/index/index.vue
export default {
  onLoad() {
    uni.showToast({
      title: '页面加载完成',
      icon: 'none'
    });
  }
};

3. 参数错误

uni.showToast 需要传入正确的参数,否则可能无法正常显示。

解决方法: 确保传入的参数正确,特别是 titleicon 参数。

uni.showToast({
  title: '这是一个提示',
  icon: 'none' // 或者 'success', 'loading', 'none'
});

4. 异步问题

如果 uni.showToast 是在异步操作中调用,可能会有延迟或未触发的风险。

解决方法: 确保在异步操作完成后再调用 uni.showToast

setTimeout(() => {
  uni.showToast({
    title: '延迟提示',
    icon: 'none'
  });
}, 1000);
回到顶部