From 77951dd9d65a8831993ea172f6f4d016caef8610 Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Tue, 15 Feb 2022 14:56:35 +0800 Subject: [PATCH] wip(app): nvue --- packages/uni-app-plus/dist/uni.runtime.esm.js | 44 +++++++++++------ .../src/service/framework/app/index.ts | 11 +++++ .../src/service/framework/page/register.ts | 47 ++++++++++--------- .../uni-app-vite/src/nvue/plugins/esbuild.ts | 6 +-- .../uni-app-vite/src/nvue/plugins/mainJs.ts | 2 +- 5 files changed, 69 insertions(+), 41 deletions(-) diff --git a/packages/uni-app-plus/dist/uni.runtime.esm.js b/packages/uni-app-plus/dist/uni.runtime.esm.js index 233e8e40a..ece5188b1 100644 --- a/packages/uni-app-plus/dist/uni.runtime.esm.js +++ b/packages/uni-app-plus/dist/uni.runtime.esm.js @@ -18148,7 +18148,7 @@ function preloadWebview({ url, path, query, }) { return preloadWebviews[url]; } -function registerPage({ url, path, query, openType, webview, eventChannel, }) { +function registerPage({ url, path, query, openType, webview, nvuePageVm, eventChannel, }) { // fast 模式，nvue 首页时，会在nvue中主动调用registerPage并传入首页webview，此时初始化一下首页（因为此时可能还未调用registerApp） if (webview) { initEntry(); @@ -18196,12 +18196,17 @@ function registerPage({ url, path, query, openType, webview, eventChannel, }) { const route = path.substr(1); webview.__uniapp_route = route; const pageInstance = initPageInternalInstance(openType, url, query, routeOptions.meta, eventChannel); - initNVueEntryPage(webview); + const id = parseInt(webview.id); if (webview.nvue) { - createNVuePage(parseInt(webview.id), webview, pageInstance); + if (id === 1 && nvuePageVm) { + initNVueEntryPage(webview, nvuePageVm, pageInstance); + } + else { + createNVuePage(id, webview, pageInstance); + } } else { - createVuePage(parseInt(webview.id), route, query, pageInstance, initPageOptions(routeOptions)); + createVuePage(id, route, query, pageInstance, initPageOptions(routeOptions)); } return webview; } @@ -18227,19 +18232,18 @@ function initPageOptions({ meta }) { windowBottom: tabBarInstance.indexOf(meta.route) >= 0 && tabBarInstance.cover ? tabBarInstance.height : 0, }; } -function initNVueEntryPage(webview) { - const isLaunchNVuePage = webview.id === '1' && webview.nvue; +function initNVueEntryPage(webview, nvuePageVm, pageInstance) { + initPageVm(nvuePageVm, pageInstance); + addCurrentPage(nvuePageVm); // 首页是 nvue 时，在 registerPage 时，执行路由堆栈 - if (isLaunchNVuePage) { - if (__uniConfig.splashscreen && - __uniConfig.splashscreen.autoclose && - !__uniConfig.splashscreen.alwaysShowBeforeRender) { - plus.navigator.closeSplashscreen(); - } - __uniConfig.onReady(function () { - navigateFinish(); - }); + if (__uniConfig.splashscreen && + __uniConfig.splashscreen.autoclose && + !__uniConfig.splashscreen.alwaysShowBeforeRender) { + plus.navigator.closeSplashscreen(); } + __uniConfig.onReady(function () { + navigateFinish(); + }); } function createNVuePage(pageId, webview, pageInstance) { const fakeNVueVm = { @@ -19140,6 +19144,16 @@ function registerApp(appVm) { if ((process.env.NODE_ENV !== 'production')) { console.log(formatLog('registerApp')); } + // 定制 useStore （主要是为了 nvue 共享） + if (uni.Vuex && appVm.$store) { + const { useStore } = uni.Vuex; + uni.Vuex.useStore = (key) => { + if (!key) { + return appVm.$store; + } + return useStore(key); + }; + } initVueApp(appVm); appCtx = appVm; initAppVm(appCtx); diff --git a/packages/uni-app-plus/src/service/framework/app/index.ts b/packages/uni-app-plus/src/service/framework/app/index.ts index d5ac86cc9..82083bee1 100644 --- a/packages/uni-app-plus/src/service/framework/app/index.ts +++ b/packages/uni-app-plus/src/service/framework/app/index.ts @@ -35,6 +35,17 @@ export function registerApp(appVm: ComponentPublicInstance) { console.log(formatLog('registerApp')) } + // 定制 useStore （主要是为了 nvue 共享） + if ((uni as any).Vuex && (appVm as any).$store) { + const { useStore } = (uni as any).Vuex + ;(uni as any).Vuex.useStore = (key: string) => { + if (!key) { + return (appVm as any).$store + } + return useStore(key) + } + } + initVueApp(appVm) appCtx = appVm diff --git a/packages/uni-app-plus/src/service/framework/page/register.ts b/packages/uni-app-plus/src/service/framework/page/register.ts index 3a039dd17..a5bed80fa 100644 --- a/packages/uni-app-plus/src/service/framework/page/register.ts +++ b/packages/uni-app-plus/src/service/framework/page/register.ts @@ -26,6 +26,7 @@ interface RegisterPageOptions { query: Record openType: UniApp.OpenType webview?: PlusWebviewWebviewObject + nvuePageVm?: ComponentPublicInstance eventChannel?: EventChannel } @@ -35,6 +36,7 @@ export function registerPage({ query, openType, webview, + nvuePageVm, eventChannel, }: RegisterPageOptions) { // fast 模式，nvue 首页时，会在nvue中主动调用registerPage并传入首页webview，此时初始化一下首页（因为此时可能还未调用registerApp） @@ -105,18 +107,16 @@ export function registerPage({ eventChannel ) - initNVueEntryPage(webview) + const id = parseInt(webview.id!) if ((webview as any).nvue) { - createNVuePage(parseInt(webview.id!), webview, pageInstance) + if (id === 1 && nvuePageVm) { + initNVueEntryPage(webview, nvuePageVm, pageInstance) + } else { + createNVuePage(id, webview, pageInstance) + } } else { - createVuePage( - parseInt(webview.id!), - route, - query, - pageInstance, - initPageOptions(routeOptions) - ) + createVuePage(id, route, query, pageInstance, initPageOptions(routeOptions)) } return webview } @@ -146,21 +146,24 @@ function initPageOptions({ meta }: UniApp.UniRoute): PageNodeOptions { } } -function initNVueEntryPage(webview: PlusWebviewWebviewObject) { - const isLaunchNVuePage = webview.id === '1' && (webview as any).nvue +function initNVueEntryPage( + webview: PlusWebviewWebviewObject, + nvuePageVm: ComponentPublicInstance, + pageInstance: Page.PageInstance['$page'] +) { + initPageVm(nvuePageVm, pageInstance) + addCurrentPage(nvuePageVm) // 首页是 nvue 时，在 registerPage 时，执行路由堆栈 - if (isLaunchNVuePage) { - if ( - __uniConfig.splashscreen && - __uniConfig.splashscreen.autoclose && - !__uniConfig.splashscreen.alwaysShowBeforeRender - ) { - plus.navigator.closeSplashscreen() - } - __uniConfig.onReady(function () { - navigateFinish() - }) + if ( + __uniConfig.splashscreen && + __uniConfig.splashscreen.autoclose && + !__uniConfig.splashscreen.alwaysShowBeforeRender + ) { + plus.navigator.closeSplashscreen() } + __uniConfig.onReady(function () { + navigateFinish() + }) } function createNVuePage( diff --git a/packages/uni-app-vite/src/nvue/plugins/esbuild.ts b/packages/uni-app-vite/src/nvue/plugins/esbuild.ts index 743f5d935..62bec5e32 100644 --- a/packages/uni-app-vite/src/nvue/plugins/esbuild.ts +++ b/packages/uni-app-vite/src/nvue/plugins/esbuild.ts @@ -5,7 +5,7 @@ import path from 'path' import fs from 'fs-extra' import debug from 'debug' -import { transformWithEsbuild } from '@dcloudio/uni-cli-shared' +import { removeExt, transformWithEsbuild } from '@dcloudio/uni-cli-shared' import { nvueOutDir } from '../../utils' import { esbuildGlobals } from '../utils' @@ -74,11 +74,11 @@ ${ } const webview = plus.webview.currentWebview() const __pageId = parseInt(webview.id) -const __pagePath = webview.__path__ +const __pagePath = '${removeExt(filename)}' let __pageQuery = {} try{ __pageQuery = JSON.parse(webview.__query__) }catch(e){} App.mpType = 'page' -const app = Vue.createApp(App,{$store:getApp().$store,__pageId,__pagePath,__pageQuery}) +const app = Vue.createPageApp(App,{$store:getApp().$store,__pageId,__pagePath,__pageQuery}) app.provide('__globalStyles', Vue.useCssStyles([...AppStyles, ...(App.styles||[])])) app.mount('#root')`, path.join(nvueOutDir(), 'main.js'), diff --git a/packages/uni-app-vite/src/nvue/plugins/mainJs.ts b/packages/uni-app-vite/src/nvue/plugins/mainJs.ts index 11e2b3ce0..3f0bd2ed1 100644 --- a/packages/uni-app-vite/src/nvue/plugins/mainJs.ts +++ b/packages/uni-app-vite/src/nvue/plugins/mainJs.ts @@ -49,7 +49,7 @@ function createApp(code: string) { return `${code.replace( 'createSSRApp', 'createVueApp as createSSRApp' - )};const {app:__app__,Vuex:__Vuex__,Pinia:__Pinia__}=createApp();uni.Vuex=__Vuex__;uni.Pinia=__Pinia__;__app__._component.mpType='app';__app__._component.render=()=>{};__app__.mount({appendChild(){}});` + )};const {app:__app__,Vuex:__Vuex__,Pinia:__Pinia__}=createApp();uni.Vuex=__Vuex__;uni.Pinia=__Pinia__;__app__._component.mpType='app';__app__._component.render=()=>{};__app__.mount('#app');` } function createLegacyApp(code: string) { -- GitLab