wip(app): nvue

packages/uni-app-plus/dist/uni.runtime.esm.js

@@ -17159,7 +17159,7 @@ function initDebugRefresh(isTab, path, query) {
     };
 }
 
-function createNVueWebview({ path, query, routeOptions, webviewStyle, }) {
+function createNVueWebview({ path, query, routeOptions, webviewExtras, }) {
     const curWebviewId = genWebviewId();
     const curWebviewStyle = parseWebviewStyle(path, routeOptions.meta, {
         id: curWebviewId + '',
@@ -17171,7 +17171,9 @@ function createNVueWebview({ path, query, routeOptions, webviewStyle, }) {
     curWebviewStyle.isTab = !!routeOptions.meta.isTabBar;
     return plus.webview.create('', String(curWebviewId), curWebviewStyle, extend({
         nvue: true,
-    }, webviewStyle));
+        __path__: path,
+        __query__: JSON.stringify(query),
+    }, webviewExtras));
 }
 
 let preloadWebview$1;
@@ -18011,7 +18013,7 @@ const pagesMap = new Map();
 function definePage(pagePath, asyncComponent) {
     pagesMap.set(pagePath, once(createFactory(asyncComponent)));
 }
-function createPage(__pageId, __pagePath, __pageQuery, __pageInstance, pageOptions) {
+function createVuePage(__pageId, __pagePath, __pageQuery, __pageInstance, pageOptions) {
     const pageNode = createPageNode(__pageId, pageOptions, true);
     const app = getVueApp();
     const component = pagesMap.get(__pagePath)();
@@ -18140,9 +18142,8 @@ function preloadWebview({ url, path, query, }) {
             path,
             routeOptions,
             query,
-            webviewStyle: {
+            webviewExtras: {
                 __preload__: true,
-                __query__: JSON.stringify(query),
             },
         });
     }
@@ -18199,13 +18200,10 @@ function registerPage({ url, path, query, openType, webview, eventChannel, }) {
     const pageInstance = initPageInternalInstance(openType, url, query, routeOptions.meta, eventChannel);
     initNVueEntryPage(webview);
     if (webview.nvue) {
-        // nvue 时，先启用一个占位 vm
-        const fakeNVueVm = createNVueVm(parseInt(webview.id), webview, pageInstance);
-        initPageVm(fakeNVueVm, pageInstance);
-        addCurrentPage(fakeNVueVm);
+        createNVuePage(parseInt(webview.id), webview, pageInstance);
     }
     else {
-        createPage(parseInt(webview.id), route, query, pageInstance, initPageOptions(routeOptions));
+        createVuePage(parseInt(webview.id), route, query, pageInstance, initPageOptions(routeOptions));
     }
     return webview;
 }
@@ -18245,24 +18243,9 @@ function initNVueEntryPage(webview) {
         });
     }
 }
-function createNVueVm(pageId, webview, pageInstance) {
-    return {
+function createNVuePage(pageId, webview, pageInstance) {
+    const fakeNVueVm = {
         $: {},
-        onNVuePageCreated(vm, curNVuePage) {
-            vm.$ = {}; // 补充一个 nvue 的 $ 对象，模拟 vue3 的，不然有部分地方访问了 $
-            vm.$getAppWebview = () => webview;
-            vm.getOpenerEventChannel = curNVuePage.getOpenerEventChannel;
-            // 替换真实的 nvue 的 vm
-            initPageVm(vm, pageInstance);
-            const pages = getAllPages();
-            const index = pages.findIndex((p) => p === curNVuePage);
-            if (index > -1) {
-                pages.splice(index, 1, vm);
-            }
-            if (webview.__preload__) {
-                webview.__page__ = vm;
-            }
-        },
         $getAppWebview() {
             return webview;
         },
@@ -18272,7 +18255,23 @@ function createNVueVm(pageId, webview, pageInstance) {
             }
             return pageInstance.eventChannel;
         },
+        __setup(vm, curFakeNVueVm) {
+            const pages = getAllPages();
+            const index = pages.findIndex((p) => p === curFakeNVueVm);
+            if (index > -1) {
+                vm.$getAppWebview = () => webview;
+                vm.getOpenerEventChannel = curFakeNVueVm.getOpenerEventChannel;
+                // 替换真实的 nvue 的 vm
+                initPageVm(vm, pageInstance);
+                pages.splice(index, 1, vm);
+                if (webview.__preload__) {
+                    webview.__page__ = vm;
+                }
+            }
+        },
     };
+    initPageVm(fakeNVueVm, pageInstance);
+    addCurrentPage(fakeNVueVm);
 }
 
 const $navigateTo = (args, { resolve, reject }) => {

packages/uni-app-plus/src/service/framework/page/define.ts

@@ -31,7 +31,7 @@ interface PageProps {
   __pageInstance: Page.PageInstance['$page']
 }
 
-export function createPage(
+export function createVuePage(
   __pageId: number,
   __pagePath: string,
   __pageQuery: Record<string, any>,

packages/uni-app-plus/src/service/framework/page/preLoad.ts

@@ -58,9 +58,8 @@ export function preloadWebview({
       path,
       routeOptions,
       query,
-      webviewStyle: {
+      webviewExtras: {
         __preload__: true,
-        __query__: JSON.stringify(query),
       },
     })
   }

packages/uni-app-plus/src/service/framework/page/register.ts

@@ -12,7 +12,7 @@ import { initPageInternalInstance, initPageVm } from '@dcloudio/uni-core'
 import { initEntry } from '../app/initEntry'
 import { initRouteOptions } from './routeOptions'
 import { createWebview, initWebview } from '../webview'
-import { createPage } from './define'
+import { createVuePage } from './define'
 import { getStatusbarHeight } from '../../../helpers/statusBar'
 import tabBar from '../app/tabBar'
 import { addCurrentPage, getAllPages } from './getCurrentPages'
@@ -108,16 +108,9 @@ export function registerPage({
   initNVueEntryPage(webview)
 
   if ((webview as any).nvue) {
-    // nvue 时，先启用一个占位 vm
-    const fakeNVueVm = createNVueVm(
-      parseInt(webview.id!),
-      webview,
-      pageInstance
-    )
-    initPageVm(fakeNVueVm, pageInstance)
-    addCurrentPage(fakeNVueVm)
+    createNVuePage(parseInt(webview.id!), webview, pageInstance)
   } else {
-    createPage(
+    createVuePage(
       parseInt(webview.id!),
       route,
       query,
@@ -170,28 +163,13 @@ function initNVueEntryPage(webview: PlusWebviewWebviewObject) {
   }
 }
 
-function createNVueVm(
+function createNVuePage(
   pageId: number,
   webview: PlusWebviewWebviewObject,
   pageInstance: Page.PageInstance['$page']
 ) {
-  return {
-    $: {}, // navigateBack 时，invokeHook 会调用 $
-    onNVuePageCreated(vm: ComponentPublicInstance, curNVuePage: unknown) {
-      ;(vm as any).$ = {} // 补充一个 nvue 的 $ 对象，模拟 vue3 的，不然有部分地方访问了 $
-      vm.$getAppWebview = () => webview
-      vm.getOpenerEventChannel = (curNVuePage as any).getOpenerEventChannel
-      // 替换真实的 nvue 的 vm
-      initPageVm(vm, pageInstance)
-      const pages = getAllPages()
-      const index = pages.findIndex((p) => p === curNVuePage)
-      if (index > -1) {
-        pages.splice(index, 1, vm)
-      }
-      if ((webview as PreloadWebviewObject).__preload__) {
-        ;(webview as PreloadWebviewObject).__page__ = vm
-      }
-    },
+  const fakeNVueVm = {
+    $: {},
     $getAppWebview() {
       return webview
     },
@@ -201,5 +179,21 @@ function createNVueVm(
       }
       return pageInstance.eventChannel as EventChannel
     },
+    __setup(vm: ComponentPublicInstance, curFakeNVueVm: unknown) {
+      const pages = getAllPages()
+      const index = pages.findIndex((p) => p === curFakeNVueVm)
+      if (index > -1) {
+        vm.$getAppWebview = () => webview
+        vm.getOpenerEventChannel = (curFakeNVueVm as any).getOpenerEventChannel
+        // 替换真实的 nvue 的 vm
+        initPageVm(vm, pageInstance)
+        pages.splice(index, 1, vm)
+        if ((webview as PreloadWebviewObject).__preload__) {
+          ;(webview as PreloadWebviewObject).__page__ = vm
+        }
+      }
+    },
   } as unknown as ComponentPublicInstance
+  initPageVm(fakeNVueVm, pageInstance)
+  addCurrentPage(fakeNVueVm)
 }

packages/uni-app-plus/src/service/framework/page/setup.ts

@@ -12,7 +12,7 @@ import {
   onBeforeUnmount,
   onMounted,
 } from 'vue'
-import { VuePageComponent } from './define'
+import type { VuePageComponent } from './define'
 import { addCurrentPage } from './getCurrentPages'
 
 export function setupPage(component: VuePageComponent) {

packages/uni-app-plus/src/service/framework/webview/index.ts

@@ -11,7 +11,7 @@ export interface CreateWebviewOptions {
   path: string
   query: Record<string, string>
   routeOptions: UniApp.UniRoute
-  webviewStyle?: Record<string, any>
+  webviewExtras?: Record<string, any>
 }
 
 export function createWebview(options: CreateWebviewOptions) {

packages/uni-app-plus/src/service/framework/webview/nvue.ts

@@ -9,7 +9,7 @@ export function createNVueWebview({
   path,
   query,
   routeOptions,
-  webviewStyle,
+  webviewExtras,
 }: CreateWebviewOptions) {
   const curWebviewId = genWebviewId()
   const curWebviewStyle = parseWebviewStyle(path, routeOptions.meta, {
@@ -30,8 +30,10 @@ export function createNVueWebview({
     extend(
       {
         nvue: true,
+        __path__: path,
+        __query__: JSON.stringify(query),
       },
-      webviewStyle
+      webviewExtras
     )
   )
 }

packages/uni-app-vite/src/nvue/plugins/esbuild.ts

@@ -57,8 +57,13 @@ function buildNVuePage(filename: string, options: BuildOptions) {
   return transformWithEsbuild(
     `import App from './${filename}'
 import { AppStyles } from './app.css.js'
-const app = Vue.createApp(App,{$store:getApp().$store})
+const webview = plus.webview.currentWebview()
+const __pageId = parseInt(webview.id)
+const __pagePath = webview.__path__
+let __pageQuery = {}
+try{ __pageQuery = JSON.parse(webview.__query__) }catch(e){}
 App.mpType = 'page'
+const app = Vue.createApp(App,{$store:getApp().$store,__pageId,__pagePath,__pageQuery})
 app.provide('__globalStyles', Vue.useCssStyles([...AppStyles, ...App.styles]))
 app.mount('#root')`,
     path.join(nvueOutDir(), 'main.js'),