@mpxjs/core 2.9.70 → 2.9.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.70",
+  "version": "2.9.72",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -24,17 +24,16 @@
     "miniprogram-api-typings": "^3.10.0"
   },
   "peerDependencies": {
-    "@ant-design/react-native": "^5.1.3",
     "@d11/react-native-fast-image": "^8.6.12",
     "@mpxjs/api-proxy": "^2.9.0",
     "@mpxjs/store": "^2.9.0",
     "@react-navigation/native": "^7.0.3",
     "@react-navigation/stack": "^7.0.4",
-    "promise": "^8.3.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^2.19.0",
     "react-native-linear-gradient": "^2.8.3",
+    "react-native-reanimated": "^3.15.2",
     "react-native-safe-area-context": "^4.14.0",
     "react-native-screens": "^4.1.0",
     "react-native-webview": "^13.10.5",
@@ -62,7 +61,7 @@
     "react-native": {
       "optional": true
     },
-    "promise": {
+    "react-native-reanimated": {
       "optional": true
     },
     "@react-navigation/native": {
@@ -71,9 +70,6 @@
     "@react-navigation/stack": {
       "optional": true
     },
-    "@ant-design/react-native": {
-      "optional": true
-    },
     "react-native-safe-area-context": {
       "optional": true
     },
@@ -109,5 +105,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "ad8f04de95865ffc2b50b8c0a7f87b5952fb8647"
+  "gitHead": "5ceca0430a79a41456260d87a81760f2cd31fad1"
 }

package/src/convertor/wxToReact.js

@@ -5,7 +5,7 @@ import {
 import { implemented } from '../core/implement'
 
 // 暂不支持的wx选项，后期需要各种花式支持
-const unsupported = ['relations', 'moved', 'definitionFilter']
+const unsupported = ['moved', 'definitionFilter']
 
 function convertErrorDesc (key) {
   error(`Options.${key} is not supported in runtime conversion from wx to react native.`, global.currentResource)

package/src/core/mergeOptions.js

@@ -122,9 +122,10 @@ function extractObservers (options) {
   Object.keys(props).forEach(key => {
     const prop = props[key]
     if (prop && prop.observer) {
+      let callback = prop.observer
+      delete prop.observer
       mergeWatch(key, {
         handler (...rest) {
-          let callback = prop.observer
           if (typeof callback === 'string') {
             callback = this[callback]
           }
@@ -168,11 +169,7 @@ function extractObservers (options) {
               cb = this[cb]
             }
             if (typeof cb === 'function') {
-              if (keyPathArr.length < 2) {
-                val = [val]
-                old = [old]
-              }
-              cb.call(this, ...val, ...old)
+              Array.isArray(val) ? cb.call(this, ...val) : cb.call(this, val)
             }
           },
           deep,

package/src/core/proxy.js

@@ -1,4 +1,4 @@
-import { reactive } from '../observer/reactive'
+import { reactive, defineReactive } from '../observer/reactive'
 import { ReactiveEffect, pauseTracking, resetTracking } from '../observer/effect'
 import { effectScope } from '../platform/export/index'
 import { watch } from '../observer/watch'
@@ -111,7 +111,7 @@ export default class MpxProxy {
     this.uid = uid++
     this.name = options.name || ''
     this.options = options
-    this.ignoreReactivePattern = this.options.options?.ignoreReactivePattern
+    this.shallowReactivePattern = this.options.options?.shallowReactivePattern
     // beforeCreate -> created -> mounted -> unmounted
     this.state = BEFORECREATE
     this.ignoreProxyMap = makeMap(Mpx.config.ignoreProxyWhiteList)
@@ -145,10 +145,12 @@ export default class MpxProxy {
     this.initApi()
   }
 
-  processIgnoreReactive (obj) {
-    if (this.ignoreReactivePattern && isObject(obj)) {
+  processShallowReactive (obj) {
+    if (this.shallowReactivePattern && isObject(obj)) {
       Object.keys(obj).forEach((key) => {
-        if (this.ignoreReactivePattern.test(key)) {
+        if (this.shallowReactivePattern.test(key)) {
+          // 命中shallowReactivePattern的属性将其设置为 shallowReactive
+          defineReactive(obj, key, obj[key], true)
           Object.defineProperty(obj, key, {
             enumerable: true,
             // set configurable to false to skip defineReactive
@@ -169,6 +171,8 @@ export default class MpxProxy {
       // web中BEFORECREATE钩子通过vue的beforeCreate钩子单独驱动
       this.callHook(BEFORECREATE)
       setCurrentInstance(this)
+      this.parent = this.resolveParent()
+      this.provides = this.parent ? this.parent.provides : Object.create(null)
       // 在 props/data 初始化之前初始化 inject
       this.initInject()
       this.initProps()
@@ -193,6 +197,18 @@ export default class MpxProxy {
     }
   }
 
+  resolveParent () {
+    if (isReact) {
+      return {
+        provides: this.target.__parentProvides
+      }
+    }
+    if (isFunction(this.target.selectOwnerComponent)) {
+      const parent = this.target.selectOwnerComponent()
+      return parent ? parent.__mpxProxy : null
+    }
+  }
+
   createRenderTask (isEmptyRender) {
     if ((!this.isMounted() && this.currentRenderTask) || (this.isMounted() && isEmptyRender)) {
       return
@@ -232,16 +248,6 @@ export default class MpxProxy {
       // 页面/组件销毁清除上下文的缓存
       contextMap.remove(this.uid)
     }
-    if (!isWeb && this.options.__type__ === 'page') {
-      // 小程序页面销毁时移除对应的 provide
-      if (isFunction(this.target.getPageId)) {
-        const pageId = this.target.getPageId()
-        const providesMap = global.__mpxProvidesMap
-        if (providesMap.__pages[pageId]) {
-          delete providesMap.__pages[pageId]
-        }
-      }
-    }
     this.callHook(BEFOREUNMOUNT)
     this.scope?.stop()
     if (this.update) this.update.active = false
@@ -290,10 +296,10 @@ export default class MpxProxy {
     if (isReact) {
       // react模式下props内部对象透传无需深clone，依赖对象深层的数据响应触发子组件更新
       this.props = this.target.__getProps()
-      reactive(this.processIgnoreReactive(this.props))
+      reactive(this.processShallowReactive(this.props))
     } else {
       this.props = diffAndCloneA(this.target.__getProps(this.options)).clone
-      reactive(this.processIgnoreReactive(this.props))
+      reactive(this.processShallowReactive(this.props))
     }
     proxy(this.target, this.props, undefined, false, this.createProxyConflictHandler('props'))
   }
@@ -333,7 +339,7 @@ export default class MpxProxy {
     if (isFunction(dataFn)) {
       Object.assign(this.data, callWithErrorHandling(dataFn.bind(this.target), this, 'data function'))
     }
-    reactive(this.processIgnoreReactive(this.data))
+    reactive(this.processShallowReactive(this.data))
     proxy(this.target, this.data, undefined, false, this.createProxyConflictHandler('data'))
     this.collectLocalKeys(this.data)
   }
@@ -514,7 +520,7 @@ export default class MpxProxy {
       if (hasOwn(renderData, key)) {
         const data = renderData[key]
         const firstKey = getFirstKey(key)
-        if (!this.localKeysMap[firstKey] || (this.ignoreReactivePattern && this.ignoreReactivePattern.test(firstKey))) {
+        if (!this.localKeysMap[firstKey]) {
           continue
         }
         // 外部clone，用于只需要clone的场景

package/src/platform/builtInMixins/index.js

@@ -22,7 +22,8 @@ export default function getBuiltInMixins ({ type, rawOptions = {} }) {
       directiveHelperMixin(),
       styleHelperMixin(),
       refsMixin(),
-      i18nMixin()
+      i18nMixin(),
+      relationsMixin(type)
     ]
   } else if (__mpx_mode__ === 'web') {
     bulitInMixins = [

package/src/platform/builtInMixins/proxyEventMixin.web.js

@@ -1,4 +1,5 @@
-import { setByPath } from '@mpxjs/utils'
+import { setByPath, error, parseDataset } from '@mpxjs/utils'
+import Mpx from '../../index'
 
 export default function proxyEventMixin () {
   return {
@@ -19,11 +20,58 @@ export default function proxyEventMixin () {
         const value = filterMethod ? (innerFilter[filterMethod] ? innerFilter[filterMethod](originValue) : typeof this[filterMethod] === 'function' && this[filterMethod]) : originValue
         setByPath(this, expr, value)
       },
-      __invokeHandler (eventName, $event) {
-        const handler = this[eventName]
-        if (handler && typeof handler === 'function') {
-          handler.call(this, $event)
+      __invoke (rawEvent, eventConfig = []) {
+        if (typeof Mpx.config.proxyEventHandler === 'function') {
+          try {
+            Mpx.config.proxyEventHandler(rawEvent)
+          } catch (e) {}
         }
+        const location = this.__mpxProxy.options.mpxFileResource
+
+        if (rawEvent.target && !rawEvent.target._datasetProcessed) {
+          const originalDataset = rawEvent.target.dataset
+          Object.defineProperty(rawEvent.target, 'dataset', {
+            get: () => parseDataset(originalDataset),
+            configurable: true,
+            enumerable: true
+          })
+          rawEvent.target._datasetProcessed = true
+        }
+        if (rawEvent.currentTarget && !rawEvent.currentTarget._datasetProcessed) {
+          const originalDataset = rawEvent.currentTarget.dataset
+          Object.defineProperty(rawEvent.currentTarget, 'dataset', {
+            get: () => parseDataset(originalDataset),
+            configurable: true,
+            enumerable: true
+          })
+          rawEvent.currentTarget._datasetProcessed = true
+        }
+
+        let returnedValue
+        eventConfig.forEach((item) => {
+          const callbackName = item[0]
+          if (callbackName) {
+            const params =
+              item.length > 1
+                ? item.slice(1).map((item) => {
+                    if (item === '__mpx_event__') {
+                      return rawEvent
+                    } else {
+                      return item
+                    }
+                  })
+                : [rawEvent]
+            if (typeof this[callbackName] === 'function') {
+              returnedValue = this[callbackName].apply(this, params)
+            } else {
+              error(
+                `Instance property [${callbackName}] is not function, please check.`,
+                location
+              )
+            }
+          }
+        })
+        return returnedValue
       }
     }
   }

package/src/platform/builtInMixins/relationsMixin.ios.js

@@ -0,0 +1,67 @@
+import { BEFORECREATE, MOUNTED, BEFOREUNMOUNT } from '../../core/innerLifecycle'
+
+const relationTypeMap = {
+  parent: 'child',
+  ancestor: 'descendant'
+}
+
+export default function relationsMixin (mixinType) {
+  if (mixinType === 'component') {
+    return {
+      [BEFORECREATE] () {
+        this.__relationNodesMap = {}
+      },
+      [MOUNTED] () {
+        this.__mpxExecRelations('linked')
+      },
+      [BEFOREUNMOUNT] () {
+        this.__mpxExecRelations('unlinked')
+        this.__relationNodesMap = {}
+      },
+      methods: {
+        getRelationNodes (path) {
+          return this.__relationNodesMap[path] || null
+        },
+        __mpxExecRelations (type) {
+          const relations = this.__mpxProxy.options.relations
+          const relationContext = this.__relation
+          const currentPath = this.__componentPath
+          if (relations && relationContext) {
+            Object.keys(relations).forEach((path) => {
+              const relation = relations[path]
+              const relationType = relation.type
+              if ((relationType === 'parent' || relationType === 'ancestor') && relationContext[path]) {
+                const target = relationContext[path]
+                const targetRelation = target.__mpxProxy.options.relations?.[currentPath]
+                if (targetRelation && targetRelation.type === relationTypeMap[relationType] && target.__componentPath === path) {
+                  if (type === 'linked') {
+                    this.__mpxLinkRelationNodes(target, currentPath)
+                  } else if (type === 'unlinked') {
+                    this.__mpxRemoveRelationNodes(target, currentPath)
+                  }
+                  if (typeof targetRelation[type] === 'function') {
+                    targetRelation[type].call(target, this)
+                  }
+                  if (typeof relation[type] === 'function') {
+                    relation[type].call(this, target)
+                  }
+                  this.__relationNodesMap[path] = [target]
+                }
+              }
+            })
+          }
+        },
+        __mpxLinkRelationNodes (target, path) {
+          target.__relationNodesMap[path] = target.__relationNodesMap[path] || [] // 父级绑定子级
+          target.__relationNodesMap[path].push(this)
+        },
+        __mpxRemoveRelationNodes (target, path) {
+          const relationNodesMap = target.__relationNodesMap
+          const arr = relationNodesMap[path] || []
+          const index = arr.indexOf(this)
+          if (index !== -1) arr.splice(index, 1)
+        }
+      }
+    }
+  }
+}

package/src/platform/createApp.ios.js

@@ -1,13 +1,13 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp, getFocusedNavigation, hasOwn, extend } from '@mpxjs/utils'
+import { makeMap, spreadProp, getFocusedNavigation, hasOwn } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
 import { createElement, memo, useRef, useEffect } from 'react'
 import * as ReactNative from 'react-native'
 import { Image } from 'react-native'
-import { ref } from '../observer/ref'
+import { initAppProvides } from './export/inject'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -30,22 +30,28 @@ function filterOptions (options, appData) {
   return newOptions
 }
 
-function createAppInstance (appData) {
-  return extend({}, Mpx.prototype, appData)
-}
-
-export default function createApp (option, config = {}) {
+export default function createApp (options) {
   const appData = {}
 
   const { NavigationContainer, createStackNavigator, SafeAreaProvider } = global.__navigationHelper
   // app选项目前不需要进行转换
-  const { rawOptions, currentInject } = transferOptions(option, 'app', false)
+  const { rawOptions, currentInject } = transferOptions(options, 'app', false)
+  initAppProvides(rawOptions.provide, rawOptions)
   const defaultOptions = filterOptions(spreadProp(rawOptions, 'methods'), appData)
-  defaultOptions.onAppInit && defaultOptions.onAppInit()
   // 在页面script执行前填充getApp()
   global.getApp = function () {
     return appData
   }
+
+  // 模拟小程序appInstance在热启动时不会重新创建的行为，在外部创建跟随js context的appInstance
+  const appInstance = Object.assign({}, appData, Mpx.prototype)
+
+  defaultOptions.onShow && global.__mpxAppCbs.show.push(defaultOptions.onShow.bind(appInstance))
+  defaultOptions.onHide && global.__mpxAppCbs.hide.push(defaultOptions.onHide.bind(appInstance))
+  defaultOptions.onError && global.__mpxAppCbs.error.push(defaultOptions.onError.bind(appInstance))
+  defaultOptions.onUnhandledRejection && global.__mpxAppCbs.rejection.push(defaultOptions.onUnhandledRejection.bind(appInstance))
+  defaultOptions.onAppInit && defaultOptions.onAppInit()
+
   const pages = currentInject.getPages() || {}
   const firstPage = currentInject.firstPage
   const Stack = createStackNavigator()
@@ -82,55 +88,50 @@ export default function createApp (option, config = {}) {
   }
 
   global.__mpxAppLaunched = false
-
-  global.__mpxAppFocusedState = ref('show')
   global.__mpxOptionsMap[currentInject.moduleId] = memo((props) => {
-    const instanceRef = useRef(null)
-    if (!instanceRef.current) {
-      instanceRef.current = createAppInstance(appData)
-    }
-    const instance = instanceRef.current
+    const firstRef = useRef(true)
     const initialRouteRef = useRef({
       initialRouteName: firstPage,
       initialParams: {}
     })
-
-    if (!global.__mpxAppLaunched) {
+    if (firstRef.current) {
+      // 热启动情况下，app会被销毁重建，将__mpxAppHotLaunched重置保障路由等初始化逻辑正确执行
+      global.__mpxAppHotLaunched = false
+      // 热启动情况下重置__mpxPagesMap避免页面销毁函数未及时执行时错误地引用到之前的navigation
+      global.__mpxPagesMap = {}
+      firstRef.current = false
+    }
+    if (!global.__mpxAppHotLaunched) {
       const { initialRouteName, initialParams } = Mpx.config.rnConfig.parseAppProps?.(props) || {}
       initialRouteRef.current.initialRouteName = initialRouteName || initialRouteRef.current.initialRouteName
       initialRouteRef.current.initialParams = initialParams || initialRouteRef.current.initialParams
 
       global.__mpxAppOnLaunch = (navigation) => {
-        global.__mpxAppLaunched = true
         const state = navigation.getState()
         Mpx.config.rnConfig.onStateChange?.(state)
         const current = state.routes[state.index]
-        global.__mpxEnterOptions = {
+        const options = {
           path: current.name,
           query: current.params,
           scene: 0,
           shareTicket: '',
-          referrerInfo: {}
+          referrerInfo: {},
+          isLaunch: true
+        }
+        global.__mpxEnterOptions = options
+        if (!global.__mpxAppLaunched) {
+          global.__mpxLaunchOptions = options
+          defaultOptions.onLaunch && defaultOptions.onLaunch.call(appInstance, options)
         }
-        defaultOptions.onLaunch && defaultOptions.onLaunch.call(instance, global.__mpxEnterOptions)
-        defaultOptions.onShow && defaultOptions.onShow.call(instance, global.__mpxEnterOptions)
+        global.__mpxAppCbs.show.forEach((cb) => {
+          cb(options)
+        })
+        global.__mpxAppLaunched = true
+        global.__mpxAppHotLaunched = true
       }
     }
 
     useEffect(() => {
-      if (defaultOptions.onShow) {
-        global.__mpxAppCbs.show.push(defaultOptions.onShow.bind(instance))
-      }
-      if (defaultOptions.onHide) {
-        global.__mpxAppCbs.hide.push(defaultOptions.onHide.bind(instance))
-      }
-      if (defaultOptions.onError) {
-        global.__mpxAppCbs.error.push(defaultOptions.onError.bind(instance))
-      }
-      if (defaultOptions.onUnhandledRejection) {
-        global.__mpxAppCbs.rejection.push(defaultOptions.onUnhandledRejection.bind(instance))
-      }
-
       const changeSubscription = ReactNative.AppState.addEventListener('change', (currentState) => {
         if (currentState === 'active') {
           let options = global.__mpxEnterOptions

package/src/platform/createApp.js

@@ -24,19 +24,29 @@ function filterOptions (options, appData) {
   return newOptions
 }
 
-export default function createApp (option, config = {}) {
-  // 在App中挂载mpx对象供周边工具访问，如e2e测试
+export default function createApp (options, config = {}) {
+  const appData = {}
+  // app选项目前不需要进行转换
+  const { rawOptions, currentInject } = transferOptions(options, 'app', false)
   const builtInMixins = [{
+    // 在App中挂载mpx对象供周边工具访问，如e2e测试
     getMpx () {
       return Mpx
     }
   }]
-  const appData = {}
   if (__mpx_mode__ === 'web') {
     builtInMixins.push({
+      beforeCreate () {
+        // for vue provide vm access
+        Object.assign(this, appData, Mpx.prototype)
+        if (isBrowser) {
+          rawOptions.onShow && global.__mpxAppCbs.show.push(rawOptions.onShow.bind(this))
+          rawOptions.onHide && global.__mpxAppCbs.hide.push(rawOptions.onHide.bind(this))
+          rawOptions.onError && global.__mpxAppCbs.error.push(rawOptions.onError.bind(this))
+          rawOptions.onUnhandledRejection && global.__mpxAppCbs.rejection.push(rawOptions.onUnhandledRejection.bind(this))
+        }
+      },
       created () {
-        Object.assign(this, Mpx.prototype)
-        Object.assign(this, appData)
         const current = this.$root.$options?.router?.currentRoute || {}
         const options = {
           path: current.path && current.path.replace(/^\//, ''),
@@ -45,48 +55,36 @@ export default function createApp (option, config = {}) {
           shareTicket: '',
           referrerInfo: {}
         }
+        // web不分冷启动和热启动
         global.__mpxEnterOptions = options
-        this.$options.onLaunch && this.$options.onLaunch.call(this, options)
-        if (isBrowser) {
-          if (this.$options.onShow) {
-            this.$options.onShow.call(this, options)
-            global.__mpxAppCbs.show.push(this.$options.onShow.bind(this))
-          }
-          if (this.$options.onHide) {
-            global.__mpxAppCbs.hide.push(this.$options.onHide.bind(this))
-          }
-          if (this.$options.onError) {
-            global.__mpxAppCbs.error.push(this.$options.onError.bind(this))
-          }
-          if (this.$options.onUnhandledRejection) {
-            global.__mpxAppCbs.rejection.push(this.$options.onUnhandledRejection.bind(this))
-          }
-        }
+        global.__mpxLaunchOptions = options
+        rawOptions.onLaunch && rawOptions.onLaunch.call(this, options)
+        global.__mpxAppCbs.show.forEach((cb) => {
+          cb(options)
+        })
       }
     })
   } else {
     builtInMixins.push({
       onLaunch () {
         Object.assign(this, Mpx.prototype)
+        initAppProvides(rawOptions.provide, this)
       }
     })
   }
-  // app选项目前不需要进行转换
-  const { rawOptions, currentInject } = transferOptions(option, 'app', false)
   rawOptions.mixins = builtInMixins
   const defaultOptions = filterOptions(spreadProp(mergeOptions(rawOptions, 'app', false), 'methods'), appData)
 
   if (__mpx_mode__ === 'web') {
-    global.__mpxOptionsMap = global.__mpxOptionsMap || {}
-    global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
     global.getApp = function () {
       if (!isBrowser) {
         console.error('[Mpx runtime error]: Dangerous API! global.getApp method is running in non browser environments')
       }
       return appData
     }
+    global.__mpxOptionsMap = global.__mpxOptionsMap || {}
+    global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
   } else {
-    initAppProvides(rawOptions)
     defaultOptions.onAppInit && defaultOptions.onAppInit()
     const ctor = config.customCtor || global.currentCtor || App
     ctor(defaultOptions)

package/src/platform/env/event.js

@@ -11,57 +11,60 @@ function extendEvent (e, extendObj = {}) {
   })
 }
 
-function MpxEvent (layer) {
-  this.targetElement = null
-  this.touches = []
-  this.touchStartX = 0
-  this.touchStartY = 0
-  this.startTimer = null
-  this.needTap = true
-  this.isTouchDevice = document && ('ontouchstart' in document.documentElement)
+function createMpxEvent (layer) {
+  let startTimer = null
+  let needTap = true
+  let touchStartX = 0
+  let touchStartY = 0
+  let targetElement = null
+  const isTouchDevice = document && 'ontouchstart' in document.documentElement
 
-  this.onTouchStart = (event) => {
+  const onTouchStart = (event) => {
     if (event.targetTouches?.length > 1) {
       return true
     }
-    this.touches = event.targetTouches
-    this.targetElement = event.target
-    this.needTap = true
-    this.startTimer = null
-    this.touchStartX = this.touches[0].pageX
-    this.touchStartY = this.touches[0].pageY
-    this.startTimer = setTimeout(() => {
-      this.needTap = false
-      this.sendEvent(this.targetElement, 'longpress', event)
-      this.sendEvent(this.targetElement, 'longtap', event)
+    const touches = event.targetTouches
+    targetElement = event.target
+    needTap = true
+    startTimer = null
+    touchStartX = touches[0].pageX
+    touchStartY = touches[0].pageY
+    startTimer = setTimeout(() => {
+      needTap = false
+      sendEvent(targetElement, 'longpress', event)
+      sendEvent(targetElement, 'longtap', event)
     }, 350)
   }
 
-  this.onTouchMove = (event) => {
+  const onTouchMove = (event) => {
     const touch = event.changedTouches[0]
-    if (Math.abs(touch.pageX - this.touchStartX) > 1 || Math.abs(touch.pageY - this.touchStartY) > 1) {
-      this.needTap = false
-      this.startTimer && clearTimeout(this.startTimer)
-      this.startTimer = null
+    if (
+      Math.abs(touch.pageX - touchStartX) > 1 ||
+      Math.abs(touch.pageY - touchStartY) > 1
+    ) {
+      needTap = false
+      startTimer && clearTimeout(startTimer)
+      startTimer = null
     }
   }
 
-  this.onTouchEnd = (event) => {
+  const onTouchEnd = (event) => {
     if (event.targetTouches?.length > 1) {
       return true
     }
-    this.startTimer && clearTimeout(this.startTimer)
-    this.startTimer = null
-    if (this.needTap) {
-      this.sendEvent(this.targetElement, 'tap', event)
+    startTimer && clearTimeout(startTimer)
+    startTimer = null
+    if (needTap) {
+      sendEvent(targetElement, 'tap', event)
     }
   }
 
-  this.onClick = (event) => {
-    this.targetElement = event.target
-    this.sendEvent(this.targetElement, 'tap', event)
+  const onClick = (event) => {
+    targetElement = event.target
+    sendEvent(targetElement, 'tap', event)
   }
-  this.sendEvent = (targetElement, type, event) => {
+
+  const sendEvent = (targetElement, type, event) => {
     const touchEvent = new CustomEvent(type, {
       bubbles: true,
       cancelable: true
@@ -72,7 +75,6 @@ function MpxEvent (layer) {
       changedTouches,
       touches: changedTouches,
       detail: {
-        // pc端点击事件可能没有changedTouches，所以直接从 event中取
         x: changedTouches[0]?.pageX || event.pageX || 0,
         y: changedTouches[0]?.pageY || event.pageY || 0
       }
@@ -80,28 +82,23 @@ function MpxEvent (layer) {
     targetElement && targetElement.dispatchEvent(touchEvent)
   }
 
-  this.addListener = () => {
-    if (this.isTouchDevice) {
-      layer.addEventListener('touchstart', this.onTouchStart, true)
-      layer.addEventListener('touchmove', this.onTouchMove, true)
-      layer.addEventListener('touchend', this.onTouchEnd, true)
-    } else {
-      layer.addEventListener('click', this.onClick, true)
-    }
+  if (isTouchDevice) {
+    layer.addEventListener('touchstart', onTouchStart, true)
+    layer.addEventListener('touchmove', onTouchMove, true)
+    layer.addEventListener('touchend', onTouchEnd, true)
+  } else {
+    layer.addEventListener('click', onClick, true)
   }
-  this.addListener()
 }
 
 export function initEvent () {
   if (isBrowser && !global.__mpxCreatedEvent) {
     global.__mpxCreatedEvent = true
     if (document.readyState === 'complete' || document.readyState === 'interactive') {
-      // eslint-disable-next-line no-new
-      new MpxEvent(document.body)
+      createMpxEvent(document.body)
     } else {
       document.addEventListener('DOMContentLoaded', function () {
-        // eslint-disable-next-line no-new
-        new MpxEvent(document.body)
+        createMpxEvent(document.body)
       }, false)
     }
   }

package/src/platform/env/index.ios.js

@@ -1,3 +1,4 @@
+import { isFunction, isNumber, isString } from '@mpxjs/utils'
 import { createI18n } from '../builtInMixins/i18nMixin'
 
 export function init (Mpx) {
@@ -30,21 +31,30 @@ function initGlobalErrorHandling () {
     })
   }
 
+  function onUnhandledRejection (event) {
+    if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
+      global.__mpxAppCbs.rejection.forEach((cb) => {
+        cb(event)
+      })
+    } else {
+      console.warn(`UNHANDLED PROMISE REJECTION ${(isNumber(event.id) || isString(event.id)) ? '(id:' + event.id + ')' : ''}: ${event.reason}\n`)
+    }
+  }
   const rejectionTrackingOptions = {
     allRejections: true,
     onUnhandled (id, error) {
-      if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
-        global.__mpxAppCbs.rejection.forEach((cb) => {
-          cb(error, id)
-        })
-      } else {
-        console.warn(`UNHANDLED PROMISE REJECTION (id: ${id}): ${error}\n`)
-      }
+      onUnhandledRejection({ id, reason: error, promise: null })
     }
   }
 
-  if (global?.HermesInternal?.hasPromise?.()) {
-    global.HermesInternal?.enablePromiseRejectionTracker?.(rejectionTrackingOptions)
+  // 支持 core-js promise polyfill
+  const oldOnUnhandledRejection = global.onunhandledrejection
+  global.onunhandledrejection = function onunhandledrejection (event) {
+    onUnhandledRejection(event)
+    isFunction(oldOnUnhandledRejection) && oldOnUnhandledRejection.call(this, event)
+  }
+  if (global.HermesInternal?.hasPromise?.()) {
+    global.HermesInternal.enablePromiseRejectionTracker?.(rejectionTrackingOptions)
   } else {
     require('promise/setimmediate/rejection-tracking').enable(rejectionTrackingOptions)
   }

package/src/platform/env/index.web.js

@@ -38,7 +38,7 @@ function initGlobalErrorHandling () {
     window.addEventListener('unhandledrejection', (event) => {
       if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
         global.__mpxAppCbs.rejection.forEach((cb) => {
-          cb(event.reason, event.promise)
+          cb(event)
         })
       } else {
         console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}\n`)

package/src/platform/env/vuePlugin.js

@@ -60,17 +60,23 @@ export default function install (Vue) {
     data: {
       get () {
         return Object.assign({}, this.$props, this.$data)
-      }
+      },
+      enumerable: true,
+      configurable: true
     },
     dataset: {
       get () {
         return collectDataset(this.$attrs, true)
-      }
+      },
+      enumerable: true,
+      configurable: true
     },
     id: {
       get () {
         return this.$attrs.id || ''
-      }
+      },
+      enumerable: true,
+      configurable: true
     }
   })
 

package/src/platform/export/inject.js

@@ -1,39 +1,30 @@
 import { callWithErrorHandling, isFunction, isObject, warn } from '@mpxjs/utils'
 import { currentInstance } from '../../core/proxy'
 
-const providesMap = {
-  /** 全局 scope */
-  __app: Object.create(null),
-  /** 页面 scope */
-  __pages: Object.create(null)
-}
-
-global.__mpxProvidesMap = providesMap
+/** 全局 scope */
+let appProvides = Object.create(null)
 
 /** @internal createApp() 初始化应用层 scope provide */
-export function initAppProvides (appOptions) {
-  const provideOpt = appOptions.provide
+export function initAppProvides (provideOpt, instance) {
   if (provideOpt) {
     const provided = isFunction(provideOpt)
-      ? callWithErrorHandling(provideOpt.bind(appOptions), appOptions, 'createApp provide function')
+      ? callWithErrorHandling(provideOpt.bind(instance), instance, 'createApp provide function')
       : provideOpt
     if (isObject(provided)) {
-      providesMap.__app = provided
+      appProvides = provided
     } else {
       warn('App provides must be an object or a function that returns an object.')
     }
   }
 }
 
-function resolvePageId (context) {
-  if (context && isFunction(context.getPageId)) {
-    return context.getPageId()
+function resolveProvides (vm) {
+  const provides = vm.provides
+  const parentProvides = vm.parent && vm.parent.provides
+  if (parentProvides === provides) {
+    return (vm.provides = Object.create(parentProvides))
   }
-}
-
-function resolvePageProvides (context) {
-  const pageId = resolvePageId(context)
-  return providesMap.__pages[pageId] || (providesMap.__pages[pageId] = Object.create(null))
+  return provides
 }
 
 export function provide (key, value) {
@@ -42,8 +33,7 @@ export function provide (key, value) {
     warn('provide() can only be used inside setup().')
     return
   }
-  // 小程序无法实现组件父级引用，所以 provide scope 设置为组件所在页面
-  const provides = resolvePageProvides(instance.target)
+  const provides = resolveProvides(instance)
   provides[key] = value
 }
 
@@ -53,11 +43,11 @@ export function inject (key, defaultValue, treatDefaultAsFactory = false) {
     warn('inject() can only be used inside setup()')
     return
   }
-  const provides = resolvePageProvides(instance.target)
-  if (key in provides) {
+  const provides = instance.parent && instance.parent.provides
+  if (provides && key in provides) {
     return provides[key]
-  } else if (key in providesMap.__app) {
-    return providesMap.__app[key]
+  } else if (key in appProvides) {
+    return appProvides[key]
   } else if (arguments.length > 1) {
     return treatDefaultAsFactory && isFunction(defaultValue)
       ? defaultValue.call(instance && instance.target)

package/src/platform/patch/getDefaultOptions.ios.js

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useState, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useState, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement, createContext } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../observer/effect'
 import { watch } from '../../observer/watch'
@@ -11,6 +11,8 @@ import { queueJob, hasPendingJob } from '../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
 import { IntersectionObserverContext, RouteContext, KeyboardAvoidContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 
+const ProviderContext = createContext(null)
+
 function getSystemInfo () {
   const window = ReactNative.Dimensions.get('window')
   const screen = ReactNative.Dimensions.get('screen')
@@ -193,7 +195,7 @@ const instanceProto = {
   }
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx }) {
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation, parentProvides }) {
   const instance = Object.create(instanceProto, {
     dataset: {
       get () {
@@ -244,9 +246,33 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
         return currentInject.getRefsData || noop
       },
       enumerable: false
+    },
+    __parentProvides: {
+      get () {
+        return parentProvides || null
+      },
+      enumerable: false
     }
   })
 
+  if (type === 'component') {
+    Object.defineProperty(instance, '__componentPath', {
+      get () {
+        return currentInject.componentPath || ''
+      },
+      enumerable: false
+    })
+  }
+
+  if (relation) {
+    Object.defineProperty(instance, '__relation', {
+      get () {
+        return relation
+      },
+      enumerable: false
+    })
+  }
+
   // bind this & assign methods
   if (rawOptions.methods) {
     Object.entries(rawOptions.methods).forEach(([key, method]) => {
@@ -365,34 +391,68 @@ function usePageStatus (navigation, pageId) {
     const blurSubscription = navigation.addListener('blur', () => {
       pageStatusMap[pageId] = 'hide'
     })
-    const unWatchAppFocusedState = watch(global.__mpxAppFocusedState, (value) => {
-      pageStatusMap[pageId] = value
-    })
 
     return () => {
       focusSubscription()
       blurSubscription()
-      unWatchAppFocusedState()
       del(pageStatusMap, pageId)
     }
   }, [navigation])
 }
 
+const RelationsContext = createContext(null)
+
+const checkRelation = (options) => {
+  const relations = options.relations || {}
+  let hasDescendantRelation = false
+  let hasAncestorRelation = false
+  Object.keys(relations).forEach((path) => {
+    const relation = relations[path]
+    const type = relation.type
+    if (['child', 'descendant'].includes(type)) {
+      hasDescendantRelation = true
+    } else if (['parent', 'ancestor'].includes(type)) {
+      hasAncestorRelation = true
+    }
+  })
+  return {
+    hasDescendantRelation,
+    hasAncestorRelation
+  }
+}
+
+const provideRelation = (instance, relation) => {
+  const componentPath = instance.__componentPath
+  if (relation) {
+    return Object.assign({}, relation, { [componentPath]: instance })
+  } else {
+    return {
+      [componentPath]: instance
+    }
+  }
+}
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
   const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
+  const { hasDescendantRelation, hasAncestorRelation } = checkRelation(rawOptions)
   if (rawOptions.methods) rawOptions.methods = wrapMethodsWithErrorHandling(rawOptions.methods)
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
     const propsRef = useRef(null)
     const intersectionCtx = useContext(IntersectionObserverContext)
     const pageId = useContext(RouteContext)
+    const parentProvides = useContext(ProviderContext)
+    let relation = null
+    if (hasDescendantRelation || hasAncestorRelation) {
+      relation = useContext(RelationsContext)
+    }
     propsRef.current = props
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation, parentProvides })
     }
     const instance = instanceRef.current
     useImperativeHandle(ref, () => {
@@ -442,10 +502,17 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     useEffect(() => {
       if (type === 'page') {
-        if (!global.__mpxAppLaunched && global.__mpxAppOnLaunch) {
+        if (!global.__mpxAppHotLaunched && global.__mpxAppOnLaunch) {
           global.__mpxAppOnLaunch(props.navigation)
         }
-        proxy.callHook(ONLOAD, [props.route.params || {}])
+        const loadParams = {}
+        // 此处拿到的props.route.params内属性的value被进行过了一次decode, 不符合预期，此处额外进行一次encode来与微信对齐
+        if (isObject(props.route.params)) {
+          for (const key in props.route.params) {
+            loadParams[key] = encodeURIComponent(props.route.params[key])
+          }
+        }
+        proxy.callHook(ONLOAD, [loadParams])
       }
       proxy.mounted()
       return () => {
@@ -470,15 +537,28 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       return proxy.finalMemoVersion
     }, [proxy.stateVersion, proxy.memoVersion])
 
-    const root = useMemo(() => proxy.effect.run(), [finalMemoVersion])
+    let root = useMemo(() => proxy.effect.run(), [finalMemoVersion])
     if (root && root.props.ishost) {
       // 对于组件未注册的属性继承到host节点上，如事件、样式和其他属性等
       const rootProps = getRootProps(props, validProps)
       rootProps.style = Object.assign({}, root.props.style, rootProps.style)
       // update root props
-      return cloneElement(root, rootProps)
+      root = cloneElement(root, rootProps)
     }
-    return root
+
+    const provides = proxy.provides
+    if (provides) {
+      root = createElement(ProviderContext.Provider, { value: provides }, root)
+    }
+
+    return hasDescendantRelation
+      ? createElement(RelationsContext.Provider,
+          {
+            value: provideRelation(instance, relation)
+          },
+          root
+        )
+      : root
   }))
 
   if (rawOptions.options?.isCustomText) {

package/src/platform/patch/getDefaultOptions.js

@@ -23,13 +23,11 @@ function transformProperties (properties) {
     } else {
       newFiled = Object.assign({}, rawFiled)
     }
-    const rawObserver = rawFiled?.observer
     newFiled.observer = function (value, oldValue) {
       if (this.__mpxProxy) {
         this[key] = value
         this.__mpxProxy.propsUpdated()
       }
-      rawObserver && rawObserver.call(this, value, oldValue)
     }
     newProps[key] = newFiled
   })