fix(runtime): 修复 H5 初始化问题，close #9511 (#9517)

NervJS · Jun 11, 2021 · 104e648 · 104e648
1 parent 4bec008
commit 104e648
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/packages/taro-runtime/src/dsl/react.ts b/packages/taro-runtime/src/dsl/react.ts
@@ -210,8 +210,11 @@ export function createReactApp (App: React.ComponentClass, react: typeof React,
  }
  }
 
- // eslint-disable-next-line react/no-render-return-value
- const wrapper: AppWrapper = ReactDOM.render(R.createElement(AppWrapper), document.getElementById('app'))
+ let wrapper: AppWrapper
+ if (!isBrowser) {
+ // eslint-disable-next-line react/no-render-return-value
+ wrapper = ReactDOM.render(R.createElement(AppWrapper), document.getElementById('app'))
+ }
 
  const app: AppInstance = Object.create({
  render (cb: () => void) {
@@ -242,6 +245,11 @@ export function createReactApp (App: React.ComponentClass, react: typeof React,
  params: options?.query,
  ...options
  }
+ if (isBrowser) {
+ // 由于 H5 路由初始化的时候会清除 app 下的 dom 元素，所以需要在路由初始化后执行 render
+ // eslint-disable-next-line react/no-render-return-value
+ wrapper = ReactDOM.render(R.createElement(AppWrapper), document.getElementById('app'))
+ }
  const app = ref.current
 
  // For taroize

diff --git a/packages/taro-runtime/src/dsl/vue.ts b/packages/taro-runtime/src/dsl/vue.ts
@@ -145,7 +145,9 @@ export function createVueApp (App: ComponentOptions<VueCtor>, vue: V, config: Ap
  }
  }
  })
- wrapper.$mount(document.getElementById('app') as any)
+ if (!isBrowser) {
+ wrapper.$mount(document.getElementById('app') as any)
+ }
  const app: AppInstance = Object.create({
  mount (component: ComponentOptions<VueCtor>, id: string, cb: () => void) {
  const page = connectVuePage(Vue, id)(component)
@@ -171,6 +173,10 @@ export function createVueApp (App: ComponentOptions<VueCtor>, vue: V, config: Ap
  params: options?.query,
  ...options
  }
+ if (isBrowser) {
+ // 由于 H5 路由初始化的时候会清除 app 下的 dom 元素，所以需要在路由初始化后再执行 render
+ wrapper.$mount(document.getElementById('app') as any)
+ }
  appInstance = wrapper.$refs.app as VueAppInstance
  if (appInstance != null && isFunction(appInstance.$options.onLaunch)) {
  appInstance.$options.onLaunch.call(appInstance, options)

diff --git a/packages/taro-runtime/src/dsl/vue3.ts b/packages/taro-runtime/src/dsl/vue3.ts
@@ -122,6 +122,7 @@ function setReconciler () {
 
 export function createVue3App (app: App<TaroElement>, h: typeof createElement, config: Config) {
  let pages: VNode[] = []
+ let appInstance: ComponentPublicInstance
 
  ensure(!isFunction(app._component), '入口组件不支持使用函数式组件')
 
@@ -130,7 +131,9 @@ export function createVue3App (app: App<TaroElement>, h: typeof createElement, c
  app._component.render = function () {
  return pages.slice()
  }
- const appInstance: ComponentPublicInstance = app.mount('#app')
+ if (!isBrowser) {
+ appInstance = app.mount('#app')
+ }
  const appConfig: AppInstance = Object.create({
  mount (component: Component, id: string, cb: () => void) {
  const page = createVue3Page(h, id)(component)
@@ -163,6 +166,9 @@ export function createVue3App (app: App<TaroElement>, h: typeof createElement, c
  params: options?.query,
  ...options
  }
+ if (isBrowser) {
+ appInstance = app.mount('#app')
+ }
  const onLaunch = appInstance?.$options?.onLaunch
  isFunction(onLaunch) && onLaunch.call(appInstance, options)
  }