@mpxjs/webpack-plugin 2.10.18-beta.1 → 2.10.18-beta.10-titlebar

package/lib/index.js

@@ -654,7 +654,7 @@ class MpxWebpackPlugin {
           }, (chunk, set) => {
             compilation.addRuntimeModule(
               chunk,
-              new LoadAsyncChunkModule(this.options.rnConfig && this.options.rnConfig.asyncChunk && this.options.rnConfig.asyncChunk.timeout)
+              new LoadAsyncChunkModule()
             )
             return true
           })

package/lib/platform/style/wx/index.js

@@ -422,7 +422,7 @@ module.exports = function getSpec({ warn, error }) {
     if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value }
     const values = parseValues(value)
     // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
-    values.sort()
+    // values.sort()
     const transform = []
     values.forEach(item => {
       const match = item.match(/([/\w]+)\((.+)\)/)

package/lib/platform/template/wx/component-config/titlebar.js

@@ -0,0 +1,12 @@
+const TAG_NAME = 'titlebar'
+
+module.exports = function () {
+  return {
+    // 匹配标签名，可传递正则
+    test: TAG_NAME,
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-titlebar'
+    }
+  }
+}

package/lib/react/LoadAsyncChunkModule.js

@@ -3,9 +3,8 @@ const Template = require('webpack/lib/Template')
 const HelperRuntimeModule = require('webpack/lib/runtime/HelperRuntimeModule')
 
 class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
-  constructor (timeout) {
+  constructor () {
     super('load async chunk')
-    this.timeout = timeout || 10000
   }
 
   generate () {
@@ -32,7 +31,7 @@ class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
           ]),
           '}',
           'inProgress[url] = [done]',
-          'var callback = function (type, result) {',
+          'var callback = function (type) {',
           Template.indent([
             'var event = {',
             Template.indent([
@@ -45,7 +44,6 @@ class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
           ]),
           Template.indent([
             'var doneFns = inProgress[url]',
-            'clearTimeout(timeout)',
             'delete inProgress[url]',
             `doneFns && doneFns.forEach(${runtimeTemplate.returningFunction(
               'fn(event)',
@@ -53,7 +51,6 @@ class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
             )})`
           ]),
           '}',
-          `var timeout = setTimeout(callback.bind(null, 'timeout'), ${this.timeout})`,
           `var loadChunkAsyncFn = ${RuntimeGlobals.global}.__mpx.config.rnConfig && ${RuntimeGlobals.global}.__mpx.config.rnConfig.loadChunkAsync`,
           'try {',
           Template.indent([

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -145,7 +145,10 @@ const Input = forwardRef((props, ref) => {
     };
     const setKeyboardAvoidContext = () => {
         if (keyboardAvoid) {
-            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, holdKeyboard, readyToShow: true };
+            // readyToShow 仅在从另一个输入框切换聚焦时为 true（ref 不同），
+            // 避免同一个输入框重复调用（onTouchStart + useEffect）或单次聚焦时误设为 true 导致无法正常失焦
+            const readyToShow = !!(keyboardAvoid.current && keyboardAvoid.current.ref !== nodeRef);
+            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, holdKeyboard, readyToShow };
         }
     };
     const onTouchStart = () => {

package/lib/runtime/components/react/mpx-input.tsx

@@ -54,7 +54,7 @@ import {
   NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid } from './utils'
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
@@ -285,7 +285,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const setKeyboardAvoidContext = () => {
     if (keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, holdKeyboard, readyToShow: true }
+      // readyToShow 仅在从另一个输入框切换聚焦时为 true（ref 不同），
+      // 避免同一个输入框重复调用（onTouchStart + useEffect）或单次聚焦时误设为 true 导致无法正常失焦
+      const readyToShow = !!(keyboardAvoid.current && keyboardAvoid.current.ref !== nodeRef)
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, holdKeyboard, readyToShow }
     }
   }
 
@@ -469,12 +472,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       : (nodeRef.current as TextInput)?.blur()
   }, [isAutoFocus])
 
-  // 使用 multiline 来修复光标位置问题
-  // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
-  // 这个问题只在 Android 上出现
-  // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
-  const needMultilineFix = isAndroid && !multiline
-
   const innerProps = useInnerProps(
     extendObject(
       {},
@@ -498,7 +495,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: multiline || needMultilineFix,
+        multiline: !!multiline,
         onTouchStart,
         onTouchEnd,
         onFocus,
@@ -508,7 +505,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
       },
-      needMultilineFix ? { numberOfLines: 1 } : {},
       !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
     ),
     [

package/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -136,6 +136,16 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }
   }, [])
 
+  // `contentOffset` prop sets visual position but does not fire scroll events,
+  // so `offsetYShared` (from `useScrollViewOffset`) stays at 0 until the user scrolls.
+  // Directly sync it whenever `itemRawH` is established so wheel animation renders correctly.
+  useEffect(() => {
+    if (!itemRawH || dragging.current || scrolling.current) {
+      return
+    }
+    offsetYShared.value = activeIndex.current * itemRawH
+  }, [itemRawH])
+
   useEffect(() => {
     if (
       !scrollViewRef.current ||

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -79,6 +79,7 @@ interface SwiperProps {
   disableGesture?: boolean
   'display-multiple-items'?: number
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindchangestart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 /**
@@ -159,7 +160,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     circular = false,
     disableGesture = false,
     current: propCurrent = 0,
-    bindchange
+    bindchange,
+    bindchangestart
   } = props
 
   const dotCommonStyle = {
@@ -425,6 +427,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         nextIndex += 1
         // targetOffset = -nextIndex * step.value - preMarginShared.value
         targetOffset = -nextIndex * step.value
+        runOnJSCallback('handleSwiperChangeStart', nextIndex)
         offset.value = withTiming(targetOffset, {
           duration: easeDuration,
           easing: easeMap[easeingFunc]
@@ -438,6 +441,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           nextIndex = 0
           targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value
           // 执行动画到下一帧
+          runOnJSCallback('handleSwiperChangeStart', nextIndex)
           offset.value = withTiming(targetOffset, {
             duration: easeDuration
           }, () => {
@@ -451,6 +455,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           nextIndex = currentIndex.value + 1
           targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value
           // 执行动画到下一帧
+          runOnJSCallback('handleSwiperChangeStart', nextIndex)
           offset.value = withTiming(targetOffset, {
             duration: easeDuration,
             easing: easeMap[easeingFunc]
@@ -489,11 +494,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     bindchange && bindchange(eventData)
   }
 
+  function handleSwiperChangeStart (current: number) {
+    const eventData = getCustomEvent('changestart', {}, { detail: { current }, layoutRef: layoutRef })
+    bindchangestart && bindchangestart(eventData)
+  }
+
   const runOnJSCallbackRef = useRef({
     loop,
     pauseLoop,
     resumeLoop,
-    handleSwiperChange
+    handleSwiperChange,
+    handleSwiperChangeStart
   })
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
 
@@ -514,6 +525,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     if (targetOffset !== offset.value) {
       // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
       if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
+        runOnJSCallback('handleSwiperChangeStart', propCurrent)
         offset.value = withTiming(targetOffset, {
           duration: easeDuration,
           easing: easeMap[easeingFunc]
@@ -805,7 +817,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         const offsetHalf = computeHalf()
         if (childrenLength.value > 1 && offsetHalf) {
           const { selectedIndex } = getTargetPosition({ transdir: moveDistance } as EventEndType)
-          currentIndex.value = selectedIndex
+          if (selectedIndex !== currentIndex.value) {
+            currentIndex.value = selectedIndex
+            runOnJS(runOnJSCallback)('handleSwiperChangeStart', selectedIndex)
+          }
         }
         // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
         if (!circularShared.value) {

package/lib/runtime/components/react/utils.tsx

@@ -335,7 +335,7 @@ export function parseValues (str: string, char = ' ') {
 function parseTransform (transformStr: string) {
   const values = parseValues(transformStr)
   // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
-  values.sort()
+  // values.sort()
   const transform: { [propName: string]: string | number | number[] }[] = []
   values.forEach(item => {
     const match = item.match(/([/\w]+)\((.+)\)/)

package/lib/runtime/components/web/mpx-titlebar.vue

@@ -0,0 +1,248 @@
+<script>
+import mpx from '@mpxjs/core'
+
+const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent)
+const innerHeight = (isIOS ? 44 : 48) + 'px'
+
+const safeStyle = { paddingTop: 'var(--safe-area-inset-top)' }
+
+export default {
+  name: 'mpx-titlebar',
+  props: {
+    // 来自 app.json 中 window 的 titlebar 相关配置
+    windowConfig: {
+      type: Object,
+      default: () => global.__mpxPageConfig
+    },
+    // 来自 页面 json 中的 titlebar 相关配置，会覆盖 windowConfig
+    pageConfig: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    // 合并全局 window 配置与页面配置（页面配置覆盖全局配置）
+    cfg() {
+      return Object.assign({}, this.windowConfig || {}, this.pageConfig || {})
+    },
+    // 标题文本（兼容常见字段名）
+    titleText() {
+      return this.cfg.navigationBarTitleText || this.cfg.title || ''
+    },
+    // 背景色（兼容常见字段）
+    backgroundColor() {
+      return this.cfg.navigationBarBackgroundColor || '#ffffff'
+    },
+    // 文本颜色，微信小程序中 navigationBarTextStyle 为 white 或 black
+    textColor() {
+      const style = this.cfg.navigationBarTextStyle || 'black'
+      return style === 'white' ? '#ffffff' : '#000000'
+    },
+    // navigationStyle: 'default' | 'custom'，custom 表示需要自定义绘制
+    navigationStyle() {
+      return this.cfg.navigationStyle || 'default'
+    },
+    // 是否隐藏（navigationStyle 为 'custom' 时也应隐藏）
+    hidden() {
+      return mpx.config?.webConfig?.enableTitleBar !== true || this.navigationStyle === 'custom'
+    },
+    // 是否展示返回按钮：根据浏览器历史判断（不依赖额外 page 配置）
+    showBack() {
+      console.log('showBack', this.$router.stack.length)
+      try {
+        return this.$router.stack.length > 1
+      } catch (e) {
+        return false
+      }
+    },
+    // 安卓安全高度
+    safeAreaInsetTop() {
+      if (typeof mpx.config.webConfig.safeAreaInsetTop === 'number' && mpx.config.webConfig.safeAreaInsetTop >= 0) {
+        return mpx.config.webConfig.safeAreaInsetTop
+      }
+      return 24
+    },
+    warpStyle() {
+      return {
+        '--titlebar-height': innerHeight,
+        '--safe-area-inset-top': `${isIOS ? 'env(safe-area-inset-top, constant(safe-area-inset-top), 0px)' : this.safeAreaInsetTop + 'px'}`,
+        paddingTop: 'calc(var(--safe-area-inset-top) + var(--titlebar-height))',
+      }
+    },
+    rootStyle() {
+      return {
+        background: this.backgroundColor,
+        color: this.textColor
+      }
+    },
+    innerStyle() {
+      return {
+        height: innerHeight
+      }
+    }
+  },
+  methods: {
+    // 左侧点击：派发事件并在可回退时回退
+    onLeftClick(e) {
+      this.$emit('click-left', e)
+      if (this.showBack) {
+        try { window.history.back() } catch (err) { }
+      }
+    }
+  },
+  render(h) {
+    const leftChildren = []
+
+    // default back button (SVG) — no left slot support
+    if (this.showBack) {
+      leftChildren.push(
+        h('button', {
+          class: 'mpx-titlebar__back',
+          attrs: { 'aria-label': 'back', type: 'button' }
+        }, [
+          h('svg', {
+            attrs: {
+              viewBox: '0 0 24 24',
+              width: '20',
+              height: '20',
+              fill: 'none',
+              xmlns: 'http://www.w3.org/2000/svg',
+              focusable: 'false',
+              'aria-hidden': 'true'
+            }
+          }, [
+            h('path', {
+              attrs: {
+                d: 'M15 18l-6-6 6-6',
+                stroke: 'currentColor',
+                'stroke-width': '2',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round'
+              }
+            })
+          ])
+        ])
+      )
+    }
+
+    // center shows title; only default slot (page content) is supported
+    const centerChildren = [
+      h('div', { class: 'mpx-titlebar__title', style: { color: this.textColor } }, [this.titleText])
+    ]
+
+    // top-level wrapper: contains fixed titlebar and page content wrapper
+    return h('div', { class: 'mpx-page-warp', style: this.hidden ? {} : this.warpStyle }, [
+      this.hidden ? null : h('div', {
+        class: ['mpx-titlebar'],
+        style: this.rootStyle
+      }, [
+        h('div', { class: 'mpx-titlebar__safe', style: safeStyle }, [
+          h('div', { class: 'mpx-titlebar__inner', style: this.innerStyle }, [
+            h('div', { class: 'mpx-titlebar__left', on: { click: this.onLeftClick } }, leftChildren),
+            h('div', { class: 'mpx-titlebar__center' }, centerChildren),
+            h('div', { class: 'mpx-titlebar__right' }, [])
+          ])
+        ])
+      ]),
+      h('page', { style: { position: 'relative'} }, [this.$slots.default])
+    ])
+  }
+}
+</script>
+
+<style scoped>
+.mpx-page-warp {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+
+.mpx-titlebar--hidden {
+  display: none;
+}
+
+.mpx-titlebar__safe {
+  padding-top: var(--safe-area-inset-top);
+}
+
+.mpx-titlebar__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+
+.mpx-titlebar__left,
+.mpx-titlebar__right {
+  flex: 0 0 auto;
+  min-width: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.mpx-titlebar__center {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0 8px;
+}
+
+.mpx-titlebar__title {
+  font-size: 17px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 500;
+}
+
+.mpx-titlebar__back {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: inherit;
+  padding: 6px;
+  cursor: pointer;
+}
+
+.mpx-titlebar {
+  /* flex-shrink: 0; */
+  height: calc(var(--safe-area-inset-top) + var(--titlebar-height));
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+  /* 脱离上下文，单独渲染加速，修复安卓低端机型在页面滚动时titlebar闪烁问题 */
+  transform: translateZ(0);
+}
+
+.mpx-titlebar__content {
+  flex: 1;
+  overflow: hidden;
+  transform: translateZ(0);
+}
+
+.mpx-titlebar__scroll {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+/* SVG icon sizing and inherit color */
+.mpx-titlebar__back svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+
+.mpx-titlebar__back path {
+  stroke: currentColor;
+}
+</style>

package/lib/style-compiler/strip-conditional.js

@@ -91,7 +91,7 @@ function parse(cssString) {
   return ast
 }
 
-function evaluateCondition(condition, defs) {
+function evaluateCondition(condition, defs, filePath) {
   try {
     const keys = Object.keys(defs)
     const values = keys.map(key => defs[key])
@@ -99,12 +99,12 @@ function evaluateCondition(condition, defs) {
     const func = new Function(...keys, `return (${condition});`)
     return func(...values)
   } catch (e) {
-    console.error(`[Mpx style error]:Error evaluating condition: ${condition}`, e)
+    console.error(`[Mpx style error] File: ${filePath}, Error evaluating condition: ${condition}`, e)
     return false
   }
 }
 
-function traverseAndEvaluate(ast, defs) {
+function traverseAndEvaluate(ast, defs, filePath) {
   let output = ''
   let batchedIf = false
   function traverse(nodes) {
@@ -114,12 +114,12 @@ function traverseAndEvaluate(ast, defs) {
       } else if (node.type === 'If') {
         // 直接判断 If 节点
         batchedIf = false
-        if (evaluateCondition(node.condition, defs)) {
+        if (evaluateCondition(node.condition, defs, filePath)) {
           traverse(node.children)
           batchedIf = true
         }
       } else if (node.type === 'ElseIf' && !batchedIf) {
-        if (evaluateCondition(node.condition, defs)) {
+        if (evaluateCondition(node.condition, defs, filePath)) {
           traverse(node.children)
           batchedIf = true
         }
@@ -136,11 +136,12 @@ function traverseAndEvaluate(ast, defs) {
  *
  * @param {string} content
  * @param {Record<string, any>} defs
+ * @param {string} [filePath]
  * @returns
  */
-function stripCondition(content, defs) {
+function stripCondition(content, defs, filePath) {
   const ast = parse(content)
-  return traverseAndEvaluate(ast, defs)
+  return traverseAndEvaluate(ast, defs, filePath || 'unknown')
 }
 
 let proxyReadFileSync
@@ -185,10 +186,10 @@ function startFSStripForCss(defs) {
     if (shouldStrip(path)) {
       try {
         if (typeof content === 'string') {
-          return stripCondition(content, defs)
+          return stripCondition(content, defs, path)
         } else if (Buffer.isBuffer(content)) {
           const str = content.toString('utf-8')
-          const result = stripCondition(str, defs)
+          const result = stripCondition(str, defs, path)
           if (result !== str) {
             return Buffer.from(result, 'utf-8')
           }
@@ -215,11 +216,11 @@ function startFSStripForCss(defs) {
       if (shouldStrip(path)) {
         try {
           if (typeof data === 'string') {
-            const result = stripCondition(data, defs)
+            const result = stripCondition(data, defs, path)
             return callback(null, result)
           } else if (Buffer.isBuffer(data)) {
             const content = data.toString('utf-8')
-            const result = stripCondition(content, defs)
+            const result = stripCondition(content, defs, path)
             if (result !== content) {
               return callback(null, Buffer.from(result, 'utf-8'))
             }

package/lib/template-compiler/compiler.js

@@ -2652,7 +2652,14 @@ function getVirtualHostRoot (options, meta) {
       }
     }
     if (isWeb(mode) && ctorType === 'page') {
-      return createASTElement('page')
+      const rootView = createASTElement('mpx-titlebar', [
+        {
+          name: 'pageConfig',
+          value: '{{ this.$options.__mpxPageConfig }}'
+        }
+      ])
+      processElement(rootView, rootView, options, meta)
+      return rootView
     }
     if (isReact(mode) && ctorType === 'page') {
       const rootView = createASTElement('view', [

package/lib/web/processMainScript.js

@@ -60,7 +60,9 @@ Vue.use(VueRouter)\n`
     globalTabBar
   })
 
-  output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
+  output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default;\n`
+
+  output += `Vue.component('mpx-titlebar', require(${stringifyRequest(loaderContext, normalize.lib('runtime/components/web/mpx-titlebar.vue'))}).default);\n`
 
   output += `
 export default processAppOption({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.18-beta.1",
+  "version": "2.10.18-beta.10-titlebar",
   "description": "mpx compile core",
   "keywords": [
     "mpx"