@mpxjs/core 2.10.17 → 2.10.18

package/@types/global.d.ts

@@ -1,5 +1,5 @@
 // declaration for mpx mode
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony' | 'ks'
 
 // declaration for mpx env
 declare let __mpx_env__: string

package/@types/index.d.ts

@@ -115,7 +115,7 @@ interface Context {
   refs: ObjectOf<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>
   asyncRefs: ObjectOf<Promise<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>>
 
-  forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
+  forceUpdate (data?: object): void
 
   selectComponent: ReplaceWxComponentIns['selectComponent']
   selectAllComponents: ReplaceWxComponentIns['selectAllComponents']
@@ -204,7 +204,7 @@ export interface MpxComponentIns {
 
   $watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
-  $forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
+  $forceUpdate (data?: object): void
 
   $nextTick (fn: () => void): void
 
@@ -412,7 +412,7 @@ interface MpxConfig {
   rnConfig: RnConfig,
 }
 
-type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'
+type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'| 'ks' | 'jd' | 'dd'
 
 interface ImplementOptions {
   modes?: Array<SupportedMode>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.17",
+  "version": "2.10.18",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.10.17",
+    "@mpxjs/utils": "^2.10.18",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -113,5 +113,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "33fbd0bb8d4b83555239a8931fabb23022af0866"
+  "gitHead": "8ce11a81959cb4b807d683b14c2d0b72c3991da3"
 }

package/src/convertor/convertor.js

@@ -9,6 +9,7 @@ import wxToTtRule from './wxToTt'
 import wxToDdRule from './wxToDd'
 import wxToJdRule from './wxToJd'
 import wxToReactRule from './wxToReact'
+import wxToKsRule from './wxToKs'
 
 /**
  * 转换规则包含四点
@@ -38,7 +39,8 @@ const rulesMap = {
   wxToJd: extend({}, defaultConvertRule, wxToJdRule),
   wxToIos: extend({}, defaultConvertRule, wxToReactRule),
   wxToAndroid: extend({}, defaultConvertRule, wxToReactRule),
-  wxToHarmony: extend({}, defaultConvertRule, wxToReactRule)
+  wxToHarmony: extend({}, defaultConvertRule, wxToReactRule),
+  wxToKs: extend({}, defaultConvertRule, wxToKsRule)
 }
 
 export function getConvertRule (convertMode) {

package/src/convertor/getConvertMode.js

@@ -8,7 +8,8 @@ const convertModes = {
   'wx-dd': 'wxToDd',
   'wx-ios': 'wxToIos',
   'wx-android': 'wxToAndroid',
-  'wx-harmony': 'wxToHarmony'
+  'wx-harmony': 'wxToHarmony',
+  'wx-ks': 'wxToKs'
 }
 
 export function getConvertMode (srcMode) {

package/src/convertor/wxToKs.js

@@ -0,0 +1,21 @@
+import { error } from '@mpxjs/utils'
+
+const BEHAVIORS_MAP = [
+  'wx://form-field',
+  'wx://form-field-group',
+  'wx://form-field-button',
+  'wx://component-export'
+]
+
+export default {
+  convert (options) {
+    if (options.behaviors) {
+      options.behaviors.forEach((behavior, idx) => {
+        if (BEHAVIORS_MAP.includes(behavior)) {
+          error(`Built-in behavior "${behavior}" is not supported in ks environment!`, global.currentResource || global.currentModuleId)
+          options.behaviors.splice(idx, 1)
+        }
+      })
+    }
+  }
+}

package/src/convertor/wxToWeb.js

@@ -6,7 +6,8 @@ import {
   diffAndCloneA,
   error,
   hasOwn,
-  isDev
+  isDev,
+  getDefaultValueByType
 } from '@mpxjs/utils'
 import { implemented } from '../core/implement'
 
@@ -56,6 +57,12 @@ export default {
                   return diffAndCloneA(prop.value).clone
                 }
                 : prop.value
+            } else {
+              // 没有显式设置value时，根据type自动添加默认值，与微信小程序原生行为保持一致
+              const defaultValue = getDefaultValueByType(prop.type, 'web')
+              if (defaultValue !== undefined) {
+                newProp.default = defaultValue
+              }
             }
             props[key] = newProp
           } else {

package/src/core/proxy.js

@@ -31,8 +31,10 @@ import {
   wrapMethodsWithErrorHandling,
   warn,
   error,
-  getEnvObj
+  getEnvObj,
+  def
 } from '@mpxjs/utils'
+import { renderHelperDefs } from '../platform/builtInMixins/renderHelperMixin'
 import {
   BEFORECREATE,
   CREATED,
@@ -190,6 +192,7 @@ export default class MpxProxy {
     this.callHook(CREATED)
 
     if (!isWeb && !isReact) {
+      this.initRenderHelpers()
       this.initRender()
     }
 
@@ -335,7 +338,7 @@ export default class MpxProxy {
           createSelectorQuery: this.target.createSelectorQuery ? this.target.createSelectorQuery.bind(this.target) : envObj.createSelectorQuery.bind(envObj),
           createIntersectionObserver: this.target.createIntersectionObserver ? this.target.createIntersectionObserver.bind(this.target) : envObj.createIntersectionObserver.bind(envObj),
           getPageId: this.target.getPageId.bind(this.target),
-          getOpenerEventChannel: this.target.getOpenerEventChannel.bind(this.target)
+          getOpenerEventChannel: this.target.getOpenerEventChannel ? this.target.getOpenerEventChannel.bind(this.target) : noop
         }
       ])
       if (!isObject(setupResult)) {
@@ -728,6 +731,15 @@ export default class MpxProxy {
     this.toggleRecurse(true)
   }
 
+  initRenderHelpers () {
+    if (this.options.__nativeRender__ || __mpx_mode__ !== 'ks') return
+    Object.keys(renderHelperDefs).forEach((key) => {
+      if (!hasOwn(this.target, key)) {
+        def(this.target, key, renderHelperDefs[key])
+      }
+    })
+  }
+
   initRender () {
     if (this.options.__nativeRender__) return this.doRender()
 

package/src/helper/MpxScroll/index.js

@@ -57,8 +57,8 @@ export default class MpxScroll {
       const isIntersecting = change.isIntersecting
       this.isIntersecting = isIntersecting
       if (!isIntersecting) {
-        // 非 inter section 状态下及时清除 transtorm，以免影响正常滚动时元素的 fixed 定位
-        this.el.style.cssText = ''
+        // 非 inter section 状态下及时清除 transform，以免影响正常滚动时元素的 fixed 定位
+        this.el.style.transform = ''
         this.pullDownEventRegister && this.pullDownEventRegister.destroy()
       } else {
         this.pullDownEventRegister = new EventRegister(this.el, [
@@ -103,7 +103,12 @@ export default class MpxScroll {
 
   transformPage (distance) {
     this.translateY = distance
-    this.el.style.cssText = `transform: translateY(${distance}px)`
+    if (distance === 0) {
+      // 距离为 0 时移除 transform，避免影响页面 fixed 定位
+      this.el.style.transform = ''
+    } else {
+      this.el.style.transform = `translateY(${distance}px)`
+    }
   }
 
   onTouchEnd (e) {
@@ -219,8 +224,15 @@ export default class MpxScroll {
   }
 
   onReachBottom (onReachBottomDistance, callback) {
-    const { bottom } = this.el.getBoundingClientRect()
-    const mark = bottom - window.innerHeight <= onReachBottomDistance
+    const scrollTop = getScrollTop()
+    const scrollHeight = document.documentElement.scrollHeight
+    const clientHeight = window.innerHeight
+
+    // 使用 scrollHeight 判断实际内容高度是否超过视口，只有可滚动时才计算触底
+    const scrollable = scrollHeight > clientHeight
+    // 距离底部的距离 = 内容总高度 - (当前滚动位置 + 视口高度)
+    const distanceToBottom = scrollHeight - (scrollTop + clientHeight)
+    const mark = scrollable && (distanceToBottom <= onReachBottomDistance)
 
     if (!this.bottomReached && mark) {
       this.bottomReached = true

package/src/platform/builtInMixins/index.js

@@ -57,14 +57,18 @@ export default function getBuiltInMixins ({ type, rawOptions = {} }) {
     }
     // 此为纯增强类mixins，原生模式下不需要注入
     if (!rawOptions.__nativeRender__) {
-      bulitInMixins = bulitInMixins.concat([
-        renderHelperMixin(),
+      const enhancedMixins = [
         showMixin(type),
         i18nMixin(),
         dynamicRenderHelperMixin(),
         dynamicSlotMixin(),
         dynamicRefsMixin()
-      ])
+      ]
+      if (__mpx_mode__ !== 'ks') {
+        // ks methods 不支持 _ 或者 $ 开头的方法名，所以 ks 不走 methods mixin
+        enhancedMixins.unshift(renderHelperMixin())
+      }
+      bulitInMixins = bulitInMixins.concat(enhancedMixins)
     }
   }
   return bulitInMixins.filter(item => item)

package/src/platform/builtInMixins/pageStatusMixin.js

@@ -1,4 +1,5 @@
 import { CREATED, ONLOAD, ONSHOW, ONHIDE, ONRESIZE } from '../../core/innerLifecycle'
+import { isObject } from '@mpxjs/utils'
 
 export default function pageStatusMixin (mixinType) {
   if (mixinType === 'page') {
@@ -12,8 +13,19 @@ export default function pageStatusMixin (mixinType) {
       onResize (e) {
         this.__mpxProxy.callHook(ONRESIZE, [e])
       },
-      onLoad (query) {
-        this.__mpxProxy.callHook(ONLOAD, [query])
+      onLoad (rawQuery) {
+        if (__mpx_mode__ === 'wx' || __mpx_mode__ === 'qq' || __mpx_mode__ === 'tt') {
+          const decodedQuery = {}
+          // 处理以上平台直接透传encode的结果，给到onload第二个参数供开发者使用
+          if (isObject(rawQuery)) {
+            for (const key in rawQuery) {
+              decodedQuery[key] = decodeURIComponent(rawQuery[key])
+            }
+          }
+          this.__mpxProxy.callHook(ONLOAD, [rawQuery, decodedQuery])
+        } else {
+          this.__mpxProxy.callHook(ONLOAD, [rawQuery, rawQuery])
+        }
       }
     }
     if (__mpx_mode__ === 'ali') {

package/src/platform/builtInMixins/refsMixin.js

@@ -15,6 +15,52 @@ const setRef = function (target, ref, isAsync) {
     }
   })
 }
+const proxyMethods = ['boundingClientRect', 'scrollOffset']
+function rewriteAliCreateSelectorQuery (target) {
+  const rawCreateSelectorQuery = target.createSelectorQuery
+  target.createSelectorQuery = function (...args) {
+    let selectorQuery = rawCreateSelectorQuery.apply(target, args)
+    const cbs = []
+
+    if (typeof selectorQuery === 'undefined') {
+      // 兜底 selectorQuery 在ali为 undefined 情况
+      // 调用 createSelectorQuery时，组件实例已经被销毁，ali this._originCreateSelectorQuery 返回 undefined。导致后续 selectorQuery[name] 报错
+      // 方案：对齐微信，微信实例销毁时，其他调用正常，仅 createSelectorQuery.exec 不执行回调
+      // 复现：setTimeout 中调用，倒计时未回调时切换页面
+      selectorQuery = {}
+      // ['boundingClientRect', 'context', 'exec', 'fields', 'in', 'node', 'scrollOffset', 'select', 'selectAll', 'selectViewport', 'toImage']
+      const backupMethodKeys = Object.keys(envObj.createSelectorQuery())
+      const backupFn = function () {
+        return selectorQuery
+      }
+      backupMethodKeys.forEach(key => {
+        selectorQuery[key] = backupFn
+      })
+      return selectorQuery
+    }
+
+    proxyMethods.forEach((name) => {
+      const originalMethod = selectorQuery[name]
+      selectorQuery[name] = function (cb = noop) {
+        cbs.push(cb)
+        return originalMethod.call(this)
+      }
+    })
+
+    const originalExec = selectorQuery.exec
+    selectorQuery.exec = function (originalCb = noop) {
+      const cb = function (results) {
+        results.forEach((item, index) => {
+          cbs[index] && cbs[index](item)
+        })
+        originalCb(results)
+      }
+      return originalExec.call(this, cb)
+    }
+
+    return selectorQuery
+  }
+}
 
 export default function getRefsMixin () {
   const refsMixin = {
@@ -24,8 +70,7 @@ export default function getRefsMixin () {
       this.__getRefs()
 
       if (__mpx_mode__ === 'ali') {
-        this._originCreateSelectorQuery = this.createSelectorQuery
-        this.createSelectorQuery = this._createSelectorQuery
+        rewriteAliCreateSelectorQuery(this)
       }
     },
     methods: {
@@ -68,51 +113,7 @@ export default function getRefsMixin () {
       }
     })
 
-    const proxyMethods = ['boundingClientRect', 'scrollOffset']
-
     Object.assign(refsMixin.methods, {
-      _createSelectorQuery (...args) {
-        let selectorQuery = this._originCreateSelectorQuery(...args)
-        const cbs = []
-
-        if (typeof selectorQuery === 'undefined') {
-          // 兜底 selectorQuery 在ali为 undefined 情况
-          // 调用 createSelectorQuery时，组件实例已经被销毁，ali this._originCreateSelectorQuery 返回 undefined。导致后续 selectorQuery[name] 报错
-          // 方案：对齐微信，微信实例销毁时，其他调用正常，仅 createSelectorQuery.exec 不执行回调
-          // 复现：setTimeout 中调用，倒计时未回调时切换页面
-          selectorQuery = {}
-          // ['boundingClientRect', 'context', 'exec', 'fields', 'in', 'node', 'scrollOffset', 'select', 'selectAll', 'selectViewport', 'toImage']
-          const backupMethodKeys = Object.keys(envObj.createSelectorQuery())
-          const backupFn = function () {
-            return selectorQuery
-          }
-          backupMethodKeys.forEach(key => {
-            selectorQuery[key] = backupFn
-          })
-          return selectorQuery
-        }
-
-        proxyMethods.forEach((name) => {
-          const originalMethod = selectorQuery[name]
-          selectorQuery[name] = function (cb = noop) {
-            cbs.push(cb)
-            return originalMethod.call(this)
-          }
-        })
-
-        const originalExec = selectorQuery.exec
-        selectorQuery.exec = function (originalCb = noop) {
-          const cb = function (results) {
-            results.forEach((item, index) => {
-              cbs[index] && cbs[index](item)
-            })
-            originalCb(results)
-          }
-          return originalExec.call(this, cb)
-        }
-
-        return selectorQuery
-      },
       selectComponent (selector) {
         return this.$selectComponent(selector)
       },

package/src/platform/builtInMixins/renderHelperMixin.js

@@ -1,44 +1,46 @@
 import { getByPath, hasOwn, isObject } from '@mpxjs/utils'
 
-export default function renderHelperMixin () {
-  return {
-    methods: {
-      _i (val, handler) {
-        let i, l, keys, key
-        if (Array.isArray(val) || typeof val === 'string') {
-          for (i = 0, l = val.length; i < l; i++) {
-            handler.call(this, val[i], i)
-          }
-        } else if (typeof val === 'number') {
-          for (i = 0; i < val; i++) {
-            handler.call(this, i + 1, i)
-          }
-        } else if (isObject(val)) {
-          keys = Object.keys(val)
-          for (i = 0, l = keys.length; i < l; i++) {
-            key = keys[i]
-            handler.call(this, val[key], key, i)
-          }
-        }
-      },
-      // collect
-      _c (key, value) {
-        if (hasOwn(this.__mpxProxy.renderData, key)) {
-          return this.__mpxProxy.renderData[key]
-        }
-        if (value === undefined) {
-          value = getByPath(this, key)
-        }
-        this.__mpxProxy.renderData[key] = value
-        return value
-      },
-      // simple collect
-      _sc (key) {
-        return (this.__mpxProxy.renderData[key] = this[key])
-      },
-      _r (skipPre, vnode) {
-        this.__mpxProxy.renderWithData(skipPre, vnode)
+export const renderHelperDefs = {
+  _i (val, handler) {
+    let i, l, keys, key
+    if (Array.isArray(val) || typeof val === 'string') {
+      for (i = 0, l = val.length; i < l; i++) {
+        handler.call(this, val[i], i)
+      }
+    } else if (typeof val === 'number') {
+      for (i = 0; i < val; i++) {
+        handler.call(this, i + 1, i)
       }
+    } else if (isObject(val)) {
+      keys = Object.keys(val)
+      for (i = 0, l = keys.length; i < l; i++) {
+        key = keys[i]
+        handler.call(this, val[key], key, i)
+      }
+    }
+  },
+  // collect
+  _c (key, value) {
+    if (hasOwn(this.__mpxProxy.renderData, key)) {
+      return this.__mpxProxy.renderData[key]
+    }
+    if (value === undefined) {
+      value = getByPath(this, key)
     }
+    this.__mpxProxy.renderData[key] = value
+    return value
+  },
+  // simple collect
+  _sc (key) {
+    return (this.__mpxProxy.renderData[key] = this[key])
+  },
+  _r (skipPre, vnode) {
+    this.__mpxProxy.renderWithData(skipPre, vnode)
+  }
+}
+
+export default function renderHelperMixin () {
+  return {
+    methods: renderHelperDefs
   }
 }

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

@@ -1,33 +1,74 @@
-import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn } from '@mpxjs/utils'
-import { Dimensions, StyleSheet } from 'react-native'
+import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn, getFocusedNavigation } from '@mpxjs/utils'
+import { StyleSheet, Dimensions } from 'react-native'
+import { reactive } from '../../observer/reactive'
 import Mpx from '../../index'
 
-const rawDimensions = {
-  screen: Dimensions.get('screen'),
-  window: Dimensions.get('window')
+global.__mpxAppDimensionsInfo = {
+  window: Dimensions.get('window'),
+  screen: Dimensions.get('screen')
 }
-let width, height
+global.__mpxSizeCount = 0
+global.__mpxPageSizeCountMap = reactive({})
 
-function customDimensions (dimensions) {
+global.__GCC = function (className, classMap, classMapValueCache) {
+  if (!classMapValueCache.has(className)) {
+    const styleObj = classMap[className]?.(global.__formatValue)
+    styleObj && classMapValueCache.set(className, styleObj)
+  }
+  return classMapValueCache.get(className)
+}
+
+let dimensionsInfoInitialized = false
+function useDimensionsInfo (dimensions) {
+  dimensionsInfoInitialized = true
   if (typeof Mpx.config.rnConfig?.customDimensions === 'function') {
     dimensions = Mpx.config.rnConfig.customDimensions(dimensions) || dimensions
   }
-  width = dimensions.screen.width
-  height = dimensions.screen.height
+  global.__mpxAppDimensionsInfo.window = dimensions.window
+  global.__mpxAppDimensionsInfo.screen = dimensions.screen
 }
 
-Dimensions.addEventListener('change', customDimensions)
+function getPageSize (window = global.__mpxAppDimensionsInfo.screen) {
+  return window.width + 'x' + window.height
+}
+
+Dimensions.addEventListener('change', ({ window, screen }) => {
+  const oldScreen = getPageSize(global.__mpxAppDimensionsInfo.screen)
+  useDimensionsInfo({ window, screen })
+
+  // 对比 screen 高宽是否存在变化
+  if (getPageSize(screen) === oldScreen) return
 
+  global.__classCaches?.forEach(cache => cache?.clear())
+
+  // 更新全局和栈顶页面的标记，其他后台页面的标记在show之后更新
+  global.__mpxSizeCount++
+
+  const navigation = getFocusedNavigation()
+
+  if (navigation) {
+    global.__mpxPageSizeCountMap[navigation.pageId] = global.__mpxSizeCount
+    if (hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
+      global.__mpxPageStatusMap[navigation.pageId] = `resize${global.__mpxSizeCount}`
+    }
+  }
+})
+
+// TODO: 1 目前测试鸿蒙下折叠屏screen固定为展开状态下屏幕尺寸，仅window会变化，且window包含状态栏高度
+// TODO: 2 存在部分安卓折叠屏机型在折叠/展开切换时，Dimensions监听到的width/height尺寸错误，并触发多次问题
 function rpx (value) {
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
   // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
   // px = rpx * (750 / 屏幕宽度)
-  return value * width / 750
+  return value * screenInfo.width / 750
 }
 function vw (value) {
-  return value * width / 100
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
+  return value * screenInfo.width / 100
 }
 function vh (value) {
-  return value * height / 100
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
+  return value * screenInfo.height / 100
 }
 
 const unit = {
@@ -38,8 +79,14 @@ const unit = {
 
 const empty = {}
 
-function formatValue (value) {
-  if (width === undefined) customDimensions(rawDimensions)
+function formatValue (value, unitType) {
+  if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo)
+  if (unitType === 'hairlineWidth') {
+    return StyleSheet.hairlineWidth
+  }
+  if (unitType && typeof unit[unitType] === 'function') {
+    return unit[unitType](+value)
+  }
   const matched = unitRegExp.exec(value)
   if (matched) {
     if (!matched[2] || matched[2] === 'px') {
@@ -180,29 +227,57 @@ function isNativeStyle (style) {
   )
 }
 
+function getMediaStyle (media) {
+  if (!media || !media.length) return {}
+  const { width } = global.__mpxAppDimensionsInfo.screen
+  return media.reduce((styleObj, item) => {
+    const { options = {}, value = {} } = item
+    const { minWidth, maxWidth } = options
+    if (!isNaN(minWidth) && !isNaN(maxWidth) && width >= minWidth && width <= maxWidth) {
+      Object.assign(styleObj, value)
+    } else if (!isNaN(minWidth) && width >= minWidth) {
+      Object.assign(styleObj, value)
+    } else if (!isNaN(maxWidth) && width <= maxWidth) {
+      Object.assign(styleObj, value)
+    }
+    return styleObj
+  }, {})
+}
+
 export default function styleHelperMixin () {
   return {
     methods: {
+      __getSizeCount () {
+        return global.__mpxPageSizeCountMap[this.__pageId]
+      },
       __getClass (staticClass, dynamicClass) {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
         const isNativeStaticStyle = staticStyle && isNativeStyle(staticStyle)
         let result = isNativeStaticStyle ? [] : {}
-        const mergeResult = isNativeStaticStyle ? (o) => result.push(o) : (o) => Object.assign(result, o)
-
-        const classMap = this.__getClassMap?.() || {}
-        const appClassMap = global.__getAppClassMap?.() || {}
+        const mergeResult = isNativeStaticStyle ? (...args) => result.push(...args) : (...args) => Object.assign(result, ...args)
+        // 使用一下 __getSizeCount 触发其 get
+        this.__getSizeCount()
 
         if (staticClass || dynamicClass) {
           // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
           const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
+
           classString.split(/\s+/).forEach((className) => {
-            if (classMap[className]) {
-              mergeResult(classMap[className])
-            } else if (appClassMap[className]) {
-              // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
-              mergeResult(appClassMap[className])
+            let localStyle, appStyle
+            if (localStyle = this.__getClassStyle?.(className)) {
+              if (localStyle._media?.length) {
+                mergeResult(localStyle._default, getMediaStyle(localStyle._media))
+              } else {
+                mergeResult(localStyle)
+              }
+            } else if (appStyle = global.__getAppClassStyle?.(className)) {
+              if (appStyle._media?.length) {
+                mergeResult(appStyle._default, getMediaStyle(appStyle._media))
+              } else {
+                mergeResult(appStyle)
+              }
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
               mergeResult(this.__props[className])

package/src/platform/createApp.ios.js

@@ -1,6 +1,6 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp, getFocusedNavigation, hasOwn } from '@mpxjs/utils'
+import { makeMap, spreadProp, getFocusedNavigation, hasOwn, callWithErrorHandling } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
@@ -14,10 +14,6 @@ import MpxNav from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
-function getPageSize (window = ReactNative.Dimensions.get('window')) {
-  return window.width + 'x' + window.height
-}
-
 function filterOptions (options, appData) {
   const newOptions = {}
   Object.keys(options).forEach(key => {
@@ -74,7 +70,7 @@ export default function createApp (options) {
         )
       }
       const getComponent = () => {
-        return item.displayName ? item : item()
+        return item.displayName ? item : callWithErrorHandling(item, null, 'require page script')
       }
       if (key === initialRouteName) {
         return createElement(Stack.Screen, {
@@ -208,22 +204,9 @@ export default function createApp (options) {
         if (Mpx.config.rnConfig.disableAppStateListener) return
         onAppStateChange(state)
       })
-
-      let count = 0
-      let lastPageSize = getPageSize()
-      const resizeSubScription = ReactNative.Dimensions.addEventListener('change', ({ window }) => {
-        const pageSize = getPageSize(window)
-        if (pageSize === lastPageSize) return
-        lastPageSize = pageSize
-        const navigation = getFocusedNavigation()
-        if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
-          global.__mpxPageStatusMap[navigation.pageId] = `resize${count++}`
-        }
-      })
       return () => {
         appState.state = 'exit'
         changeSubscription && changeSubscription.remove()
-        resizeSubScription && resizeSubScription.remove()
       }
     }, [])
 

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

@@ -1,7 +1,7 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { NavigationContainer, StackActions } from '@react-navigation/native'
 import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { SafeAreaProvider, useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 export {
@@ -11,5 +11,6 @@ export {
   GestureHandlerRootView,
   PortalHost,
   SafeAreaProvider,
-  useSafeAreaInsets
+  useSafeAreaInsets,
+  initialWindowMetrics
 }

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

@@ -3,25 +3,25 @@ import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../observer/effect'
 import { watch } from '../../observer/watch'
 import { del, reactive, set } from '../../observer/reactive'
-import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, dash2hump, callWithErrorHandling, wrapMethodsWithErrorHandling, error, setFocusedNavigation } from '@mpxjs/utils'
+import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, dash2hump, callWithErrorHandling, wrapMethodsWithErrorHandling, error, setFocusedNavigation, getDefaultValueByType } from '@mpxjs/utils'
 import MpxProxy from '../../core/proxy'
 import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE, REACTHOOKSEXEC } from '../../core/innerLifecycle'
 import mergeOptions from '../../core/mergeOptions'
 import { queueJob, hasPendingJob } from '../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
-import MpxKeyboardAvoidingView from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view'
 import {
   IntersectionObserverContext,
   KeyboardAvoidContext,
   ProviderContext,
   RouteContext
 } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
-import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
+import { PortalHost, useSafeAreaInsets, initialWindowMetrics } from '../env/navigationHelper'
 import { useInnerHeaderHeight } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
+import Mpx from '../../index'
 
 function getSystemInfo () {
-  const windowDimensions = ReactNative.Dimensions.get('window')
-  const screenDimensions = ReactNative.Dimensions.get('screen')
+  const windowDimensions = global.__mpxAppDimensionsInfo.window
+  const screenDimensions = global.__mpxAppDimensionsInfo.screen
   return {
     deviceOrientation: windowDimensions.width > windowDimensions.height ? 'landscape' : 'portrait',
     size: {
@@ -172,8 +172,8 @@ const instanceProto = {
               type: field
             }
           }
-          // 处理props默认值
-          propsData[key] = field.value
+          // 处理props默认值，没有显式设置value时根据type获取默认值，与微信小程序原生行为保持一致
+          propsData[key] = hasOwn(field, 'value') ? field.value : getDefaultValueByType(field.type)
         }
       }
     })
@@ -302,6 +302,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     global.__mpxPagesMap = global.__mpxPagesMap || {}
     global.__mpxPagesMap[props.route.key] = [instance, props.navigation]
     setFocusedNavigation(props.navigation)
+    set(global.__mpxPageSizeCountMap, pageId, global.__mpxSizeCount)
     // App onLaunch 在 Page created 之前执行
     if (!global.__mpxAppHotLaunched && global.__mpxAppOnLaunch) {
       global.__mpxAppOnLaunch(props.navigation)
@@ -313,14 +314,14 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
 
   if (type === 'page') {
     const props = propsRef.current
-    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])
+    const decodedQuery = {}
+    const rawQuery = props.route.params || {}
+    if (isObject(rawQuery)) {
+      for (const key in rawQuery) {
+        decodedQuery[key] = decodeURIComponent(rawQuery[key])
       }
     }
-    proxy.callHook(ONLOAD, [loadParams])
+    proxy.callHook(ONLOAD, [rawQuery, decodedQuery])
   }
 
   Object.assign(proxy, {
@@ -375,9 +376,18 @@ const triggerPageStatusHook = (mpxProxy, event) => {
   }
 }
 
-const triggerResizeEvent = (mpxProxy) => {
-  const type = mpxProxy.options.__type__
+const triggerResizeEvent = (mpxProxy, sizeRef) => {
+  const oldSize = sizeRef.current.size
   const systemInfo = getSystemInfo()
+  const newSize = systemInfo.size
+
+  if (oldSize && oldSize.windowWidth === newSize.windowWidth && oldSize.windowHeight === newSize.windowHeight) {
+    return
+  }
+
+  Object.assign(sizeRef.current, systemInfo)
+
+  const type = mpxProxy.options.__type__
   const target = mpxProxy.target
   mpxProxy.callHook(ONRESIZE, [systemInfo])
   if (type === 'page') {
@@ -389,6 +399,8 @@ const triggerResizeEvent = (mpxProxy) => {
 }
 
 function usePageEffect (mpxProxy, pageId) {
+  const sizeRef = useRef(getSystemInfo())
+
   useEffect(() => {
     let unWatch
     const hasShowHook = hasPageHook(mpxProxy, [ONSHOW, 'show'])
@@ -399,21 +411,29 @@ function usePageEffect (mpxProxy, pageId) {
         unWatch = watch(() => pageStatusMap[pageId], (newVal) => {
           if (newVal === 'show' || newVal === 'hide') {
             triggerPageStatusHook(mpxProxy, newVal)
+            // 仅在尺寸确实变化时才触发resize事件
+            triggerResizeEvent(mpxProxy, sizeRef)
+
+            // 如果当前全局size与pagesize不一致，在show之后触发一次resize事件
+            if (newVal === 'show' && global.__mpxPageSizeCountMap[pageId] !== global.__mpxSizeCount) {
+              // 刷新__mpxPageSizeCountMap, 每个页面仅会执行一次，直接驱动render刷新
+              global.__mpxPageSizeCountMap[pageId] = global.__mpxSizeCount
+            }
           } else if (/^resize/.test(newVal)) {
-            triggerResizeEvent(mpxProxy)
+            triggerResizeEvent(mpxProxy, sizeRef)
           }
         }, { sync: true })
       }
     }
     return () => {
       unWatch && unWatch()
+      del(global.__mpxPageSizeCountMap, pageId)
     }
   }, [])
 }
 
 let pageId = 0
 const pageStatusMap = global.__mpxPageStatusMap = reactive({})
-
 function usePageStatus (navigation, pageId) {
   navigation.pageId = pageId
   if (!hasOwn(pageStatusMap, pageId)) {
@@ -486,7 +506,17 @@ function getLayoutData (headerHeight) {
   // 在横屏状态下 screen.height = window.height + bottomVirtualHeight
   // 在正常状态   screen.height =  window.height + bottomVirtualHeight + statusBarHeight
   const isLandscape = screenDimensions.height < screenDimensions.width
-  const bottomVirtualHeight = isLandscape ? screenDimensions.height - windowDimensions.height : ((screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0)
+  let bottomVirtualHeight = 0
+  if (ReactNative.Platform.OS === 'android') {
+    if (isLandscape) {
+      bottomVirtualHeight = screenDimensions.height - windowDimensions.height
+    } else {
+      bottomVirtualHeight = initialWindowMetrics?.insets?.bottom || 0
+      if (typeof mpxGlobal.__mpx.config?.rnConfig?.getBottomVirtualHeight === 'function') {
+        bottomVirtualHeight = mpxGlobal.__mpx.config?.rnConfig?.getBottomVirtualHeight() || 0
+      }
+    }
+  }
   return {
     left: 0,
     top: headerHeight,
@@ -519,7 +549,7 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     navigation.layout = getLayoutData(headerHeight)
 
     useEffect(() => {
-      const dimensionListener = ReactNative.Dimensions.addEventListener('change', ({ screen }) => {
+      const dimensionListener = ReactNative.Dimensions.addEventListener('change', ({ window, screen }) => {
         navigation.layout = getLayoutData(headerHeight)
       })
       return () => dimensionListener?.remove()
@@ -529,6 +559,8 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     usePageStatus(navigation, currentPageId)
 
     const withKeyboardAvoidingView = (element) => {
+      if (currentPageConfig.disableKeyboardAvoiding) return element
+      const MpxKeyboardAvoidingView = require('@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view').default
       return createElement(KeyboardAvoidContext.Provider,
         {
           value: keyboardAvoidRef
@@ -549,39 +581,53 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     // android存在第一次打开insets都返回为0情况，后续会触发第二次渲染后正确
     navigation.insets = useSafeAreaInsets()
     return withKeyboardAvoidingView(
-        createElement(ReactNative.View,
+      createElement(ReactNative.View,
+        {
+          style: {
+            flex: 1,
+            // 页面容器背景色
+            backgroundColor: currentPageConfig?.backgroundColorContent || '#fff',
+            // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
+            overflow: 'hidden'
+          }
+        },
+        createElement(RouteContext.Provider,
+          {
+            value: routeContextValRef.current
+          },
+          createElement(IntersectionObserverContext.Provider,
             {
-              style: {
-                flex: 1,
-                // 页面容器背景色
-                backgroundColor: currentPageConfig?.backgroundColorContent || '#fff',
-                // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
-                overflow: 'hidden'
-              }
+              value: intersectionObservers.current
             },
-            createElement(RouteContext.Provider,
-                {
-                  value: routeContextValRef.current
-                },
-                createElement(IntersectionObserverContext.Provider,
-                    {
-                      value: intersectionObservers.current
-                    },
-                    createElement(PortalHost,
-                        null,
-                        createElement(WrappedComponent, {
-                          ...props,
-                          navigation,
-                          route,
-                          id: currentPageId
-                        })
-                    )
-                )
+            createElement(PortalHost,
+              null,
+              createElement(WrappedComponent, {
+                ...props,
+                navigation,
+                route,
+                id: currentPageId
+              })
             )
+          )
         )
+      )
     )
   }
 }
+
+function updateProps (instance, props, validProps) {
+  Object.keys(validProps).forEach((key) => {
+    if (hasOwn(props, key)) {
+      instance[key] = props[key]
+    } else {
+      const altKey = hump2dash(key)
+      if (hasOwn(props, altKey)) {
+        instance[key] = props[altKey]
+      }
+    }
+  })
+}
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const componentsMap = currentInject.componentsMap
@@ -634,16 +680,14 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     if (!isFirst) {
       // 处理props更新
-      Object.keys(validProps).forEach((key) => {
-        if (hasOwn(props, key)) {
-          instance[key] = props[key]
-        } else {
-          const altKey = hump2dash(key)
-          if (hasOwn(props, altKey)) {
-            instance[key] = props[altKey]
-          }
-        }
-      })
+      if (Mpx.config.forceFlushSync) {
+        // 避免开启forceFlushSync时react报错：Cannot update a component while rendering a different component
+        Promise.resolve().then(() => {
+          updateProps(instance, props, validProps)
+        })
+      } else {
+        updateProps(instance, props, validProps)
+      }
     }
 
     useEffect(() => {