uni-app 纯nvue项目编译到鸿蒙，路由跳转提示 navigateTo:fail locked

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

uni-app 纯nvue项目编译到鸿蒙，路由跳转提示 navigateTo:fail locked

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 macOS Sequoia 15.2
HBuilderX类型 Alpha
HBuilderX版本号 4.43
手机系统 HarmonyOS NEXT
手机系统版本号 HarmonyOS NEXT Developer Beta2
手机厂商 模拟器
手机机型 默认
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

index.nvue

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{ title }}</text>  
        </view>  

        <view class="" @click="toDemo">  
            <text>to demo page</text>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello'  
        };  
    },  
    onLoad() {},  
    methods: {  
        toDemo() {  
            console.log('toDemo-click');  
            uni.navigateTo({  
                url: '/pages/demo/demo',  
                success(e) {  
                    console.log(e);  
                },  
                fail(e) {  
                    console.log(e);  
                }  
            });  
        }  
    }  
};  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

.text-area {  
    display: flex;  
    justify-content: center;  
}  

.title {  
    font-size: 36rpx;  
    color: #8f8f94;  
}  
</style>

demo.nvue

<template>  
    <view>  
        <text>demo</text>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {};  
    },  
    methods: {}  
};  
</script>  

<style></style>

操作步骤：

  • manifest.json 勾选 fast启动模式 和 纯nvue项目，编译到鸿蒙

预期结果：

  • 路由跳转正常

实际结果：

  • 路由跳转异常，提示 navigateTo:fail locked

bug描述：

HBuilderX 新建一个空白的 uni-app 项目，选vue3，编译到鸿蒙

  1. 默认设置，路由跳转正常
  2. manifest.json 勾选 fast启动模式，路由跳转正常
  3. manifest.json 勾选 fast启动模式 和 纯nvue项目，路由跳转异常 提示 navigateTo:fail locked

更多关于uni-app 纯nvue项目编译到鸿蒙，路由跳转提示 navigateTo:fail locked的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

你是用的 app-plus/nvueLaunchMode ? 鸿蒙上不支持 plus 相关的 API

更多关于uni-app 纯nvue项目编译到鸿蒙，路由跳转提示 navigateTo:fail locked的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


“nvueLaunchMode”: “”, 这个没问题 “renderer”: “native” 去掉这行可以，加上不行

在将uni-app纯nvue项目编译到鸿蒙平台时，遇到navigateTo:fail locked错误通常意味着当前页面被锁定，无法进行导航跳转。这可能是由于页面栈管理不当或系统限制导致。在鸿蒙平台上，应用的行为可能会受到更严格的系统控制，尤其是在页面跳转和生命周期管理方面。

以下是一个简单的示例，展示如何在uni-app中管理页面跳转，同时考虑可能的锁定情况。注意，由于鸿蒙平台的特殊性，这里的代码可能需要根据实际编译后的行为进行调整。

示例代码

1. 页面A（发起跳转）

// pages/pageA/pageA.vue
<template>
  <view>
    <button @click="navigateToPageB">跳转到页面B</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPageB() {
      // 检查页面是否被锁定（这里仅为示例，实际锁定状态可能需要通过其他方式获取）
      if (!this.isPageLocked()) {
        uni.navigateTo({
          url: '/pages/pageB/pageB'
        }).catch(error => {
          console.error('navigateTo failed:', error);
          // 处理跳转失败的情况，如显示提示信息
          uni.showToast({
            title: '跳转失败，页面可能被锁定',
            icon: 'none'
          });
        });
      } else {
        uni.showToast({
          title: '页面被锁定，无法进行跳转',
          icon: 'none'
        });
      }
    },
    // 模拟检查页面锁定状态的函数（实际实现需根据具体需求）
    isPageLocked() {
      // 假设有一个全局变量或状态管理来控制页面锁定
      return false; // 这里返回false表示页面未被锁定
    }
  }
}
</script>

2. 页面B（目标页面）

// pages/pageB/pageB.vue
<template>
  <view>
    <text>这是页面B</text>
  </view>
</template>

<script>
export default {
  // 页面B的相关逻辑
}
</script>

注意事项

  • 在鸿蒙平台上，可能需要更深入地了解系统对页面跳转的限制和规则。
  • isPageLocked函数仅为示例，实际项目中应根据具体需求实现页面锁定状态的检查。
  • 如果遇到navigateTo:fail locked错误，建议检查页面栈的管理，确保没有过多的页面堆积或未正确关闭页面。
  • 考虑使用uni.redirectTo或uni.reLaunch等其他跳转方式，根据实际需求选择最合适的跳转策略。

以上代码提供了一个基本的框架来处理页面跳转和可能的锁定情况，但具体实现可能需要根据鸿蒙平台的具体限制进行调整。

回到顶部