Merge branch 'master' into feat-preview-image-add-current

Author: hiyuki

docs-vitepress/api/app-config.md

@@ -158,7 +158,7 @@ mpx.config.webRouteConfig = {
 ```
 
 ## webConfig
-web 环境下的一些配置，如路由模式，页面切换动画效果等
+web 环境下的一些配置，如路由模式
 
 - **用法**:
 ```js
@@ -169,3 +169,4 @@ mpx.config.webConfig.routeConfig = {
 // 禁用页面切换动画
 mpx.config.webConfig.disablePageTransition = true
 ```
+此处的 `disablePageTransition` 后续将被废弃，请使用编译阶段的[disablePageTransition](./compile.md#webconfig)进行配置

docs-vitepress/api/compile.md

@@ -824,8 +824,17 @@ module.exports = defineConfig({
 
 transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换逻辑，常见的方式有转换为 vw 或转换为 rem
 
+`{useSSR: boolean}`
+
+useSSR 默认值为 `false`，当 SSR 模式下使用异步分包时，需要将 useSSR 设置为 `true`, 其他场景不需要。
+
+`{disablePageTransition: boolean}`
+
+用于配置禁用/开启页面切换动画，默认禁用
+
+
 ```js
-// vue.config.js
+// mpx.config.js
 module.exports = defineConfig({
   pluginOptions: {
     mpx: {
@@ -834,7 +843,11 @@ module.exports = defineConfig({
           transRpxFn: function (match, $1) {
             if ($1 === '0') return $1
             return `${$1 * +(100 / 750).toFixed(8)}vw`
-          }
+          },
+          // 当 SSR 模式下使用异步分包时
+          useSSR: true,
+          // 开启页面切换动画
+          disablePageTransition: false
         }
       }
     }

docs-vitepress/guide/advance/platform.md

@@ -630,7 +630,7 @@ onShow|是
 onHide|是
 onUnload|是
 onError|是
-onServerPrefetch｜是
+onServerPrefetch|是
 created|是
 attached|是
 ready|是

docs-vitepress/guide/platform/rn.md

@@ -183,7 +183,6 @@ RN:
 > 1. 只有父级 view 节点的文本样式可以被子 text 节点继承；
 > 2. view 节点直接包裹文本实际上等同于 view>text>文本，Mpx 框架在编译时若检测到 view 节点直接包裹文本会自动添加一层 text 节点；
 > 3. 多级 text 节点可实现文本样式的继承，比如 text>text>文本 ；
-> 4. 若不想使用 Mpx 内部实现的 view>text>文本 这种文本样式继承，可设置`disable-default-style=true` 来关闭该继承逻辑；
 ### 简写样式属性
 在 Mpx 内对于通过 class 类来定义的样式会按照 RN 的样式规则在编译处理一遍，其中最重要的一部分就是将 RN 不支持简写属性按约定的规则转换成 RN 能支持多属性结构。
 
@@ -682,7 +681,7 @@ Mpx 输出 React Native 支持以下模版指令。
 注意事项
 
 1. 目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来
-2. 若使用 scroll-into-view 属性，需要 id 对应的组件节点添加 wx:ref 标记，否则无法正常滚动
+2. 若使用 scroll-into-view 属性，需要 id 对应的组件节点添加 wx:ref 标记，否则无法正常滚动。另外组件节点需要是内置基础组件，自定义组件暂不支持。
 3. simultaneous-handlers 为 RN 环境特有属性，具体含义可参考[react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture)
 4. wait-for  为 RN 环境特有属性，具体含义可参考[react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail)
 
@@ -707,7 +706,9 @@ Mpx 输出 React Native 支持以下模版指令。
 | next-margin             | String  | `0`                 | 后边距，可用于露出后一项的一小部分，接受px |
 | scale                   | Boolean  | `false`            | 滑动时是否开启前后元素缩小,默认是缩放0.7倍, 暂不支持自定义 |
 | easing-function         | String  | `linear`      | 支持 linear、easeInCubic、easeOutCubic、easeInOutCubic|
-| bindchange              | eventhandle|   无          | current 改变时会触发 change 事件，`event.detail = {current, source}`|
+| simultaneous-handlers              | `Array<object>`|   []          | RN环境特有属性，主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 swiper 组件|
+| wait-for              | `Array<object>`|   []          | RN环境特有属性，主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 swiper 组件|
+| disableGesture              | Boolean|   false       | 禁用 swiper 滑动手势。若开启用户无法通过手势滑动 swiper，只能通过开启 autoPlay 进行自动轮播|
 
 
 
@@ -979,6 +980,34 @@ movable-view的可移动区域。
 | bindlinechange       | 输入框行数变化时调用，`event.detail = { height: 0, lineCount: 0 }`，不支持 `heightRpx`    |
 | bind:selectionchange | 选区改变事件, `event.detail = {selectionStart, selectionEnd}`                                         |
 
+#### progress
+进度条。
+
+属性
+
+| 属性名                   | 类型     | 默认值         | 说明                                                       |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| percent                 | Number  | `0`           | 百分比进度，范围0-100                                         |
+| stroke-width            | Number\|String | `6`   | 进度条线的宽度，单位px                                        |
+| color                   | String  |               | 进度条颜色（已废弃，请使用 activeColor）                        |
+| activeColor             | String  | `#09BB07`     | 已选择的进度条的颜色                                           |
+| backgroundColor         | String  | `#EBEBEB`     | 未选择的进度条的颜色                                           |
+| active                  | Boolean | `false`       | 进度条从左往右的动画                                           |
+| active-mode             | String  | `backwards`   | 动画播放模式，`backwards`: 从头开始播放；`forwards`: 从上次结束点接着播放 |
+| duration                | Number  | `30`          | 进度增加1%所需毫秒数                                          |
+
+事件
+
+| 事件名           | 说明                                                 |
+| ----------------| --------------------------------------------------- |
+| bindactiveend   | 动画完成时触发，`event.detail = { percent }`            |
+
+注意事项
+
+1. 不支持 `show-info` 属性，即不支持在进度条右侧显示百分比
+2. 不支持 `border-radius` 属性自定义圆角大小
+3. 不支持 `font-size` 属性设置右侧百分比字体大小
+
 #### picker-view
 
 嵌入页面的滚动选择器。其中只可放置 [*picker-view-column*](#picker-view-column) 组件，其它节点不会显示
@@ -1001,11 +1030,11 @@ movable-view的可移动区域。
 
 - 触感反馈回调方法
 
-通过在全局注册 `mpx.config.rnConfig.pickerVibrate` 方法，在每次滚动选择时会调用该方法。
+通过在全局注册 `mpx.config.rnConfig.onPickerVibrate` 方法，在每次滚动选择时会调用该方法。
 
 | 注册触感方法名           | 类型          | 说明                |
 | ----------------------| --------------| ------------------- |
-| pickerVibrate         | Function      | 注册自定义触感反馈方法。调用时机：在每次滚动选择时会调用该方法。可以在方法内自定义实现类似 iOS 端原生表盘的振动触感。    |
+| onPickerVibrate         | Function      | 注册自定义触感反馈方法。调用时机：在每次滚动选择时会调用该方法。可以在方法内自定义实现类似 iOS 端原生表盘的振动触感。    |
 
 #### picker-view-column
 
@@ -2590,6 +2619,21 @@ mpx.config.rnConfig.downloadChunkAsync = function (packages) {
 }
 ```
 
+针对异步分包加载异常的场景：
+
+* 异步组件加载失败：微信小程序提供了 [`wx.onLazyLoadError`](https://developers.weixin.qq.com/miniprogram/dev/api/base/app/app-event/wx.onLazyLoadError.html) 的全局 api 来监听异步组件加载失败，这个 api 同样在Mpx转RN场景下生效；
+* 异步页面加载失败：微信小程序未提供相关的监听异常的 api，Mpx转RN提供了一个额外的全局监听函数：
+
+```javascript
+// RN 场景下监听异步页面加载失败的全局配置
+mpx.config.rnConfig.onLazyLoadPageError = function (error) {
+  console.log(
+    error.subpackage, // 加载失败的分包名
+    error.errType // 加载失败的类型：'timeout' | 'fail'
+  )
+}
+```
+
 此外针对Mpx转RN的场景，还提供了一些异步分包的配置选项：
 
 ```javascript
@@ -2650,7 +2694,7 @@ module.exports = defineConfig({
 其参数为当前页面的 onShareAppMessage 钩子返回内容，如果返回返回内容中包含 promise，将会在 fulfilled 后将其结果合并再触发 onShareAppMessage
 
 `(shareInfo: { title: string, path: string, imageUrl?: string }) => void`
- 
+
 
 
 #### 路由
@@ -2712,4 +2756,4 @@ module.exports = defineConfig({
 可在此方法中返回修改后的 dimensions，如果无返回或返回undefined，则以入参作为返回值
 
 
-例如在折叠屏中我们期望只在其中一半屏上展示，可在customDimensions中判断当前是否为折叠屏展开状态，如果是则将 ScreenWidth 设置为原来的一半。
+例如在折叠屏中我们期望只在其中一半屏上展示，可在customDimensions中判断当前是否为折叠屏展开状态，如果是则将 ScreenWidth 设置为原来的一半。

lerna.json

@@ -1,3 +1,3 @@
 {
-  "version": "2.10.12"
+  "version": "2.10.14"
 }

packages/api-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.10.8",
+  "version": "2.10.13",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/didi/mpx#readme",
   "dependencies": {
-    "@mpxjs/utils": "^2.10.8",
+    "@mpxjs/utils": "^2.10.13",
     "axios": "^1.7.3"
   },
   "peerDependencies": {

packages/api-proxy/src/platform/api/create-selector-query/rnNodesRef.js

@@ -41,10 +41,11 @@ const wrapFn = (fn) => {
 const getMeasureProps = (measureProps = []) => {
   return wrapFn((nodeInstance, resolve) => {
     const nodeRef = nodeInstance.nodeRef.current
-    const navigation = getFocusedNavigation()
+    const navigation = getFocusedNavigation() || {}
     setTimeout(() => {
       nodeRef.measure(function (x, y, width, height, pageX, pageY) {
-        pageY = pageY - navigation.layout.top
+        const layout = navigation.layout || {}
+        pageY = pageY - (layout.top || 0)
         const rectAndSize = {
           width,
           height,

packages/core/@types/index.d.ts

@@ -121,10 +121,11 @@ interface Context {
   createSelectorQuery: WechatMiniprogram.Component.InstanceMethods<Record<string, any>>['createSelectorQuery']
   createIntersectionObserver: WechatMiniprogram.Component.InstanceMethods<Record<string, any>>['createIntersectionObserver'],
   getPageId: WechatMiniprogram.Component.InstanceMethods<Record<string, any>>['getPageId']
+  getOpenerEventChannel: WechatMiniprogram.Component.InstanceMethods<Record<string, any>>['getOpenerEventChannel']
 }
 type ExtendedComponentOptions = {
-  disconnectOnUnmounted: boolean
-  shallowReactivePattern: RegExp
+  disconnectOnUnmounted?: boolean
+  shallowReactivePattern?: RegExp
 } & WechatMiniprogram.Component.ComponentOptions
 
 interface ComponentOpt<D extends Data, P extends Properties, C, M extends Methods, Mi extends Array<any>, S extends Record<any, any>> extends Partial<WechatMiniprogram.Component.Lifetimes & WechatMiniprogram.Component.OtherOption> {
@@ -274,7 +275,7 @@ export interface RnConfig {
    *
    * @param state 当前的导航状态对象
    */
-  onStateChange?: (state: Record<string, any>) => void;
+  onStateChange?: (state: Record<string, any>) => void
 
   /**
    * 用于获取初始路由配置的函数。
@@ -286,7 +287,7 @@ export interface RnConfig {
    */
   parseAppProps?: (
     props: Record<string, any>
-  ) => { initialRouteName?: string; initialParams?: any } | void;
+  ) => { initialRouteName?: string; initialParams?: any } | void
 
   /**
    * 页面栈长度为 1（即根页面）且用户尝试退出 App 时触发。
@@ -295,20 +296,20 @@ export interface RnConfig {
    * - `true`：允许退出应用
    * - `false`：阻止退出应用
    */
-  onAppBack?: () => boolean;
+  onAppBack?: () => boolean
 
   /**
    * 是否禁用框架内部的 AppStateChange 监听。
    */
-  disableAppStateListener?: boolean;
+  disableAppStateListener?: boolean
 
   /**
    * 控制首页回退按钮是否展示，并监听点击事件。
    *
    * 如果绑定该函数，则首页显示返回按钮，点击后调用该函数作为回调。
    * 如需返回，请在函数内部手动调用 `back()`。
    */
-  onStackTopBack?: () => void;
+  onStackTopBack?: () => void
 
   /**
    * 容器实现的 open-type 能力集合。
@@ -324,16 +325,26 @@ export interface RnConfig {
      * @returns `void`
      */
     onShareAppMessage?: (shareInfo: {
-      title: string;
-      path: string;
-      imageUrl?: string;
-    }) => void;
-  };
+      title: string
+      path: string
+      imageUrl?: string
+    }) => void
+  }
 
   /**
    * 在使用 picker-view-column 时，触发短震动反馈。
    */
-  pickerVibrate?: () => void;
+  onPickerVibrate?: () => void
+
+  /**
+   * 分包页面加载失败时触发
+   * @param subpackage 失败分包名
+   * @param errType 失败类型
+   */
+  onLazyLoadPageError?: (error: {
+    subpackage: string
+    errType: 'timeout' | 'fail'
+  }) => void
 
   /**
    * 自定义屏幕尺寸信息，用于 mpx style 渲染等依赖尺寸的功能。
@@ -343,7 +354,7 @@ export interface RnConfig {
    */
   customDimensions?: <T extends { window: ScaledSize; screen: ScaledSize }>(
     dimensions: T
-  ) => T | void;
+  ) => T | void
 
   /**
    * 异步分包加载配置。
@@ -352,18 +363,18 @@ export interface RnConfig {
     /**
      * 加载超时时长配置，单位为毫秒。
      */
-    timeout: number;
+    timeout: number
 
     /**
      * 异步分包页面加载超时或失败时，自定义兜底页面文件路径。
      */
-    fallback: string;
+    fallback: string
 
     /**
      * 异步分包页面加载时，自定义 loading 页面文件路径。
      */
-    loading: string;
-  };
+    loading: string
+  }
 
   /**
    * 加载并执行异步分包的方法。
@@ -373,14 +384,14 @@ export interface RnConfig {
    * @param params.package 分包名
    * @returns Promise，表示加载完成
    */
-  loadChunkAsync?: (params: { url: string; package: string }) => Promise<any>;
+  loadChunkAsync?: (params: { url: string; package: string }) => Promise<any>
 
   /**
    * 下载多个异步分包的方法（不执行）。
    *
    * @param packages 分包名数组
    */
-  downloadChunkAsync?: (packages: Array<string>) => void;
+  downloadChunkAsync?: (packages: Array<string>) => void
 }
 
 interface MpxConfig {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.12",
+  "version": "2.10.13",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.10.8",
+    "@mpxjs/utils": "^2.10.13",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },

packages/core/src/core/proxy.js

@@ -334,7 +334,8 @@ export default class MpxProxy {
           selectAllComponents: this.target.selectAllComponents.bind(this.target),
           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)
+          getPageId: this.target.getPageId.bind(this.target),
+          getOpenerEventChannel: this.target.getOpenerEventChannel.bind(this.target)
         }
       ])
       if (!isObject(setupResult)) {
@@ -501,11 +502,19 @@ export default class MpxProxy {
     const hooks = this.hooks[hookName] || []
     let result
     if (isFunction(hook) && !hooksOnly) {
+      const setContext = hookName !== BEFORECREATE
+      if (setContext) {
+        setCurrentInstance(this)
+      }
       result = callWithErrorHandling(hook.bind(this.target), this, `${hookName} hook`, params)
+      if (setContext) {
+        unsetCurrentInstance()
+      }
     }
     hooks.forEach((hook) => {
       result = params ? hook(...params) : hook()
     })
+
     return result
   }