鸿蒙原生集成小程序sdk后通过uni-app小程序页面打开鸿蒙原生页面时原生页面被小程序页面遮挡无法看到

鸿蒙原生集成小程序sdk后通过uni-app小程序页面打开鸿蒙原生页面时原生页面被小程序页面遮挡无法看到

测试过的手机:

鸿蒙Mate60系统5.1.0.150

示例代码:

ZRouter.getInstance().setParam(param).navigation(RouterConst.SZWEBVIEWQUICK)
```

通过这种方式跳转打开的原生页面会在小程序页面的底部,只有关闭小程序才能看到被打开的页面

## 操作步骤:
点击小程序的通知列表,打开鸿蒙原生页面

## 预期结果:

ZRouter.getInstance().setParam(param).navigation(RouterConst.SZWEBVIEWQUICK)


通过小程序打开鸿蒙原生页面在最上层,覆盖在小程序上面

## 实际结果:

ZRouter.getInstance().setParam(param).navigation(RouterConst.SZWEBVIEWQUICK)


通过小程序打开鸿蒙原生页面时,原生页面在小程序页面下面,被覆盖

## bug描述:
```javascript
/**   ----------------------------------------------- 扩展原生能力 注册UniApp  -----------------------------------------------*/  

export function registerUniAppModule(uniApp: UniMP) {  
  const model = new AppInfoModel()  
  model.apiHost = baseOAHost  
  model.app_id = bundleName  
  model.env = env  
  model.user_source = user_source  

  // 此方法主要是提供 当前环境的域名  
  registerModule("appInfoApi", {  
    getAppInfo: (): AppInfoModel => {  
      return model;  
    }  
  } as ESObject)  

  /**   -----------------------------------------------    UniApp控制页面跳转   -----------------------------------------------*/  
  registerModule("pageApi", {  

    /**   --------------    当前UniApp跳转到其他的UniApp  --------------*/  
    openUniAppPage: (model: PageApiModel): void => {  

      let modelPathDecodedURL = decodeURIComponent(model.path);  
      if (modelPathDecodedURL.includes('sz://open/miniapp')) {  
        let appId = modelPathDecodedURL.split('=').pop()?.toString() || ''  
        let redirect = modelPathDecodedURL.split('path=sz://').pop()?.toString() || ''  
        if (appId != '' && redirect != '') {  
          try {  
            let uniAppVersion = getUniAppVersion(appId + '=' + redirect);  
            //  检查并且打开线上的UniApp  
            ClickUtil.throttle(() => {  
              // uniApp.close()  
              checkUniAppVersion(appId, redirect, uniAppVersion)  
            }, 1000)  

          } catch (e) {  
            ToastUtil.showToast("新功能打开失败:" + e)  
            console.debug('----------', e)  
          }  
        } else {  
          ToastUtil.showToast("无效路径")  
        }  
      }  

    },  
    openPage: (model: PageApiModel): void => {  
      //    sz://open/h5?path=xxx&inner=true  
      //    sz://open/miniapp?path=xxx&inner=true  
      //    sz://open/uniapp?path=xxx&appid=xxx&inner=true  
      let modelPathDecodedURL = decodeURIComponent(model.path);  
      // 打开UniApp  
      if (modelPathDecodedURL.includes('sz://open/miniapp')) {  

        let appId = modelPathDecodedURL.split('=').pop()?.toString() || ''  
        let redirect = modelPathDecodedURL.split('path=sz://').pop()?.toString() || ''  
        if (appId != '' && redirect != '') {  
          try {  
            let uniAppVersion = getUniAppVersion(appId + '=' + redirect);  
            checkUniAppVersion(appId, redirect, uniAppVersion)  
          } catch (e) {  
            console.debug('----------', e)  
          }  
        } else {  
          ToastUtil.showToast("无效路径")  
        }  
        // 打开原生App  
      } else if (modelPathDecodedURL.includes('sz://open/app')) {  
        ToastUtil.showToast("暂不支持打开App页面")  
        // 打开WebView  
      } else if (modelPathDecodedURL.includes('sz://open/h5')) {  
        let urlPath = modelPathDecodedURL.split('open/h5?path=').pop()?.toString() || ''  
        let pageModel = new PageModel()  
        pageModel.title = ""  
        pageModel.url = urlPath  
        ClickUtil.throttle(() => {  
          if (RouterJumpManager.getInstance().isUserNewWebView(urlPath)) {  
            let realPath = new uri.URI(urlPath)  
            if (!IGSProtocol.isHttpScheme(realPath.scheme)) {  
              urlPath = `${baseOAHost}${urlPath}`  
            }  
            let param = new HashMap<string, string>()  
            param.set('url', urlPath)  
            param.set('title', '')  
            ZRouter.getInstance().setParam(param).navigation(RouterConst.SZWEBVIEWQUICK)  

          }else{  
            ZRouter.getInstance().setParam(pageModel).navigation(RouterConst.SZWEBVIEWQUICK)  

          }  
        }, 1000)  

      } else {  
        ToastUtil.showToast("无效事件")  
      }  
    },  
    // 打开 名片的原始页面  
    HMShowUserInfo: (model: PageApiModel): void => {  
      console.debug('-----------打开通讯录详情页面')  
      let pageModel = new PageModel()  
      pageModel.id = model.id  
      router.RouterMode  
      router.pushUrl({ url: 'pages/addressBook/AddressBookPageUserDetailHarRouter', params: pageModel })  
        .catch((err: Error) => {  
          console.error(JSON.stringify(err));  
        })  
    }  

  } as ESObject)  

  /**  
   *  选择文件  
   *  新建公文拟制,草稿支持 word  
   *  附件,支持pdf png word  
   * */  

  registerModule("systemApi", {  

    chooseImage: (): void => {  
      console.debug('-----------------------------选择图片');  
      // return fileModel;  
    },  
    chooseFile: (): void => {  
      ZRouter.getInstance().navigation(RouterConst.SELECT_FILTER_MIDDLE_PAGE)  
      getContext().eventHub.on('launchFileBroadcast', (fileModelAry: Array<ChooseFileModel>) => {  
        uniApp.sendUniMPEvent("handlerHMChooseApi", fileModelAry);  
      })  
    },  
    onlyChooseImage: (): void => {  
      console.debug('-----------------------------只选择图片');  
      // return fileModel;  
    }  
  } as ESObject)  
}

更多关于鸿蒙原生集成小程序sdk后通过uni-app小程序页面打开鸿蒙原生页面时原生页面被小程序页面遮挡无法看到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于鸿蒙原生集成小程序sdk后通过uni-app小程序页面打开鸿蒙原生页面时原生页面被小程序页面遮挡无法看到的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的鸿蒙原生页面与uni-app小程序页面层级管理问题。问题核心在于鸿蒙原生页面启动时被置于小程序容器之下。

解决方案:

  1. 关闭小程序页面后再打开原生页面 在调用ZRouter.getInstance().setParam(param).navigation(RouterConst.SZWEBVIEWQUICK)之前,先关闭当前小程序页面:

    // 在openPage方法中修改
    ClickUtil.throttle(() => {
      // 先关闭小程序页面
      uniApp.close()
      
      // 延迟执行原生页面跳转,确保小程序完全关闭
      setTimeout(() => {
        if (RouterJumpManager.getInstance().isUserNewWebView(urlPath)) {
          let realPath = new uri.URI(urlPath)
          if (!IGSProtocol.isHttpScheme(realPath.scheme)) {
            urlPath = `${baseOAHost}${urlPath}`
          }
          let param = new HashMap<string, string>()
          param.set('url', urlPath)
          param.set('title', '')
          ZRouter.getInstance().setParam(param).navigation(RouterConst.SZWEBVIEWQUICK)
        } else {
          ZRouter.getInstance().setParam(pageModel).navigation(RouterConst.SZWEBVIEWQUICK)
        }
      }, 300) // 适当延迟确保页面切换完成
    }, 1000)
    
  2. 使用鸿蒙的页面管理API调整层级 如果需要在保留小程序页面的同时显示原生页面,可以尝试在原生页面启动时调整窗口层级:

    // 在原生页面的onStart或onForeground生命周期中
    onStart() {
      // 尝试将页面提到最前
      this.windowStage?.getMainWindow()?.moveToFront()
    }
    
  3. 检查鸿蒙路由配置 确保RouterConst.SZWEBVIEWQUICK对应的页面配置了正确的启动模式,可能需要设置为单例模式:

    // 在路由配置中
    {
      name: RouterConst.SZWEBVIEWQUICK,
      pageSourceFile: 'pages/WebViewQuickPage',
      launchMode: LaunchMode.STANDARD // 或尝试SINGLETON
    }
回到顶部