@mpxjs/core 2.9.50 → 2.9.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.50",
+  "version": "2.9.58",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.50",
+    "@mpxjs/utils": "^2.9.58",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -81,5 +81,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "d8b89e0ba1f29a16244b247f6c7a8d8197e0d732"
+  "gitHead": "49fe4c4bc46ff4bf87cd8adde37981d4b4134aa7"
 }

package/src/convertor/wxToAli.js

@@ -1,7 +1,6 @@
 import * as wxLifecycle from '../platform/patch/wx/lifecycle'
 import * as aliLifecycle from '../platform/patch/ali/lifecycle'
 import { mergeLifecycle } from './mergeLifecycle'
-import { mergeToArray } from '../core/mergeOptions'
 import { error, hasOwn, isDev } from '@mpxjs/utils'
 import { implemented } from '../core/implement'
 
@@ -60,14 +59,6 @@ export default {
       options.props = props
       delete options.properties
     }
-    if (options.onResize) {
-      mergeToArray(options, {
-        events: {
-          onResize: options.onResize
-        }
-      }, 'events')
-      delete options.onResize
-    }
     notSupportTip(options)
   }
 }

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

@@ -3,7 +3,8 @@ import {
   CREATED,
   ONHIDE,
   ONSHOW,
-  ONLOAD
+  ONLOAD,
+  ONRESIZE
 } from '../../core/innerLifecycle'
 import { isFunction, isBrowser } from '@mpxjs/utils'
 
@@ -35,11 +36,11 @@ function onResize () {
     }
   }
 
-  const _t = getCurrentPageInstance()
+  const pageInstance = getCurrentPageInstance()
 
-  if (_t) {
-    _t.mpxPageStatus = `resize${count++}`
-    isFunction(_t.onResize) && _t.onResize(systemInfo)
+  if (pageInstance) {
+    pageInstance.mpxPageStatus = `resize${count++}`
+    pageInstance.__mpxProxy.callHook(ONRESIZE, [systemInfo])
   }
 }
 

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

@@ -1,4 +1,4 @@
-import { error } from '@mpxjs/utils'
+import { error, setByPath } from '@mpxjs/utils'
 import Mpx from '../../index'
 
 export default function proxyEventMixin () {
@@ -33,15 +33,15 @@ export default function proxyEventMixin () {
         }
       })
       return returnedValue
+    },
+    __model (expr, $event, valuePath = ['value'], filterMethod) {
+      const innerFilter = {
+        trim: val => typeof val === 'string' && val.trim()
+      }
+      const originValue = valuePath.reduce((acc, cur) => acc[cur], $event.detail)
+      const value = filterMethod ? (innerFilter[filterMethod] ? innerFilter[filterMethod](originValue) : typeof this[filterMethod] === 'function' ? this[filterMethod](originValue) : originValue) : originValue
+      setByPath(this, expr, value)
     }
-    // __model (expr, $event, valuePath = ['value'], filterMethod) {
-    //   const innerFilter = {
-    //     trim: val => typeof val === 'string' && val.trim()
-    //   }
-    //   const originValue = valuePath.reduce((acc, cur) => acc[cur], $event.detail)
-    //   const value = filterMethod ? (innerFilter[filterMethod] ? innerFilter[filterMethod](originValue) : typeof this[filterMethod] === 'function' ? this[filterMethod](originValue) : originValue) : originValue
-    //   setByPath(this, expr, value)
-    // }
   }
   return {
     methods

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

@@ -1,303 +1,59 @@
-import { BEFORECREATE } from '../../core/innerLifecycle'
-import { noop, isBoolean, dash2hump, warn, collectDataset, hump2dash } from '@mpxjs/utils'
-import { StyleSheet } from 'react-native'
-
-const _createSelectorQuery = (runCb) => {
-  return {
-    exec: (cb = noop) => {
-      runCb().then(res => {
-        cb(res)
-      })
-    },
-    in: () => {
-      warn('please use wx:ref to get NodesRef')
-    },
-    select: () => {
-      warn('please use wx:ref to get NodesRef')
-    },
-    selectAll: () => {
-      warn('please use wx:ref to get NodesRef')
-    },
-    selectViewport: () => { // 有点难实现，dimension 目前没有暴露相关 api
-      warn('please use wx:ref')
-    }
-  }
-}
-
-const flushRefFns = (nodeInstances, fns) => {
-  const mountedNodeInstance = nodeInstances
-    .map(instance => instance.getNodeInstance())
-    .filter(({ nodeRef }) => nodeRef.current) // 如果有 nodeRef，表明目前组件处于挂载中
-  if (mountedNodeInstance.length) {
-    return Promise.all(mountedNodeInstance.map(instance => flushFns(instance, fns)))
-  } else {
-    return Promise.resolve(null)
-  }
-}
-
-const flushFns = (nodeInstance, fns) => {
-  return Promise.all(fns.map(fn => fn(nodeInstance))).then((res) => {
-    return res.reduce((preVal, curVal) => {
-      return Object.assign(preVal, curVal)
-    }, {})
-  })
-}
-
-const wrapFn = (fn) => {
-  return (nodeRef) => {
-    return new Promise((resolve) => {
-      fn(nodeRef, resolve)
-    })
-  }
-}
-
-const getMeasureProps = (measureProps = []) => {
-  return wrapFn((nodeInstance, resolve) => {
-    const nodeRef = nodeInstance.nodeRef.current
-    setTimeout(() => {
-      nodeRef.measure(function (x, y, width, height, pageX, pageY) {
-        const rectAndSize = {
-          width,
-          height,
-          left: pageX,
-          top: pageY,
-          right: pageX + width,
-          bottom: pageY + height
-        }
-        const result = measureProps.reduce((preVal, key) => {
-          return Object.assign(preVal, { [key]: rectAndSize[key] || 0 })
-        }, {})
-        resolve(result)
-      })
-    }, 30) // 延迟，等待组件在rn视图上真正渲染出来
-  })
-}
-
-const getDataset = (props) => {
-  return wrapFn((nodeRef, resolve) => {
-    props = nodeRef.props.current
-    resolve({
-      dataset: collectDataset(props)
-    })
-  })
-}
-
-const getPlainProps = (config) => {
-  return wrapFn((nodeRef, resolve) => {
-    const res = {}
-    const props = nodeRef.props.current
-    config.forEach((key) => {
-      // props 属性默认不转驼峰，用户写什么格式不会变化，取值做兼容
-      res[key] = props[key] || props[hump2dash(key)] || ''
-    })
-    resolve(res)
-  })
-}
-
-const getComputedStyle = (config = []) => {
-  return wrapFn((nodeRef, resolve) => {
-    config = new Set(config)
-    const res = {}
-    const styles = nodeRef.props.current.style || []
-    const defaultStyle = nodeRef.instance.defaultStyle || {}
-    const computedStyle = StyleSheet.flatten([defaultStyle, ...styles])
-    config.forEach((key) => {
-      const humpKey = dash2hump(key)
-      // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容
-      res[key] = computedStyle[key] || computedStyle[humpKey] || ''
-    })
-
-    resolve(res)
-  })
-}
-
-const getInstanceConfig = (config) => {
-  return wrapFn((nodeRef, resolve) => {
-    const instance = nodeRef.instance
-    resolve({ [config]: instance[config] || {} })
-  })
-}
-
-const defaultScrollOffset = {
-  scrollLeft: 0,
-  scrollTop: 0,
-  scrollHeight: 0,
-  scrollWidth: 0
-}
-
-const getScrollOffset = () => {
-  return wrapFn((nodeRef, resolve) => {
-    const instance = nodeRef.instance
-    resolve((instance.scrollOffset && instance.scrollOffset.current) || defaultScrollOffset)
-  })
-}
-
-// const getScrollOffsetFallback = (cb) => {
-//   const res = {
-//     scrollLeft: 0,
-//     scrollTop: 0,
-//     scrollHeight: 0,
-//     scrollWidth: 0
-//   }
-//   cb(res)
-// }
-
-const RECT = ['left', 'top', 'right', 'bottom']
-const SIZE = ['width', 'height']
-
-function _createNodesRef (nodeRefs = []) {
-  const fields = (config, cb = noop) => {
-    const plainProps = []
-    const measureProps = []
-    const computedStyle = []
-    const fns = []
-
-    for (const key in config) {
-      const value = config[key]
-      if (Array.isArray(value) && value.length) {
-        if (key === 'properties') {
-          // wx 最终输出的 properties 字段都会转化为驼峰，所以在这里提前处理为最终的字段格式
-          plainProps.push(...value.map(v => dash2hump(v)))
-        } else if (key === 'computedStyle') {
-          const _computedStyle = config.computedStyle
-          for (let i = _computedStyle.length - 1; i >= 0; i--) {
-            const style = _computedStyle[i]
-            if (RECT.includes(style) || SIZE.includes(style)) {
-              measureProps.push(style)
-              _computedStyle.splice(i, 1)
-            }
-          }
-          if (_computedStyle.length) {
-            computedStyle.push(..._computedStyle)
-          }
-        }
-      } else if (isBoolean(value) && value) {
-        switch (key) {
-          case 'rect':
-            measureProps.push(...RECT)
-            break
-          case 'size':
-            measureProps.push(...SIZE)
-            break
-          case 'scrollOffset':
-            fns.push(getScrollOffset())
-            break
-          case 'dataset':
-            fns.push(getDataset())
-            break
-          case 'node':
-          case 'context':
-          case 'ref':
-            fns.push(getInstanceConfig(key))
-            break
-          default:
-            plainProps.push(key)
-            break
-        }
-      }
-    }
-
-    if (plainProps.length) {
-      fns.push(getPlainProps(plainProps))
-    }
-    if (measureProps.length) {
-      const nodeInstance = nodeRefs[0] && nodeRefs[0].getNodeInstance()
-      const hasMeasureFn = nodeInstance && nodeInstance.nodeRef.current && nodeInstance.nodeRef.current.measure
-      if (hasMeasureFn) {
-        fns.push(getMeasureProps(measureProps))
-      } else {
-        computedStyle.push(...measureProps)
-      }
-    }
-    if (computedStyle.length) {
-      fns.push(getComputedStyle(computedStyle))
-    }
-
-    const runCb = () => {
-      return flushRefFns(nodeRefs, fns).then((result) => {
-        // wx的数据格式：对于具体方法接受到的回调传参，如果获取的 nodeRef 只有一个，那么只需要返回一条数据而不是数组，但是 exec 里面统一都是数组
-        cb(result && result.length === 1 ? result[0] : result)
-        return result
-      })
-    }
-
-    return _createSelectorQuery(runCb)
-  }
-
-  const boundingClientRect = (cb = noop) => {
-    const config = {
-      id: true,
-      dataset: true,
-      rect: true,
-      size: true
-    }
-    return fields(config, cb)
-  }
-
-  const context = (cb = noop) => {
-    const config = {
-      context: true
-    }
-    return fields(config, cb)
-  }
-
-  const node = (cb = noop) => {
-    const config = {
-      node: true
-    }
-    return fields(config, cb)
-  }
-
-  const ref = (cb = noop) => {
-    const config = {
-      ref: true
-    }
-    return fields(config, cb)
-  }
-
-  const scrollOffset = (cb = noop) => {
-    const config = {
-      id: true,
-      dataset: true,
-      scrollOffset: true
-    }
-    return fields(config, cb)
-  }
-
-  return {
-    fields,
-    boundingClientRect,
-    context,
-    node,
-    ref,
-    scrollOffset
-  }
-}
+import { BEFORECREATE, CREATED } from '../../core/innerLifecycle'
+import { createSelectorQuery } from '@mpxjs/api-proxy'
+import { computed } from '../../observer/computed'
 
 export default function getRefsMixin () {
   return {
     [BEFORECREATE] () {
       this.__refs = {}
       this.$refs = {}
+    },
+    // __getRefs强依赖数据响应，需要在CREATED中执行
+    [CREATED] () {
       this.__getRefs()
     },
     methods: {
       __getRefs () {
         const refs = this.__getRefsData() || []
         const target = this
-        refs.forEach(({ key, type, all }) => {
-          Object.defineProperty(this.$refs, key, {
-            enumerable: true,
-            configurable: true,
-            get () {
-              const refs = target.__refs[key] || []
-              if (type === 'component') {
-                return all ? refs : refs[0]
-              } else {
-                return _createNodesRef(refs)
-              }
+        this.__selectorMap = computed(() => {
+          const selectorMap = {}
+          refs.forEach(({ key, type, sKeys }) => {
+            // sKeys 是使用 wx:ref 没有值的标记场景，支持运行时的 createSelectorQuery 的使用
+            if (sKeys) {
+              sKeys.forEach((item = {}) => {
+                const computedKey = item.key
+                const prefix = item.prefix
+                const selectors = this[computedKey] || ''
+                selectors.trim().split(/\s+/).forEach(item => {
+                  const selector = prefix + item
+                  selectorMap[selector] = selectorMap[selector] || []
+                  selectorMap[selector].push({ type, key })
+                })
+              })
+            } else {
+              selectorMap[key] = selectorMap[key] || []
+              selectorMap[key].push({ type, key })
             }
           })
+          return selectorMap
+        })
+        refs.forEach(({ key, type, all, sKeys }) => {
+          // 如果没有 sKey 说明使用的是 wx:ref="xxx" 的场景
+          if (!sKeys) {
+            Object.defineProperty(this.$refs, key, {
+              enumerable: true,
+              configurable: true,
+              get () {
+                const refs = target.__refs[key] || []
+                if (type === 'component') {
+                  return all ? refs : refs[0]
+                } else {
+                  return createSelectorQuery().in(target).select(key, all)
+                }
+              }
+            })
+          }
         })
       },
       __getRefVal (key) {
@@ -305,6 +61,28 @@ export default function getRefsMixin () {
           this.__refs[key] = []
         }
         return (instance) => instance && this.__refs[key].push(instance)
+      },
+      __selectRef (selector, refType, all = false) {
+        const splitedSelector = selector.match(/(#|\.)?\w+/g) || []
+        const refsArr = splitedSelector.map(selector => {
+          const selectorMap = this.__selectorMap?.value[selector] || []
+          const res = []
+          selectorMap.forEach(({ type, key }) => {
+            if (type === refType) {
+              const _refs = this.__refs[key] || []
+              res.push(..._refs)
+            }
+          })
+          return res
+        })
+
+        const refs = refsArr.reduce((preRefs, curRefs, curIndex) => {
+          if (curIndex === 0) return curRefs
+          curRefs = new Set(curRefs)
+          return preRefs.filter(p => curRefs.has(p))
+        }, [])
+
+        return all ? refs : refs[0]
       }
     }
   }

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

@@ -41,8 +41,8 @@ function stringifyDynamicClass (value) {
 
 const listDelimiter = /;(?![^(]*[)])/g
 const propertyDelimiter = /:(.+)/
-const rpxRegExp = /^\s*(\d+(\.\d+)?)rpx\s*$/
-const pxRegExp = /^\s*(\d+(\.\d+)?)(px)?\s*$/
+const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
+const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
 
 function parseStyleText (cssText) {
   const res = {}
@@ -106,6 +106,9 @@ export default function styleHelperMixin (type) {
         // px = rpx * (750 / 屏幕宽度)
         return value * width / 750
       },
+      __getClass (staticClass, dynamicClass) {
+        return concat(staticClass, stringifyDynamicClass(dynamicClass))
+      },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, show) {
         const result = []
         const classMap = {}

package/src/platform/createApp.ios.js

@@ -5,9 +5,15 @@ import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import * as wxLifecycle from '../platform/patch/wx/lifecycle'
 import Mpx from '../index'
 import { createElement, memo, useRef, useEffect } from 'react'
+import * as ReactNative from 'react-native'
+import { ref } from '../observer/ref'
 
 const appHooksMap = makeMap(mergeLifecycle(wxLifecycle.LIFECYCLE).app)
 
+function getOrientation (window = ReactNative.Dimensions.get('window')) {
+  return window.width > window.height ? 'landscape' : 'portrait'
+}
+
 function filterOptions (options, appData) {
   const newOptions = {}
   Object.keys(options).forEach(key => {
@@ -39,6 +45,10 @@ export default function createApp (option, config = {}) {
   const { rawOptions, currentInject } = transferOptions(option, 'app', false)
   const defaultOptions = filterOptions(spreadProp(rawOptions, 'methods'), appData)
   defaultOptions.onAppInit && defaultOptions.onAppInit()
+  // 在页面script执行前填充getApp()
+  global.getApp = function () {
+    return appData
+  }
   const pages = currentInject.getPages() || {}
   const firstPage = currentInject.firstPage
   const Stack = createNativeStackNavigator()
@@ -64,6 +74,14 @@ export default function createApp (option, config = {}) {
       global.__navigationHelper.lastFailCallback = null
     }
   }
+
+  global.__mpxAppCbs = global.__mpxAppCbs || {
+    show: [],
+    hide: [],
+    error: []
+  }
+
+  global.__mpxAppFocusedState = ref('show')
   global.__mpxOptionsMap[currentInject.moduleId] = memo(() => {
     const instanceRef = useRef(null)
     if (!instanceRef.current) {
@@ -81,7 +99,45 @@ export default function createApp (option, config = {}) {
       }
       global.__mpxEnterOptions = options
       defaultOptions.onLaunch && defaultOptions.onLaunch.call(instance, options)
+      if (defaultOptions.onShow) {
+        defaultOptions.onShow.call(instance, options)
+        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))
+      }
+
+      const changeSubscription = ReactNative.AppState.addEventListener('change', (currentState) => {
+        if (currentState === 'active') {
+          global.__mpxAppCbs.show.forEach((cb) => {
+            cb(options)
+            global.__mpxAppFocusedState.value = 'show'
+          })
+        } else if (currentState === 'background') {
+          global.__mpxAppCbs.hide.forEach((cb) => {
+            cb()
+            global.__mpxAppFocusedState.value = 'hide'
+          })
+        }
+      })
+
+      let count = 0
+      let lastOrientation = getOrientation()
+      const resizeSubScription = ReactNative.Dimensions.addEventListener('change', ({ window }) => {
+        const orientation = getOrientation(window)
+        if (orientation === lastOrientation) return
+        lastOrientation = orientation
+        global.__mpxAppFocusedState.value = `resize${count++}`
+      })
+      return () => {
+        changeSubscription()
+        resizeSubScription && resizeSubScription.remove()
+      }
     }, [])
+
     return createElement(NavigationContainer,
       {
         ref: navigationRef,
@@ -96,9 +152,7 @@ export default function createApp (option, config = {}) {
       )
     )
   })
-  global.getApp = function () {
-    return appData
-  }
+
   global.getCurrentPages = function () {
     const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
     if (navigation) {

package/src/platform/export/api.js

@@ -1,4 +1,5 @@
-import { set, del, reactive } from '../../observer/reactive'
+import { set, del, reactive, isReactive } from '../../observer/reactive'
+import { isRef } from '../../observer/ref'
 import { watch } from '../../observer/watch'
 import { injectMixins } from '../../core/injectMixins'
 
@@ -8,7 +9,9 @@ const APIs = {
   observable: reactive,
   watch,
   set,
-  delete: del
+  delete: del,
+  isReactive,
+  isRef
 }
 
 const InstanceAPIs = {

package/src/platform/export/api.web.js

@@ -1,19 +1,22 @@
-import Vue from 'vue'
+import {
+  watch,
+  reactive,
+  isReactive,
+  set,
+  del,
+  isRef
+} from 'vue'
 import { injectMixins } from '../../core/injectMixins'
 
-const vm = new Vue()
-const observable = Vue.observable.bind(Vue)
-const watch = vm.$watch.bind(vm)
-const set = Vue.set.bind(Vue)
-const del = Vue.delete.bind(Vue)
-
 const APIs = {
   injectMixins,
   mixin: injectMixins,
-  observable,
+  observable: reactive,
   watch,
   set,
-  delete: del
+  delete: del,
+  isReactive,
+  isRef
 }
 
 const InstanceAPIs = {}

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

@@ -1,7 +1,7 @@
 import MpxProxy from '../../../core/proxy'
 import builtInKeysMap from '../builtInKeysMap'
 import mergeOptions from '../../../core/mergeOptions'
-import { isFunction, error, diffAndCloneA, hasOwn, noop } from '@mpxjs/utils'
+import { error, diffAndCloneA, hasOwn, noop } from '@mpxjs/utils'
 
 function transformApiForProxy (context, currentInject) {
   const rawSetData = context.setData.bind(context)
@@ -23,7 +23,7 @@ function transformApiForProxy (context, currentInject) {
           const validProps = Object.assign({}, options.properties, options.props)
           if (context.props) {
             Object.keys(context.props).forEach((key) => {
-              if (hasOwn(validProps, key) && !isFunction(context.props[key])) {
+              if (hasOwn(validProps, key)) {
                 props[key] = context.props[key]
               }
             })
@@ -129,7 +129,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       if (rawOptions.__nativeRender__ && this.props) {
         const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
         Object.keys(this.props).forEach((key) => {
-          if (hasOwn(validProps, key) && !isFunction(this.props[key])) {
+          if (hasOwn(validProps, key)) {
             this.data[key] = this.props[key]
           }
         })
@@ -143,7 +143,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
           const newData = {}
           // 微信原生转换支付宝时，每次props更新将其设置进data模拟微信表现
           Object.keys(nextProps).forEach((key) => {
-            if (hasOwn(validProps, key) && !isFunction(nextProps[key])) {
+            if (hasOwn(validProps, key)) {
               const { diff, clone } = diffAndCloneA(nextProps[key], this.props[key])
               if (diff) newData[key] = clone
             }
@@ -153,7 +153,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
           // 由于支付宝中props透传父级setData的值，此处发生变化的属性实例一定不同，只需浅比较即可确定发生变化的属性
           // 支付宝appx2.0版本后props传递发生变化，此处获取到的nextProps和this.props以及父组件setData的数据引用都不一致，进行了两次深克隆，此处this.props和nextProps的比对需要用deep diff
           Object.keys(nextProps).forEach(key => {
-            if (hasOwn(validProps, key) && !isFunction(nextProps[key])) {
+            if (hasOwn(validProps, key)) {
               const { diff, clone } = diffAndCloneA(nextProps[key], this.props[key])
               // 由于支付宝中透传父级setData的值，此处进行深clone后赋值避免父级存储的miniRenderData部分数据在此处被响应化，在子组件对props赋值时触发父组件的render
               if (diff) this[key] = clone

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

@@ -1,11 +1,28 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, createElement, memo, forwardRef, useImperativeHandle } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../../observer/effect'
+import { watch } from '../../../observer/watch'
+import { reactive, set } from '../../../observer/reactive'
 import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
-import { BEFOREUPDATE, UPDATED, ONLOAD } from '../../../core/innerLifecycle'
+import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE } from '../../../core/innerLifecycle'
 import mergeOptions from '../../../core/mergeOptions'
 import { queueJob } from '../../../observer/scheduler'
+import { createSelectorQuery } from '@mpxjs/api-proxy'
+
+function getSystemInfo () {
+  const window = ReactNative.Dimensions.get('window')
+  const screen = ReactNative.Dimensions.get('screen')
+  return {
+    deviceOrientation: window.width > window.height ? 'landscape' : 'portrait',
+    size: {
+      screenWidth: screen.width,
+      screenHeight: screen.height,
+      windowWidth: window.width,
+      windowHeight: window.height
+    }
+  }
+}
 
 function getRootProps (props) {
   const rootProps = {}
@@ -36,6 +53,7 @@ function createEffect (proxy, components, props) {
   }
   update.id = proxy.uid
   const getComponent = (tagName) => {
+    if (tagName === 'block') return Fragment
     return components[tagName] || getByPath(ReactNative, tagName)
   }
   proxy.effect = new ReactiveEffect(() => {
@@ -51,13 +69,20 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     __getProps () {
       const propsData = {}
       const props = propsRef.current
-      if (props) {
-        Object.keys(props).forEach((key) => {
-          if (hasOwn(validProps, key) && !isFunction(props[key])) {
-            propsData[key] = props[key]
+      Object.keys(validProps).forEach((key) => {
+        if (hasOwn(props, key)) {
+          propsData[key] = props[key]
+        } else {
+          let field = validProps[key]
+          if (isFunction(field) || field === null) {
+            field = {
+              type: field
+            }
           }
-        })
-      }
+          // 处理props默认值
+          propsData[key] = field.value
+        }
+      })
       return propsData
     },
     __getSlot (name) {
@@ -111,8 +136,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     },
     triggerEvent (eventName, eventDetail) {
       const props = propsRef.current
-      const handlerName = eventName.replace(/^./, matched => matched.toUpperCase()).replace(/-([a-z])/g, (match, p1) => p1.toUpperCase())
-      const handler = props && (props['bind' + handlerName] || props['catch' + handlerName] || props['capture-bind' + handlerName] || props['capture-catch' + handlerName])
+      const handler = props && (props['bind' + eventName] || props['catch' + eventName] || props['capture-bind' + eventName] || props['capture-catch' + eventName])
       if (handler && typeof handler === 'function') {
         const timeStamp = +new Date()
         const dataset = collectDataset(props)
@@ -134,14 +158,14 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
         handler.call(this, eventObj)
       }
     },
-    selectComponent () {
-      error('selectComponent is not supported in react native, please use ref instead')
+    selectComponent (selector) {
+      return this.__selectRef(selector, 'component')
     },
-    selectAllComponents () {
-      error('selectAllComponents is not supported in react native, please use ref instead')
+    selectAllComponents (selector) {
+      return this.__selectRef(selector, 'component', true)
     },
     createSelectorQuery () {
-      error('createSelectorQuery is not supported in react native, please use ref instead')
+      return createSelectorQuery().in(this)
     },
     createIntersectionObserver () {
       error('createIntersectionObserver is not supported in react native, please use ref instead')
@@ -175,7 +199,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   proxy.created()
 
   if (type === 'page') {
-    proxy.callHook(ONLOAD, [props.route.params])
+    proxy.callHook(ONLOAD, [props.route.params || {}])
   }
 
   Object.assign(proxy, {
@@ -207,6 +231,105 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   return instance
 }
 
+function hasPageHook (mpxProxy, hookNames) {
+  const options = mpxProxy.options
+  const type = options.__type__
+  return hookNames.some(h => {
+    if (mpxProxy.hasHook(h)) {
+      return true
+    }
+    if (type === 'page') {
+      return isFunction(options.methods && options.methods[h])
+    } else if (type === 'component') {
+      return options.pageLifetimes && isFunction(options.pageLifetimes[h])
+    }
+    return false
+  })
+}
+
+const routeContext = createContext(null)
+
+const triggerPageStatusHook = (mpxProxy, event) => {
+  mpxProxy.callHook(event === 'show' ? ONSHOW : ONHIDE)
+  const pageLifetimes = mpxProxy.options.pageLifetimes
+  if (pageLifetimes) {
+    const instance = mpxProxy.target
+    isFunction(pageLifetimes[event]) && pageLifetimes[event].call(instance)
+  }
+}
+
+const triggerResizeEvent = (mpxProxy) => {
+  const type = mpxProxy.options.__type__
+  const systemInfo = getSystemInfo()
+  const target = mpxProxy.target
+  mpxProxy.callHook(ONRESIZE, [systemInfo])
+  if (type === 'page') {
+    target.onResize && target.onResize(systemInfo)
+  } else {
+    const pageLifetimes = mpxProxy.options.pageLifetimes
+    pageLifetimes && isFunction(pageLifetimes.resize) && pageLifetimes.resize.call(target, systemInfo)
+  }
+}
+
+function usePageContext (mpxProxy) {
+  const { routeName } = useContext(routeContext) || {}
+
+  useEffect(() => {
+    let unWatch
+    const hasShowHook = hasPageHook(mpxProxy, [ONSHOW, 'show'])
+    const hasHideHook = hasPageHook(mpxProxy, [ONHIDE, 'hide'])
+    const hasResizeHook = hasPageHook(mpxProxy, [ONRESIZE, 'resize'])
+    if (hasShowHook || hasHideHook || hasResizeHook) {
+      if (hasOwn(pageStatusContext, routeName)) {
+        unWatch = watch(() => pageStatusContext[routeName], (newVal) => {
+          if (newVal === 'show' || newVal === 'hide') {
+            triggerPageStatusHook(mpxProxy, newVal)
+          } else if (/^resize/.test(newVal)) {
+            triggerResizeEvent(mpxProxy)
+          }
+        })
+      }
+    }
+
+    return () => {
+      unWatch && unWatch()
+    }
+  }, [])
+}
+
+const pageStatusContext = reactive({})
+function setPageStatus (routeName, val) {
+  set(pageStatusContext, routeName, val)
+}
+
+function usePageStatus (navigation, route) {
+  let isFocused = true
+  setPageStatus(route.name, '')
+  useEffect(() => {
+    setPageStatus(route.name, 'show')
+    const focusSubscription = navigation.addListener('focus', () => {
+      setPageStatus(route.name, 'show')
+      isFocused = true
+    })
+    const blurSubscription = navigation.addListener('blur', () => {
+      setPageStatus(route.name, 'hide')
+      isFocused = false
+    })
+
+    const unWatchAppFocusedState = watch(global.__mpxAppFocusedState, (value) => {
+      if (isFocused) {
+        setPageStatus(route.name, value)
+      }
+    })
+
+    return () => {
+      focusSubscription()
+      blurSubscription()
+      unWatchAppFocusedState()
+    }
+  }, [navigation])
+}
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
@@ -232,13 +355,15 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       // 处理props更新
       propsRef.current = props
       Object.keys(props).forEach(key => {
-        if (hasOwn(validProps, key) && !isFunction(props[key])) {
+        if (hasOwn(validProps, key)) {
           instance[key] = props[key]
         }
       })
       proxy.propsUpdated()
     }
 
+    usePageContext(proxy)
+
     useEffect(() => {
       if (proxy.pendingUpdatedFlag) {
         proxy.pendingUpdatedFlag = false
@@ -265,6 +390,8 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     const { Provider } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
     const Page = ({ navigation, route }) => {
+      usePageStatus(navigation, route)
+
       useLayoutEffect(() => {
         navigation.setOptions({
           headerTitle: pageConfig.navigationBarTitleText || '',
@@ -284,7 +411,18 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
               backgroundColor: pageConfig.backgroundColor || '#ffffff'
             }
           },
-          createElement(defaultOptions, { navigation, route, pageConfig })
+          createElement(routeContext.Provider,
+            {
+              value: { routeName: route.name }
+            },
+            createElement(defaultOptions,
+              {
+                navigation,
+                route,
+                pageConfig
+              }
+            )
+          )
         )
       )
     }

package/src/platform/patch/swan/lifecycle.js

@@ -4,7 +4,8 @@ import {
   MOUNTED,
   ONSHOW,
   ONHIDE,
-  ONLOAD
+  ONLOAD,
+  ONRESIZE
 } from '../../../core/innerLifecycle'
 
 const APP_HOOKS = [
@@ -47,7 +48,8 @@ export const lifecycleProxyMap = {
   [UNMOUNTED]: ['detached', 'onUnload'],
   [ONSHOW]: ['pageShow', 'onShow'],
   [ONHIDE]: ['pageHide', 'onHide'],
-  [ONLOAD]: ['onLoad']
+  [ONLOAD]: ['onLoad'],
+  [ONRESIZE]: ['onResize']
 }
 
 export const LIFECYCLE = {

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

@@ -1,4 +1,4 @@
-import { hasOwn, noop } from '@mpxjs/utils'
+import { hasOwn, noop, isFunction } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
 import builtInKeysMap from '../builtInKeysMap'
 import mergeOptions from '../../../core/mergeOptions'
@@ -16,7 +16,7 @@ function transformProperties (properties) {
         type: null
       }
     }
-    if (typeof rawFiled === 'function') {
+    if (isFunction(rawFiled)) {
       newFiled = {
         type: rawFiled
       }

package/src/platform/patch/wx/lifecycle.js

@@ -4,7 +4,8 @@ import {
   MOUNTED,
   ONSHOW,
   ONHIDE,
-  ONLOAD
+  ONLOAD,
+  ONRESIZE
 } from '../../../core/innerLifecycle'
 
 const APP_HOOKS = [
@@ -52,7 +53,8 @@ export const lifecycleProxyMap = {
   [UNMOUNTED]: ['detached', 'onUnload'],
   [ONSHOW]: ['pageShow', 'onShow'],
   [ONHIDE]: ['pageHide', 'onHide'],
-  [ONLOAD]: ['onLoad']
+  [ONLOAD]: ['onLoad'],
+  [ONRESIZE]: ['onResize']
 }
 
 export const LIFECYCLE = {