fix(harmony-hybrid): 解决混合路由的bug：直接从Taro返回时，原生侧不能同步返回

examples/mini-program-example/config/index.js

@@ -27,7 +27,12 @@ const config = {
     }
   },
   framework: 'react',
-  compiler: 'webpack5',
+  compiler: {
+    type: 'webpack5',
+    prebundle: {
+      enable: false
+    }
+  },
   cache: {
     enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
   },

examples/mini-program-example/src/app.config.ts

@@ -148,7 +148,10 @@ export default defineAppConfig({
     'pages/api/thirdParty/index',
     'pages/api/worker/index',
     'pages/api/wxml/index',
-    'pages/performance/index/index'
+    'pages/performance/index/index',
+    'pages/harmony-hybrid/mix-router/home/index',
+    'pages/harmony-hybrid/mix-router/list/index',
+    'pages/harmony-hybrid/mix-router/detail/index'
   ],
   tabBar: {
     color: '#7A7E83',

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/detail/index.config.ts

@@ -0,0 +1,7 @@
+export default {
+  navigationBarTitleText: '混合路由：小程序首页',
+  enablePullDownRefresh: false,
+  backgroundTextStyle: 'dark',
+  onReachBottomDistance: 50,
+  pageOrientation: 'auto',
+}

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/detail/index.scss

@@ -0,0 +1,16 @@
+@import "@/styles/variables.scss";
+
+.container {
+    width: 100%;
+    height: 100%;
+    background-color: #E6FFCC;
+}
+
+.title {
+    font-size: 40px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+    text-align: center;
+    display: block;
+}

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/detail/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Button, Text } from '@tarojs/components'
+import './index.scss'
+import Taro from "@tarojs/taro";
+export default class Index extends React.Component {
+  state = {
+    // syncSingleResult: '',
+    // requestSingleResult: '',
+    // requestConcurrentResult: '',
+    // requestHignConcurrentResult: '',
+    // syncResult: '',
+    // requestByJsResult: ''
+  }
+
+  render() {
+    // const { syncSingleResult } = this.state
+    return (
+      <View className='container'>
+        <Text className='title'>
+          混合路由测试场景：小程序详情页
+        </Text>
+        <Button
+            onClick={()=>{
+              Taro.navigateBack()
+            }}>
+          小程序端：返回
+        </Button>
+      </View>
+    )
+  }
+}

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/home/index.config.ts

@@ -0,0 +1,7 @@
+export default {
+  navigationBarTitleText: '混合路由：小程序首页',
+  enablePullDownRefresh: false,
+  backgroundTextStyle: 'dark',
+  onReachBottomDistance: 50,
+  pageOrientation: 'auto',
+}

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/home/index.scss

@@ -0,0 +1,16 @@
+@import "@/styles/variables.scss";
+
+.container {
+    width: 100%;
+    height: 100%;
+    background-color: #FFCCCC;
+}
+
+.title {
+    font-size: 40px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+    text-align: center;
+    display: block;
+}

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/home/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { View, Button, Text } from '@tarojs/components'
+import './index.scss'
+import Taro from "@tarojs/taro";
+import nativeApi from "@/util/nativeApi";
+export default class Index extends React.Component {
+  state = {
+    // syncSingleResult: '',
+    // requestSingleResult: '',
+    // requestConcurrentResult: '',
+    // requestHignConcurrentResult: '',
+    // syncResult: '',
+    // requestByJsResult: ''
+  }
+
+  render() {
+    // const { syncSingleResult } = this.state
+    return (
+      <View className='container'>
+        <Text className='title'>
+          混合路由测试场景：小程序首页
+        </Text>
+        <Button
+            onClick={()=>{
+              Taro.navigateTo({
+                url: 'pages/harmony-hybrid/mix-router/list/index'
+              })
+            }}>
+          跳转：小程序列表页
+        </Button>
+        <Button
+            onClick={()=>{
+              nativeApi.navigateToNative({
+                url: 'pages/NativeList'
+              })
+            }}>
+          跳转：原生列表页
+        </Button>
+      </View>
+    )
+  }
+}

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/list/index.config.ts

@@ -0,0 +1,7 @@
+export default {
+  navigationBarTitleText: '混合路由：小程序列表页',
+  enablePullDownRefresh: false,
+  backgroundTextStyle: 'dark',
+  onReachBottomDistance: 50,
+  pageOrientation: 'auto',
+}

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/list/index.scss

@@ -0,0 +1,10 @@
+@import "@/styles/variables.scss";
+
+.title {
+    font-size: 40px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+    text-align: center;
+    display: block;
+}

examples/mini-program-example/src/pages/harmony-hybrid/mix-router/list/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { View, Button, Text } from '@tarojs/components'
+import './index.scss'
+import Taro from "@tarojs/taro";
+export default class Index extends React.Component {
+  state = {
+    // syncSingleResult: '',
+    // requestSingleResult: '',
+    // requestConcurrentResult: '',
+    // requestHignConcurrentResult: '',
+    // syncResult: '',
+    // requestByJsResult: ''
+  }
+
+  render() {
+    // const { syncSingleResult } = this.state
+    return (
+      <View className='harmony-hybrid-page'>
+        <Text className='title'>
+          混合路由测试场景：小程序列表页
+        </Text>
+        <Button
+            onClick={()=>{
+              Taro.navigateTo({
+                url: 'pages/harmony-hybrid/mix-router/detail/index'
+              })
+            }}>
+          跳转：小程序详情页
+        </Button>
+      </View>
+    )
+  }
+}

examples/mini-program-example/src/pages/index/index.tsx

@@ -49,16 +49,15 @@ export default function Index() {
       </Button>
       <Button
         onClick={()=>{
-          nativeApi.harmonyNavigateTo({
-            indexHtmlPath: '/spa/new/index.html',
-            taroPath: 'pages/performance/index/index'
+          Taro.navigateTo({
+            url: 'pages/harmony-hybrid/mix-router/home/index'
           })
         }}>
-        多实例（多SPA跳转）：性能列表页
+        多实例及混合路由测试页
       </Button>
       <Button
         onClick={()=>{
-          nativeApi.harmonyNavigateTo({
+          nativeApi.navigateToTaroHybrid({
             indexHtmlPath: '/spa/new/index.html',
             taroPath: 'pages/api/index/index'
           })

examples/mini-program-example/src/util/nativeApi.ts

@@ -1,13 +1,14 @@
 // @ts-ignore
-const decorator = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true }) || (target => target)
+const sync = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true }) || (target => target)
 
 // @proxyClassSign('')
 class NativeApi {
-  // @ts-ignore
-  @decorator
-  harmonyNavigateTo(options: any) {
-    return options
-  }
+  @sync
+  navigateToTaroHybrid(_options: any) {}
+
+
+  @sync
+  navigateToNative(_options: any){}
 }
 
 const nativeApi = new NativeApi()

packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts

@@ -621,7 +621,10 @@ export class NativeApi {
   }
 
   @(asyncAndNotRelease)
-  onNativeNavigate(_options: any): void{}
+  onNativeNavigate (_options: any): void {}
+
+  @(syncAndRelease)
+  nativeBack (): void {}
 }
 
 export interface Status {

packages/taro-platform-harmony-hybrid/src/api/apis/comments.ts

@@ -1,9 +1,3 @@
-/**
- * 关闭当前页面，返回上一页面或多级页面。
- *
- * @canUse navigateBack
- * @__object [delta]
- */
 
 /**
  * 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

packages/taro-platform-harmony-hybrid/src/api/apis/navigate/index.ts

@@ -1,5 +1,17 @@
 import Taro from '@tarojs/api'
-import { navigateTo as navigateToH5 } from '@tarojs/taro-h5'
+import { navigateBack as navigateBackH5, navigateTo as navigateToH5 } from '@tarojs/taro-h5'
+
+import native from '../NativeApi'
+
+function getFromParameter (from: string|undefined): number {
+  let number: number = -1
+  if (from) {
+    // 尝试从from参数中提取数字
+    const numberMatch = from.match(/native_(\d+)/)
+    number = numberMatch ? parseInt(numberMatch[1], 10) : 1
+  }
+  return number
+}
 
 const delay = 300
 let lastExecuteTime = 0
@@ -22,3 +34,48 @@ export function navigateTo (option: Taro.navigateTo.Option) {
   lastUrl = targetUrl
   return navigateToH5(option)
 }
+
+/**
+ * 关闭当前页面，返回上一页面或多级页面。
+ *
+ * @canUse navigateBack
+ * @__object [delta]
+ */
+export function navigateBack (options: Taro.navigateBack.Option) {
+  // 获取当前页面的实例
+  const instance = Taro.getCurrentInstance()
+  // 获取当前页面的完整URL
+  const from = instance?.router?.params?.from
+  const delta = getFromParameter(from)
+  if (delta > 0) {
+    // web回退到原生
+    native.nativeBack()
+    return new Promise(resolve => setTimeout(resolve, 200))
+      .then(() => {
+        // 先让native执行完返回动画，再执行Taro侧的返回
+        return navigateBackH5({ delta: delta })
+      })
+  }
+  return navigateBackH5(options)
+}
+
+// ----- 容器共用及混合路由 ------
+
+// 监听原生路由操作（跳转及返回），Taro侧的路由同步执行操作
+native.onNativeNavigate({
+  nativeNavigateTo: (url: string) => {
+    // 打开新的原生页面，但Web容器是共用的，新页面的加载，需要通过Taro侧来实现，不能通过webController.loadUrl()实现，会影响Taro的路由逻辑
+    navigateToH5({
+      url: url,
+      success: function () {}
+    })
+  },
+  nativeNavigateBack: (delta: number) => {
+    // 原生返回时，Taro侧也需要同步返回
+    navigateBackH5({
+      delta: delta
+    })
+  }
+})
+
+

packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts

@@ -15,7 +15,6 @@ import {
   reLaunch,
   switchTab,
 } from './index'
-import native from "./NativeApi";
 
 const requirePlugin = () => {
   return {
@@ -97,18 +96,3 @@ export {
   pxTransform,
   requirePlugin
 }
-
-// 监听原生的Navigate方法
-native.onNativeNavigate({
-  nativeNavigateTo: (url: string)=>{
-    navigateTo({
-      url: url,
-      success: function ( ) {}
-    })
-  },
-  nativeNavigateBack: (delta: number) => {
-    navigateBack({
-      delta: delta
-    })
-  }
-})