fix(uni-mp-xhs): 小红书 Page 生命周期调整

Author: jzhmcoo1

packages/uni-mp-xhs/dist/uni.mp.esm.js

@@ -1,5 +1,5 @@
 import { SLOT_DEFAULT_NAME, EventChannel, invokeArrayFns, MINI_PROGRAM_PAGE_RUNTIME_HOOKS, ON_LOAD, ON_SHOW, ON_HIDE, ON_UNLOAD, ON_RESIZE, ON_TAB_ITEM_TAP, ON_REACH_BOTTOM, ON_PULL_DOWN_REFRESH, ON_ADD_TO_FAVORITES, isUniLifecycleHook, ON_READY, ON_LAUNCH, ON_ERROR, ON_THEME_CHANGE, ON_PAGE_NOT_FOUND, ON_UNHANDLE_REJECTION, customizeEvent, addLeadingSlash, stringifyQuery } from '@dcloudio/uni-shared';
-import { isArray, isFunction, hasOwn, extend, hyphenate, isPlainObject, isObject } from '@vue/shared';
+import { isArray, hasOwn, isFunction, extend, hyphenate, isPlainObject, isObject } from '@vue/shared';
 import { ref, nextTick, findComponentPropsData, toRaw, updateProps, hasQueueJob, invalidateJob, devtoolsComponentAdded, getExposeProxy, pruneComponentPropsCache } from 'vue';
 import { normalizeLocale, LOCALE_EN } from '@dcloudio/uni-i18n';
 
@@ -840,22 +840,6 @@ function initSpecialMethods(mpInstance) {
         });
     }
 }
-function createVueComponent(mpType, mpInstance, vueOptions, parent) {
-    return $createComponent({
-        type: vueOptions,
-        props: findPropsData(mpInstance.props, mpType === 'page'),
-    }, {
-        mpType,
-        mpInstance,
-        slots: mpInstance.props.uS || {}, // vueSlots
-        parentComponent: parent && parent.$,
-        onBeforeSetup(instance, options) {
-            initRefs(instance, mpInstance);
-            initMocks(instance, mpInstance, mocks$1);
-            initComponentInstance(instance, options);
-        },
-    });
-}
 
 function initCreatePage() {
     return function createPage(vueOptions) {
@@ -868,18 +852,30 @@ function initCreatePage() {
                 };
                 // 初始化 vue 实例
                 this.props = query;
-                this.$vm = createVueComponent('page', this, vueOptions);
+                const mpInstance = this;
+                this.$vm = $createComponent({
+                    type: vueOptions,
+                    props: findPropsData(this.props, true),
+                }, {
+                    mpType: 'page',
+                    mpInstance: this,
+                    slots: this.props.uS || {}, // vueSlots
+                    onBeforeSetup(instance, options) {
+                        initRefs(instance, mpInstance);
+                        initMocks(instance, mpInstance, mocks$1);
+                        initComponentInstance(instance, options);
+                    },
+                });
                 initSpecialMethods(this);
-                this.$vm.$callHook(ON_LOAD, this.options);
+                this.$vm.$callHook(ON_LOAD, query);
             },
             onShow() {
-                this.$vm.$callHook(ON_SHOW);
                 if (__VUE_PROD_DEVTOOLS__) {
                     devtoolsComponentAdded(this.$vm.$);
                 }
+                this.$vm.$callHook(ON_SHOW);
             },
             onReady() {
-                // 确保页面自定义组件都被收集到
                 setTimeout(() => {
                     this.$vm.$callHook('mounted');
                     this.$vm.$callHook(ON_READY);

packages/uni-mp-xhs/src/runtime/createPage.ts

@@ -1,15 +1,22 @@
 import {
+  type ComponentInternalInstance,
   type ComponentOptions,
-  // @ts-expect-error
+  // @ts-expect-error: 模块“"vue"”没有导出的成员“devtoolsComponentAdded”
   devtoolsComponentAdded,
 } from 'vue'
 
 import {
+  $createComponent,
   $destroyComponent,
+  type CreateComponentOptions,
   PAGE_INIT_HOOKS,
+  findPropsData,
   handleEvent,
+  initComponentInstance,
   initData,
   initHooks,
+  initMocks,
+  initRefs,
   initRuntimeHooks,
   initUnknownHooks,
   initWxsCallMethods,
@@ -24,7 +31,7 @@ import {
   stringifyQuery,
 } from '@dcloudio/uni-shared'
 
-import { createVueComponent, handleLink, initSpecialMethods } from './util'
+import { handleLink, initSpecialMethods, mocks } from './util'
 
 import { extend, isPlainObject } from '@vue/shared'
 
@@ -41,18 +48,36 @@ export function initCreatePage() {
         }
         // 初始化 vue 实例
         this.props = query
-        this.$vm = createVueComponent('page', this, vueOptions)
+        const mpInstance = this
+        this.$vm = $createComponent(
+          {
+            type: vueOptions,
+            props: findPropsData(this.props, true),
+          },
+          {
+            mpType: 'page',
+            mpInstance: this,
+            slots: this.props.uS || {}, // vueSlots
+            onBeforeSetup(
+              instance: ComponentInternalInstance,
+              options: CreateComponentOptions
+            ) {
+              initRefs(instance, mpInstance as any)
+              initMocks(instance, mpInstance as any, mocks)
+              initComponentInstance(instance, options)
+            },
+          }
+        )
         initSpecialMethods(this)
-        this.$vm.$callHook(ON_LOAD, this.options)
+        this.$vm.$callHook(ON_LOAD, query)
       },
       onShow() {
-        this.$vm.$callHook(ON_SHOW)
         if (__VUE_PROD_DEVTOOLS__) {
           devtoolsComponentAdded(this.$vm.$)
         }
+        this.$vm.$callHook(ON_SHOW)
       },
       onReady() {
-        // 确保页面自定义组件都被收集到
         setTimeout(() => {
           this.$vm.$callHook('mounted')
           this.$vm.$callHook(ON_READY)