uni-app项目升级到最新vue3后无法运行quickapp-webview-huawei

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

uni-app项目升级到最新vue3后无法运行quickapp-webview-huawei

操作步骤：

  1. Gitee下载uniapp vue3最新demo项目；
  2. yarn install完成之后 yarn dev:quickapp-webview-huawei
  3. 使用华为快应用IDE打开 dist/dev/quickapp-webview-huawei目录
  4. 连接手机Mate60 （鸿蒙4.2版本，非HarmonyOS Next）
  5. 运行项目就出现以下错误信息
    • 缺少必要的配置文件，把vue2项目生成的 quickapp.config.json 复制进来后临时解决；
    • 手机端快应用提示有错误，IDE控制台输出错误：
      10-10 10:22:58.122 E/jsLog   ( 9046): Runtime Error, Page : pages/index/index  
10-10 10:22:58.122 E/jsLog   ( 9046): Runtime Error, ErrorCode :   
10-10 10:22:58.122 E/jsLog   ( 9046): TypeError: Cannot read properties of undefined (reading 'onLoad')  
10-10 10:22:58.122 E/jsLog   ( 9046):     at isPage (hbs:7009:31)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Component.attached (hbs:6930:20)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at hbs-frk:1:224224  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Array.forEach (<anonymous>)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at t (hbs-frk:1:224197)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Component.disposeLifetime (hbs-frk:1:224378)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at hbs-frk:1:225525  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Array.forEach (<anonymous>)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Component._triggerLifetime (hbs-frk:1:225489)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at triggerLifetime (hbs-frk:1:238972)  
10-10 10:22:58.147 W/jsLog   ( 9046): pages/index/index is not ready

预期结果：

正常运行

实际结果：

10-10 10:22:58.122 E/jsLog   ( 9046): Runtime Error, Page : pages/index/index  
10-10 10:22:58.122 E/jsLog   ( 9046): Runtime Error, ErrorCode :   
10-10 10:22:58.122 E/jsLog   ( 9046): TypeError: Cannot read properties of undefined (reading 'onLoad')  
10-10 10:22:58.122 E/jsLog   ( 9046):     at isPage (hbs:7009:31)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Component.attached (hbs:6930:20)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at hbs-frk:1:224224  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Array.forEach (<anonymous>)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at t (hbs-frk:1:224197)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Component.disposeLifetime (hbs-frk:1:224378)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at hbs-frk:1:225525  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Array.forEach (<anonymous>)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at Component._triggerLifetime (hbs-frk:1:225489)  
10-10 10:22:58.122 E/jsLog   ( 9046):     at triggerLifetime (hbs-frk:1:238972)  
10-10 10:22:58.147 W/jsLog   ( 9046): pages/index/index is not ready

bug描述：

将uniapp的vue2项目升级到vue3之后，再运行quickapp-webview-huawei之后 提示缺少必要的配置文件， 添加quickapp.config.json后再次运行，会提示 TypeError: Cannot read properties of undefined (reading ‘onLoad’)。 通过Gitee下载最新的 uniapp vue3版本demo项目运行之后也是出现一样的问题。

现在华为快应用渠道已无法继续发版，还请官方帮解决一下，感谢~

版本信息 值
uni-app cli模式安装版本 3.0.0-4020920240930001
node版本 v18.20.4
yarn版本 1.22.22
华为快应用IDE版本 14.1.1

Harmonyos Next教程
2 回复

求关注啊. 版本都不能发补了, 真的太坑.


在将uni-app项目升级到Vue 3后，如果无法运行在quickapp-webview-huawei平台上，这通常是由于一些兼容性问题或者配置不正确导致的。以下是一个基本的排查和修复步骤的示例代码，帮助你在uni-app项目中解决Vue 3与quickapp-webview-huawei的兼容问题。

1. 检查uni-app和quickapp-webview-huawei的依赖版本

确保你的package.json文件中依赖的版本是最新的，特别是@dcloudio/uni-app和quickapp-webview-huawei（如果这是一个独立插件的话）。

{
  "dependencies": {
    "@dcloudio/uni-app": "^3.x.x",
    "quickapp-webview-huawei": "^latest-version"
    // 其他依赖
  }
}

2. 配置manifest.json

确保manifest.json文件中配置了quickapp的相关设置。

{
  "mp-quickapp": {
    "appid": "your-quickapp-id",
    "setting": {
      "escMenu": false,
      "menu": false,
      "titleNView": false,
      "autoBackButton": false,
      "safeArea": true,
      "transparentTitle": "auto"
    },
    "distribute": {
      "platforms": [
        "huawei"
      ]
    }
  }
}

3. 修改Vue 3的兼容代码

Vue 3引入了一些与Vue 2不兼容的API更改，特别是在全局API和组件生命周期方面。如果你的项目中有使用到这些API，需要相应地修改。

// Vue 2中的全局API
// Vue.config.productionTip = false;

// Vue 3中的全局API
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// 组件生命周期钩子
// Vue 2
// beforeCreate, created, beforeMount, mounted, ...

// Vue 3
// setup() 函数替代了 beforeCreate 和 created 生命周期
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });
  }
};

4. 调试和测试

使用quickapp的开发工具或者直接在华为开发者平台上运行你的应用，查看是否有错误日志输出。根据错误日志调整代码。

5. 联系支持

如果上述步骤无法解决问题，可能需要联系uni-app或quickapp-webview-huawei的官方支持团队获取帮助。

以上步骤和代码示例应该能帮助你解决uni-app项目升级到Vue 3后在quickapp-webview-huawei平台上无法运行的问题。如果问题依然存在，请提供更详细的错误日志以便进一步分析。

回到顶部