uni-app 【报Bug】vue3 onLoad is not a function

uni-app 【报Bug】vue3 onLoad is not a function

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

操作步骤：

  1. 页面跳转
    uni.navigateTo({  
 url: '/pages/test/test?id=1'  
})
  2. text.vue 页面 onLoad 获取参数，提示：TypeError: (0 , _uniApp.onLoad) is not a function
    import {  
    onLoad,  
} from '@dcloudio/uni-app'  
import {  
    defineComponent,  
    ref  
} from 'vue';  
let params;  
import Avatar from '@/components/avatar';  
export default defineComponent({  
    components: {},  
    setup(props) {  

        let id = ref('');  

        onLoad((params) => {  
            id.value = params.id;  
        })  

        return {  
            id  
        }  
    }  
})

预期结果：

正常运行 onLoad

实际结果：

onLoad is not a function

bug1 bug2 bug3


更多关于uni-app 【报Bug】vue3 onLoad is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

CLI 创建的项目将 uni 相关依赖更新到最新版即可，HBuilderX 后续发布的版本也会支持

更多关于uni-app 【报Bug】vue3 onLoad is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html


看来还是继续用vue2比较省事

这个问题的原因是 onLoad 的导入方式不正确。在 Vue 3 的 Composition API 中，onLoad 应该从 @dcloudio/uni-app 的 Vue 组合式 API 中导入，而不是直接从 @dcloudio/uni-app 导入。

正确的导入方式应该是：

import { onLoad } from '@dcloudio/uni-app'

但根据你的代码结构，你可能需要检查以下几点：

  1. 确保使用正确的导入路径：在 Vue 3 项目中，@dcloudio/uni-app 应该正确导出组合式 API。

  2. 检查 uni-app 版本：确保你使用的 uni-app 版本支持 Vue 3 的组合式 API。建议升级到最新版本。

  3. 修改导入方式：尝试以下两种方式之一：

方式一：使用正确的导入

import { onLoad } from '@dcloudio/uni-app'

方式二：使用 uni-app 的全局 API（备选方案）

// 在 setup 中使用 uni 全局对象
import { getCurrentInstance } from 'vue'

export default defineComponent({
  setup(props) {
    const instance = getCurrentInstance()
    const id = ref('')
    
    // 通过 uni 对象访问
    uni.onLoad = (params) => {
      id.value = params.id
    }
    
    return { id }
  }
})

  1. 检查项目配置：确保 vueVersion 在 manifest.json 中正确设置为 "3"。

  2. 清理并重新安装依赖：

# 删除 node_modules 和 package-lock.json
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install
回到顶部