Merge branch 'master' into fix-transSubpackageRules-to-main

Author: hiyuki

docs-vitepress/api-proxy/interface/menu/getMenuButtonBoundingClientRect.md

@@ -2,7 +2,9 @@
 
 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
 
-支持情况： 微信、支付宝
+支持情况: 微信、支付宝、React Native
+
+> **React Native 说明**: 由于 RN 应用没有微信的右上角胶囊按钮,该 API 会基于屏幕尺寸和安全区返回一个模拟的胶囊位置,可用于获取顶部导航区域的参考尺寸,保持代码兼容性。
 
 [参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html)
 

docs-vitepress/guide/rn/application-api.md

@@ -476,3 +476,24 @@ boolean
 Mpx 框架默认会使用 `ReactNative.AppState.addEventListener('change', callback)` 作为 Mpx 应用切换切换台的驱动，从而触发对于的钩子（如onhide/onshow）
 
 在需要将 RN 应用嵌入到现有的 NA 应用中时，可能会出现AppState触发时机异常的情况（例如从 RN 页面跳转到 NA 页面时），此时可以将 disableAppStateListener 设置为 true 来禁用框架内部对 AppState 的监听。但需要在合适的时机手动调用 setAppShow() 与 setAppHide() 方法来进行驱动以确保对于的钩子能正常触发。
+
+
+### 自定义设置底部虚拟按键区高度
+
+#### mpx.config.rnConfig.getBottomVirtualHeight
+
+```ts
+() => number
+```
+Android的不同系统或者手机的虚拟按键区高度可能存在不同的情况，框架内部统一使用了initialWindowMetrics.insets.bottom，如存在需要单独调整的场景可自定义设置虚拟按键区高度。
+
+```javascript
+// 例子
+import ReactNative from 'react-native'
+import { initialWindowMetrics } from 'react-native-safe-area-context'
+mpx.config.rnConfig.getBottomVirtualHeight = (bottomHeight) => {
+  const screenDimensions = ReactNative.Dimensions.get('screen')
+  const windowDimensions = ReactNative.Dimensions.get('window')
+  return Math.max(initialWindowMetrics?.insets?.bottom || 0 , (screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0, 0)
+}vscode 如何打开markdown
+```

docs-vitepress/guide/rn/component.md

@@ -401,7 +401,7 @@ movable-view的可移动区域。
 | focus                   | boolean | `false`       | 获取焦点                                                    |
 | auto-height             | boolean | `false`       | 是否自动增高，设置 auto-height 时，style.height不生效          |
 | confirm-type            | string  | `done`        | 设置键盘右下角按钮的文字，可选值为 `send`、`search`、`next`、`go`、`done`，不支持 `return`                       |
-| confirm-hold            | boolean | `false`       | 点击键盘右下角按钮时是否保持键盘不收起                           |
+| confirm-hold            |         |               | 暂不支持                         |
 | hold-keyboard           | boolean | `false`       | 输入框聚焦时，点击页面其他地方是否收起键盘 <badge type="tip" text="2.10.18+" /> |
 | cursor                  | number  |               | 指定 focus 时的光标位置                                      |
 | cursor-color            | string  |               | 光标颜色                                                    |

docs-vitepress/guide/rn/style.md

@@ -16,7 +16,7 @@
 RN 样式属性和 Web/小程序中 CSS 样式属性是相交关系：
 
 - **RN 独有属性**：`tintColor`、`writingDirection` 等，CSS 不支持
-- **CSS 独有属性**：`clip-path`、`animation`、`transition` 等，RN 不支持
+- **CSS 独有属性**：`clip-path`、`animation` 等，RN 不支持
 
 因此，在跨平台开发时：
 1. **优先使用交集属性**：尽量使用两边都支持的样式属性
@@ -1429,3 +1429,110 @@ object-fit: contain;    /* 完整显示，保持比例 */
 object-fit: cover;      /* 覆盖填充，保持比例，可能裁剪 */
 object-fit: scale-down; /* 缩小显示 */
 ```
+
+
+## 跨端动画
+基础组件 view 支持两种动画形式 createAnimation API 和 transition，
+可以通过设置 animation 属于来使用 createAnimation API 动画，通过 class 或者 style 设置 css transition 来使用 transition 动画，
+可以用过 prop enable-animation = api/transition 来指定使用 createAnimation API/transition 的动画形式，，enable-animation 设置 true 默认为 createAnimation API 形式，需要注意的是指定动画类型后，对应的动画参数也需要匹配设置，详细使用文档如下：
+
+### createAnimation 动画API
+创建一个动画实例 animation，调用实例的方法来描述动画，最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
+详情参考以下动画部分微信小程序文档，以下仅描述支持能力有差异部分：
+#### [wx.createAnimation](https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html)
+- 参数 timingFunction 不支持 step-start 和 step-end
+#### [动画实例 animation](https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html)
+- translateZ() 不支持
+- translate3d() 不支持
+- rotate3d() 不支持
+- rotateZ() 不支持
+- scaleZ() 不支持
+- scale3d() 不支持
+- animation.matrix() 不支持
+- animation.matrix3d() 不支持
+
+### CSS transition
+CSS transition 动画至少需要设置动画时长和动画属性，可通过单独属性 transition-property 和 transition-property 设置，也可以通过 transition 缩写设置
+>重要提示：transition 支持设置百分比，如 ```marginTop: 1%;marginTop: 100%;```；要注意的是起始值和结束值需设置为同一类型，同为px或者同为百分比， 支持 ```marginTop: 10px;marginTop: 100px; ```，**不支持 ```marginTop: 10px; marginTop: 100%;```**
+
+#### [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
+```css
+/**** 支持 */
+/* property name | duration */
+transition: margin-right 4s;
+/* property name | duration | delay */
+transition: margin-right 4s 1s;
+/* property name | duration | easing function */
+transition: margin-right 4s ease-in-out;
+/* property name | duration | easing function | delay */
+transition: margin-right 4s ease-in-out 1s;
+
+/* Apply to 2 properties */
+transition: margin-right 4s, color 1s;
+```
+```css
+/**** 需配合 transition-property 使用*/
+/* transition 未定义 property 时需配合 transition-property 使用，否则仅设置duration、timingFunciton等参数实际动画不生效 */
+transition: 200ms linear 50ms;
+transition: 2s, 1s;
+```
+```css
+/**** 不支持：property 不支持设置为 all  */
+transition: all 0.5s ease-out
+```
+#### [transition-property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)
+不支持设置为 all，不支持自定义
+> 支持的 property 合集有：
+> rotateX rotateY rotateZ scaleX scaleY skewX skewY translateX translateY opacity backgroundColor width height top right bottom left color borderColor borderBottomColor borderLeftColor borderRightColor borderTopColor borderTopLeftRadius borderTopRightRadius borderBottomLeftRadius borderBottomRightRadius borderRadius borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderWidth margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth padding paddingBottom paddingLeft paddingRight paddingTop
+```css
+/**** 支持 */
+transition-property: height;
+transition-property: height, color;
+```
+```css
+/**** 不支持 */
+transition-property: all;
+/* <custom-ident> values */
+transition-property: test_05;
+transition-property: -specific;
+transition-property: sliding-vertically;
+transition-property: test1, animation4;
+transition-property: all, -moz-specific, sliding;
+transition-property: inherit;
+transition-property: initial;
+transition-property: revert;
+transition-property: revert-layer;
+transition-property: unset;
+```
+#### [transition-duration](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-duration)
+```css
+/**** 支持 */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+```
+#### [transition-delay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-delay)
+```css
+/**** 支持 */
+transition-delay: 3s;
+transition-delay: 2s, 4ms;
+```
+#### [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior)
+不支持
+#### [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
+仅支持 ease、ease-in、ease-out、ease-in-out、linear、cubic-bezier()，不支持 step-start、step-end、steps()
+
+### CSS animation
+暂不支持
+
+### 动画监听事件
+#### transitionend
+- CSS transition 结束或 wx.createAnimation 结束一个阶段时触发
+- 不属于冒泡事件，需要绑定在真正发生了动画的节点上才会生效
+#### animationstart
+暂不支持
+#### animationiteration
+暂不支持
+#### animationend
+暂不支持

packages/api-proxy/@types/index.d.ts

@@ -45,9 +45,36 @@ export const offError: WechatMiniprogram.Wx['offError']
 export const createInnerAudioContext: WechatMiniprogram.Wx['createInnerAudioContext']
 export const base64ToArrayBuffer: WechatMiniprogram.Wx['base64ToArrayBuffer']
 export const arrayBufferToBase64: WechatMiniprogram.Wx['arrayBufferToBase64']
+export const openBluetoothAdapter: WechatMiniprogram.Wx['openBluetoothAdapter']
+export const closeBluetoothAdapter: WechatMiniprogram.Wx['closeBluetoothAdapter']
+export const startBluetoothDevicesDiscovery: WechatMiniprogram.Wx['startBluetoothDevicesDiscovery']
+export const stopBluetoothDevicesDiscovery: WechatMiniprogram.Wx['stopBluetoothDevicesDiscovery']
+export const onBluetoothDeviceFound: WechatMiniprogram.Wx['onBluetoothDeviceFound']
+export const offBluetoothDeviceFound: WechatMiniprogram.Wx['offBluetoothDeviceFound']
+export const getConnectedBluetoothDevices: WechatMiniprogram.Wx['getConnectedBluetoothDevices']
+export const getBluetoothAdapterState: WechatMiniprogram.Wx['getBluetoothAdapterState']
+export const onBluetoothAdapterStateChange: WechatMiniprogram.Wx['onBluetoothAdapterStateChange']
+export const offBluetoothAdapterStateChange: WechatMiniprogram.Wx['offBluetoothAdapterStateChange']
+export const getBluetoothDevices: WechatMiniprogram.Wx['getBluetoothDevices']
+export const writeBLECharacteristicValue: WechatMiniprogram.Wx['writeBLECharacteristicValue']
+export const readBLECharacteristicValue: WechatMiniprogram.Wx['readBLECharacteristicValue']
+export const notifyBLECharacteristicValueChange: WechatMiniprogram.Wx['notifyBLECharacteristicValueChange']
+export const onBLECharacteristicValueChange: WechatMiniprogram.Wx['onBLECharacteristicValueChange']
+export const offBLECharacteristicValueChange: WechatMiniprogram.Wx['offBLECharacteristicValueChange']
+export const setBLEMTU: WechatMiniprogram.Wx['setBLEMTU']
+export const getBLEDeviceRSSI: WechatMiniprogram.Wx['getBLEDeviceRSSI']
+export const getBLEDeviceServices: WechatMiniprogram.Wx['getBLEDeviceServices']
+export const getBLEDeviceCharacteristics: WechatMiniprogram.Wx['getBLEDeviceCharacteristics']
 export const closeBLEConnection: WechatMiniprogram.Wx['closeBLEConnection']
 export const createBLEConnection: WechatMiniprogram.Wx['createBLEConnection']
 export const onBLEConnectionStateChange: WechatMiniprogram.Wx['onBLEConnectionStateChange']
+export const offBLEConnectionStateChange: WechatMiniprogram.Wx['offBLEConnectionStateChange']
+export const startWifi: WechatMiniprogram.Wx['startWifi']
+export const stopWifi: WechatMiniprogram.Wx['stopWifi']
+export const getWifiList: WechatMiniprogram.Wx['getWifiList']
+export const onGetWifiList: WechatMiniprogram.Wx['onGetWifiList']
+export const offGetWifiList: WechatMiniprogram.Wx['offGetWifiList']
+export const getConnectedWifi: WechatMiniprogram.Wx['getConnectedWifi']
 export const createCanvasContext: WechatMiniprogram.Wx['createCanvasContext']
 export const canvasToTempFilePath: WechatMiniprogram.Wx['canvasToTempFilePath']
 export const canvasGetImageData: WechatMiniprogram.Wx['canvasGetImageData']

packages/api-proxy/__tests__/rn/canIUse.spec.js

@@ -0,0 +1,82 @@
+// 测试 RN 环境下的 canIUse 函数
+import { canIUse } from '../../src/platform/api/base/rnCanIUse'
+
+describe('canIUse for RN', () => {
+  test('should support basic APIs', () => {
+    expect(canIUse('navigateTo')).toBe(true)
+    expect(canIUse('showToast')).toBe(true)
+    expect(canIUse('request')).toBe(true)
+    expect(canIUse('getSystemInfo')).toBe(true)
+    expect(canIUse('vibrateShort')).toBe(true)
+    expect(canIUse('getStorage')).toBe(true)
+  })
+
+  test('should return false for unsupported APIs', () => {
+    expect(canIUse('setClipboardData')).toBe(false)
+    expect(canIUse('getClipboardData')).toBe(false)
+    expect(canIUse('someUnsupportedApi')).toBe(false)
+    expect(canIUse('wx.someMethod')).toBe(false)
+    expect(canIUse('nonExistentApi')).toBe(false)
+    expect(canIUse('undefinedMethod')).toBe(false)
+  })
+
+  test('should support API with methods', () => {
+    expect(canIUse('request.success')).toBe(true)
+    expect(canIUse('showModal.success.confirm')).toBe(true)
+  })
+
+  test('should support object methods', () => {
+    expect(canIUse('SelectorQuery')).toBe(true)
+    expect(canIUse('SelectorQuery.select')).toBe(true)
+    expect(canIUse('Animation.rotate')).toBe(true)
+
+    // 测试 Task 类的方法
+    expect(canIUse('SocketTask')).toBe(true)
+    expect(canIUse('SocketTask.send')).toBe(true)
+    expect(canIUse('SocketTask.onMessage')).toBe(true)
+    expect(canIUse('RequestTask')).toBe(true)
+    expect(canIUse('RequestTask.abort')).toBe(true)
+  })
+
+  test('should handle invalid input', () => {
+    expect(canIUse(null)).toBe(false)
+    expect(canIUse(undefined)).toBe(false)
+    expect(canIUse(123)).toBe(false)
+  })
+
+  test('should handle ${} syntax', () => {
+    expect(canIUse('$' + '{navigateTo}')).toBe(false)
+    expect(canIUse('$' + '{showToast}')).toBe(false)
+  })
+
+  test('should dynamically detect APIs from platform exports', () => {
+    // 测试一些从 platform 导出的 API
+    expect(canIUse('base64ToArrayBuffer')).toBe(true)
+    expect(canIUse('arrayBufferToBase64')).toBe(true)
+
+    // 测试 create* 函数
+    expect(canIUse('createAnimation')).toBe(true)
+    expect(canIUse('createSelectorQuery')).toBe(true)
+    expect(canIUse('createIntersectionObserver')).toBe(true)
+  })
+
+  test('canIUse should be lightweight and fast', () => {
+    const { canIUse } = require('../../src/platform/api/base/rnCanIUse')
+
+    const start = Date.now()
+
+    // 执行 1000 次 canIUse 调用
+    for (let i = 0; i < 1000; i++) {
+      canIUse('getStorage')
+      canIUse('request')
+      canIUse('SelectorQuery.select')
+    }
+
+    const duration = Date.now() - start
+
+    // 应该非常快（< 100ms）
+    expect(duration).toBeLessThan(100)
+
+    console.log(`1000 次 canIUse 调用耗时: ${duration}ms`)
+  })
+})

packages/api-proxy/package.json

@@ -46,7 +46,9 @@
     "react-native-device-info": "*",
     "react-native-get-location": "*",
     "react-native-haptic-feedback": "*",
-    "react-native-safe-area-context": "*"
+    "react-native-safe-area-context": "*",
+    "react-native-ble-manager": "*",
+    "react-native-wifi-reborn": "*"
   },
   "peerDependenciesMeta": {
     "@react-native-async-storage/async-storage": {
@@ -66,6 +68,12 @@
     },
     "react-native-haptic-feedback": {
       "optional": true
+    },
+    "react-native-ble-manager": {
+      "optional": true
+    },
+    "react-native-wifi-reborn": {
+      "optional": true
     }
   }
 }

packages/api-proxy/src/platform/api/base/index.ios.js

@@ -1 +1,2 @@
 export * from './index.web'
+export { canIUse } from './rnCanIUse'

packages/api-proxy/src/platform/api/base/index.web.js

@@ -1,10 +1,7 @@
 import { fromByteArray, toByteArray } from './base64'
 
 function base64ToArrayBuffer (base64) {
-  if (__mpx_mode__ === 'web') {
-    return toByteArray(base64)?.buffer
-  }
-  return toByteArray(base64)
+  return toByteArray(base64)?.buffer // 判断了一下，RN下也是要.buffer才是buffer类型
 }
 
 function arrayBufferToBase64 (arrayBuffer) {