From 2ef348be11684c4d23e56184e66ff36ea2f6de75 Mon Sep 17 00:00:00 2001 From: wangcuijuan Date: Fri, 10 Jan 2025 15:59:21 +0800 Subject: [PATCH 01/10] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 4f77de9c5..8a6d08d57 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -791,21 +791,6 @@ import mpx from '@mpxjs/core' import apiProxy from '@didi/mpxjs-api-proxy' mpx.use(apiProxy, { usePromise: true }) ``` -需要在mpx项目中需要配置externals -``` -externals: { - ... - '@react-native-async-storage/async-storage': '@react-native-async-storage/async-storage', - '@react-native-clipboard/clipboard': '@react-native-clipboard/clipboard', - '@react-native-community/netinfo': '@react-native-community/netinfo', - 'react-native-device-info': 'react-native-device-info', - 'react-native-safe-area-context': 'react-native-safe-area-context', - 'react-native-reanimated': 'react-native-reanimated', - 'react-native-get-location': 'react-native-get-location', - 'react-native-haptic-feedback': 'react-native-haptic-feedback' -}, -``` -如果引用单独的api-proxy方法这种情况，需要根据下表说明是否用到以下方法，来确定是否需要配置externals，配置参考上面示例 | api方法 | 依赖的react-native三方库 | |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------| @@ -922,7 +907,7 @@ webviewBridge.navigateTo({ ``` ##### invoke示例代码 -对于业务中一些特殊的方法，需要有web与RN进行交互的这种情况，基于这种情况在mpx框架内部提供了挂在方法的能力，在webview-bridge提供了invoke通信的能力，具体使用方法如下： +对于业务中一些特殊的方法，需要有web与RN进行交互的这种情况，基于这种情况在mpx框架内部提供了挂载方法的能力，在webview-bridge提供了invoke通信的能力，具体使用方法如下： RN环境中挂载getTime的逻辑 ```javascript From 2b21fa6136aac395099ab7f4255d1c93a4927ba7 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Fri, 10 Jan 2025 17:26:11 +0800 Subject: [PATCH 02/10] =?UTF-8?q?doc:=20=E4=BF=AE=E6=94=B9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 8a6d08d57..fe1a386c7 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -122,7 +122,7 @@ ### 基础组件 目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件以及组件属性即为不支持，具体使用范围可参考如下文档 -RN环境基础组件通用属性 +基础组件通用属性 | 属性名 | 类型 | 默认值 | 说明 | | ----------------------- | ------- | ------------- | ---------------------------------------------------------- | @@ -132,6 +132,10 @@ RN环境基础组件通用属性 | parent-width | Number | | 父组件宽度，主要用于百分比计算的场景，如 width: calc(100% - 20px)，需要在外部传递父组件的宽度| | parent-height | Number | | 父组件高度，主要用于百分比计算的场景，如 height: calc(100% - 20px),需要在外部传递父组件的高度| +以上基础组件的通用属性仅在 React Native 环境中支持。在跨平台输出到小程序或 Web 时，这些属性将无法使用。 + +由于 view、text、scroll-view、image 和 input 组件都是基于 React Native 原生组件实现的，因此这些组件默认继承原生组件支持的属性。 + #### view 视图容器。 @@ -144,6 +148,7 @@ RN环境基础组件通用属性 | hover-stay-time | number | 400 | 手指松开后点击态保留时间，单位毫秒 | | enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + 事件 | 事件名 | 说明 | From d9938dae44419332b93f718a14a9ad68734d336d Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 13 Jan 2025 17:34:10 +0800 Subject: [PATCH 03/10] =?UTF-8?q?doc:=20=E4=BF=AE=E6=94=B9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/basic/event.md | 173 +++++++++++++++++++++-------- 1 file changed, 128 insertions(+), 45 deletions(-) diff --git a/docs-vuepress/guide/basic/event.md b/docs-vuepress/guide/basic/event.md index cebd6d992..c48df78ed 100644 --- a/docs-vuepress/guide/basic/event.md +++ b/docs-vuepress/guide/basic/event.md @@ -2,52 +2,135 @@ Mpx在事件处理上基于原生小程序，支持原生小程序的全部事件处理技术规范，在此基础上新增了事件处理内联传参的增强机制。 -原生小程序事件处理详情请参考[这里](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html) - -增强的内联传参能力对于传递参数的个数和类型没有特殊限制，可以传递各种字面量，可以传递组件数据，甚至可以传递for中的item和index， -当内联事件处理器中需要访问原始事件对象时，可以传递`$event`特殊关键字作为参数，在事件处理器的对应参数位置即可获取。 - -示例如下： - -```html - - - + +``` + +上述示例中，点击 inner-view 时： +- `e.target.id` 为 inner-view +- `e.currentTarget.id` 为 outer-view + +### touches 和 changedTouches + +touches 数组中每个元素包含以下属性 +| 属性 | 说明 | +|------|------| +| identifier | 触摸点的标识符 | +| pageX, pageY | 距离文档左上角的距离 | +| clientX, clientY | 距离页面可显示区域左上角的距离 | + +### detail +自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息等。点击事件的 detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。 + + +## Mpx 增强的内联传参 + +Mpx 提供了比原生小程序更强大的事件传参能力，支持以下几种传参方式： + +### 基础传参 + +```html + +a +``` + +### 模板内联传参 + +```html + +b +``` +### 传递动态参数 + +```html + + + +{{item}} +``` + +### 使用 event 对象 + +```html + +获取event对象 ``` From 6f01c681e56b435ee1ff754315ab551e23bc7f99 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 13 Jan 2025 18:51:35 +0800 Subject: [PATCH 04/10] =?UTF-8?q?doc:=20=E4=BF=AE=E6=94=B9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/basic/event.md | 145 +++++++++++++++++++++++------ docs-vuepress/guide/platform/rn.md | 10 +- 2 files changed, 120 insertions(+), 35 deletions(-) diff --git a/docs-vuepress/guide/basic/event.md b/docs-vuepress/guide/basic/event.md index c48df78ed..9e2238386 100644 --- a/docs-vuepress/guide/basic/event.md +++ b/docs-vuepress/guide/basic/event.md @@ -1,32 +1,34 @@ # 事件处理 -Mpx在事件处理上基于原生小程序，支持原生小程序的全部事件处理技术规范，在此基础上新增了事件处理内联传参的增强机制。 +Mpx 在事件处理上基于原生小程序，支持原生小程序的全部事件处理技术规范，在此基础上新增了事件处理内联传参的增强机制。 ## 事件分类 事件分为冒泡事件和非冒泡事件： + 1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递 2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递 常用事件如下: -| 事件类型 | 触发条件 | -|---------|----------| -| touchstart | 手指触摸动作开始 | -| touchmove | 手指触摸后移动 | -| touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 | -| touchend | 手指触摸动作结束 | -| tap | 手指触摸后马上离开 | -| longpress | 手指触摸后，超过350ms再离开，推荐使用 longpress 代替 longtap | -| longtap | 手指触摸后，超过350ms再离开 | - +| 事件类型 | 触发条件 | +| ----------- | -------------------------------------------------------------- | +| touchstart | 手指触摸动作开始 | +| touchmove | 手指触摸后移动 | +| touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 | +| touchend | 手指触摸动作结束 | +| tap | 手指触摸后马上离开 | +| longpress | 手指触摸后，超过 350ms 再离开，推荐使用 longpress 代替 longtap | +| longtap | 手指触摸后，超过 350ms 再离开 | ## 事件绑定方式 ### 基础绑定 + 事件绑定的写法同组件的属性，以 key、value 的形式： 1. `bind` 绑定： + ```html 点击事件 @@ -34,6 +36,7 @@ Mpx在事件处理上基于原生小程序，支持原生小程序的全部事 ``` 2. `catch` 绑定（阻止冒泡）： + ```html 阻止冒泡的点击事件 @@ -41,6 +44,7 @@ Mpx在事件处理上基于原生小程序，支持原生小程序的全部事 ``` ### 事件捕获 + 捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用 `capture-bind`、`capture-catch` 关键字： ```html @@ -52,38 +56,37 @@ Mpx在事件处理上基于原生小程序，支持原生小程序的全部事 当事件回调触发时，会收到一个事件对象，它的详细属性如下： -| 属性 | 类型 | 说明 | -|------|------|------| -| type | String | 事件类型 | -| timeStamp | Integer | 事件生成时的时间戳 | -| target | Object | 触发事件的组件的一些属性值集合 | -| currentTarget | Object | 当前组件的一些属性值集合 | -| detail | Object | 额外的信息 | -| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 | -| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 | +| 属性 | 类型 | 说明 | +| -------------- | ------- | -------------------------------------------- | +| type | String | 事件类型 | +| timeStamp | Integer | 事件生成时的时间戳 | +| target | Object | 触发事件的组件的一些属性值集合 | +| currentTarget | Object | 当前组件的一些属性值集合 | +| detail | Object | 额外的信息 | +| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 | +| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 | ### Target 和 CurrentTarget - `target` 是触发事件的源组件 - `currentTarget` 是事件绑定的当前组件 - + 两者都具备以下属性： | 属性 | 类型 | 说明 | |------|------|------| | id | String | 元素的 id 属性 | -| dataset | Object | 包含所有以 data- 开头的自定义属性的对象集合，dataset 属性会自动将 data- 后面的属性名转换为驼峰命名。 例如：data-user-name 会变成 dataset.userName | +| dataset | Object | 包含所有以 data- 开头的自定义属性的对象集合，dataset 属性会自动将 data- 后面的属性名转换为驼峰命名。 例如：data-user-name 会变成 dataset.userName | ```html outer-view - - inner-view - + inner-view ``` 上述示例中，点击 inner-view 时： + - `e.target.id` 为 inner-view - `e.currentTarget.id` 为 outer-view @@ -95,10 +98,10 @@ touches 数组中每个元素包含以下属性 | identifier | 触摸点的标识符 | | pageX, pageY | 距离文档左上角的距离 | | clientX, clientY | 距离页面可显示区域左上角的距离 | - + ### detail -自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息等。点击事件的 detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。 +自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息等。点击事件的 detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。 ## Mpx 增强的内联传参 @@ -108,22 +111,60 @@ Mpx 提供了比原生小程序更强大的事件传参能力，支持以下几 ```html -a +基础传参 + + ``` ### 模板内联传参 ```html -b +内联传参 + + ``` + ### 传递动态参数 ```html - +{{text}} -{{item}} +{{item}} + + ``` ### 使用 event 对象 @@ -131,6 +172,48 @@ Mpx 提供了比原生小程序更强大的事件传参能力，支持以下几 ```html 获取event对象 + + ``` +### 动态事件绑定 +```html + + {{item}} + + +``` diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index fe1a386c7..cd72be4f1 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -67,12 +67,12 @@ ```html @@ -90,7 +90,7 @@ ``` +更多事件相关内容可以查看 [Mpx 事件处理](./basic/event.md) + 注意事项 1. 当同一个元素上同时绑定了 catchtap 和 bindtap 事件时，两个事件都会被触发执行。但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。 From f75c1e8af3d7af2aaae4b85c70886ae2c270aa97 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 13 Jan 2025 18:56:06 +0800 Subject: [PATCH 05/10] =?UTF-8?q?doc:=20=E4=BF=AE=E6=94=B9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index cd72be4f1..6c9286f3a 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -109,7 +109,7 @@ ``` -更多事件相关内容可以查看 [Mpx 事件处理](./basic/event.md) +更多事件相关内容可以查看 [Mpx 事件处理](../basic/event.md) 注意事项 From c3dc3c7505e6b0637b68ef0ec5496236b59ac12e Mon Sep 17 00:00:00 2001 From: shangqunfeng Date: Wed, 15 Jan 2025 10:50:31 +0800 Subject: [PATCH 06/10] doc(view): add fix. --- docs-vuepress/guide/platform/rn.md | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 6c9286f3a..41a40454c 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -148,14 +148,15 @@ | hover-class | string | | 指定按下去的样式类。 | | hover-start-time | number | 50 | 按住后多久出现点击态，单位毫秒| | hover-stay-time | number | 400 | 手指松开后点击态保留时间，单位毫秒 | -| enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| +| animation | Object | undefined | 传递动画的实例， 可配合mpx.createAnimation方法一起使用| +| enable-background | Boolean | false | 是否要开启background-image、background-size和background-postion的相关计算或渲染，请根据实际情况开启 | +| enable-animation | Boolean | false | 开启要开启动画渲染，请根据实际情况开启 | +| enable-fast-image | Boolean | false | 开启后将使用 react-native-fast-image 进行图片渲染，请根据实际情况开启 | +注意事项 -事件 +1. 未使用背景图、动图或动画，请不要开启`enable-background`、`enable-animation`或`enable-fast-image`属性，会有一定的性能消耗。 -| 事件名 | 说明 | -| ----------------| --------------------------------------------------- | -| bindtap | 点击的时候触发 | #### scroll-view @@ -331,16 +332,8 @@ movable-view的可移动区域。 | 属性名 | 类型 | 默认值 | 说明 | | ----------------------- | ------- | ------------- | ---------------------------------------------------------- | | user-select | boolean | `false` | 文本是否可选。 | -| disable-default-style | boolean | `false` | 会内置默认样式，比如fontSize为16。设置`true`可以禁止默认的内置样式。 | -| enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| -事件 - - -| 事件名 | 说明 | -| ----------------| --------------------------------------------------- | -| bindtap | 点击的时候触发 | 注意事项 From 783ece9a0185bf1315207927cef164e93df104c0 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 15 Jan 2025 15:34:59 +0800 Subject: [PATCH 07/10] =?UTF-8?q?doc:=20=E4=BF=AE=E6=94=B9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 477ce94bf..7add21dbe 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -609,9 +609,9 @@ Mpx 输出 React Native 支持以下模版指令。 | hover-start-time | number | 50 | 按住后多久出现点击态，单位毫秒| | hover-stay-time | number | 400 | 手指松开后点击态保留时间，单位毫秒 | | animation | Object | undefined | 传递动画的实例， 可配合mpx.createAnimation方法一起使用| -| enable-background | Boolean | false | 是否要开启background-image、background-size和background-postion的相关计算或渲染，请根据实际情况开启 | -| enable-animation | Boolean | false | 开启要开启动画渲染，请根据实际情况开启 | -| enable-fast-image | Boolean | false | 开启后将使用 react-native-fast-image 进行图片渲染，请根据实际情况开启 | +| enable-background | Boolean | false | RN环境特有属性，是否要开启background-image、background-size和background-postion的相关计算或渲染，请根据实际情况开启 | +| enable-animation | Boolean | false | RN环境特有属性，开启要开启动画渲染，请根据实际情况开启 | +| enable-fast-image | Boolean | false | RN环境特有属性，开启后将使用 react-native-fast-image 进行图片渲染，请根据实际情况开启 | 注意事项 @@ -643,10 +643,9 @@ Mpx 输出 React Native 支持以下模版指令。 | refresher-triggered | Boolean | `false` | 设置当前下拉刷新状态,true 表示已触发 | | paging-enabled | Number | `false` | 分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置 | | show-scrollbar | Number | `true` | 滚动条显隐控制 (同时开启 enhanced 属性后生效)| -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| -| enable-trigger-intersection-observer | Boolean | [] | 是否开启intersection-observer | -| simultaneous-handlers | `Array` | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件 | -| wait-for | `Array` | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件 | +| enable-trigger-intersection-observer | Boolean | [] | RN环境特有属性，是否开启intersection-observer | +| simultaneous-handlers | `Array` | [] | RN环境特有属性，主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件 | +| wait-for | `Array` | [] | RN环境特有属性，主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件 | 事件 @@ -688,7 +687,6 @@ Mpx 输出 React Native 支持以下模版指令。 | previous-margin | String | `0` | 前边距，可用于露出前一项的一小部分，接受px | | next-margin | String | `0` | 后边距，可用于露出后一项的一小部分，接受px | | scale | Boolean | `false` | 滑动时是否开启前后元素缩小,默认是缩放0.7倍, 暂不支持自定义 | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| | easing-function | String | `linear` | 支持 linear、easeInCubic、easeOutCubic、easeInOutCubic| | bindchange | eventhandle| 无 | current 改变时会触发 change 事件，event.detail = {current, source}| @@ -817,7 +815,6 @@ movable-view的可移动区域。 | hover-class | String | | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | | hover-start-time | Number | `20` | 按住后多久出现点击态，单位毫秒 | | hover-stay-time | Number | `70` | 手指松开后点击态保留时间，单位毫秒 | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| #### label @@ -914,7 +911,7 @@ movable-view的可移动区域。 | cursor-color | String | | 光标颜色 | | selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | | selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + 事件 @@ -961,7 +958,6 @@ movable-view的可移动区域。 | cursor-color | String | | 光标颜色 | | selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | | selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| 事件 @@ -1116,8 +1112,7 @@ movable-view的可移动区域。 | ----------------------- | ------- | ------------- | ---------------------------------------------------------- | | src | String | `false` | 图片资源地址及 base64 格式数据 | | mode | String | `scaleToFill` | 图片裁剪、缩放的模式，可选值为 `scaleToFill`、`aspectFit`、`aspectFill`、`widthFix`、`heightFix`、`top`、`bottom`、`center`、`left`、`right`、`top left`、`top right`、`bottom left`、`bottom right` | -| enable-offset | Boolean | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| -| enable-fast-image | Boolean | `false` | 开启后将使用 react-native-fast-image 进行图片渲染，请根据实际情况开启 | +| enable-fast-image | Boolean | `false` | RN环境特有属性，开启后将使用 react-native-fast-image 进行图片渲染，请根据实际情况开启 | 事件 From 5555fb9b0a2f5717247270c21904f21d9e42f9b5 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 15 Jan 2025 15:52:55 +0800 Subject: [PATCH 08/10] =?UTF-8?q?doc:=20=E4=BF=AE=E6=94=B9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 7add21dbe..bbfc687be 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -912,7 +912,6 @@ movable-view的可移动区域。 | selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | | selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | - 事件 | 事件名 | 说明 | @@ -1207,7 +1206,7 @@ API 注意事项 1. canvas 组件目前仅支持 2D 类型，不支持 webgl -2. 通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，具体接口可以参考 (HTML Canvas 2D Context)[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D] 定义的属性、方法 +2. 通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，具体接口可以参考 [HTML Canvas 2D Context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) 定义的属性、方法 3. canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘制，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机 4. 通过 Canvas.createImage 画图，图片的链接不能有特殊字符，安卓手机可能会 load 失败 From 4eaafdb417db9e307feddf1eae5fa1ea5beb15f8 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 15 Jan 2025 15:59:59 +0800 Subject: [PATCH 09/10] =?UTF-8?q?doc:=20=E4=BF=AE=E6=94=B9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index bbfc687be..78d4430a9 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -723,9 +723,9 @@ movable-view的可移动区域。 | 属性名 | 类型 | 默认值 | 说明 | | ------ | ---------------- | ------ | ----------------------------------------------------------------------------------------------------- | -| direction | String | none | 目前支持 all、vertical、horizontal、none｜ -| inertia | boolean | false | movable-view是否带有惯性｜ -| out-of-bounds | boolean | false | 超过可移动区域后，movable-view是否还可以移动｜ +| direction | String | none | 目前支持 all、vertical、horizontal、none | +| inertia | boolean | false | movable-view是否带有惯性 | +| out-of-bounds | boolean | false | 超过可移动区域后，movable-view是否还可以移动 | | x | Number | | 定义x轴方向的偏移 | | y | Number | | 定义y轴方向的偏移 | | friction | Number | 7 | 摩擦系数 | @@ -1206,7 +1206,7 @@ API 注意事项 1. canvas 组件目前仅支持 2D 类型，不支持 webgl -2. 通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，具体接口可以参考 [HTML Canvas 2D Context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) 定义的属性、方法 +2. 通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，具体接口可以参考 (HTML Canvas 2D Context)[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D] 定义的属性、方法 3. canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘制，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机 4. 通过 Canvas.createImage 画图，图片的链接不能有特殊字符，安卓手机可能会 load 失败 From c9c0d057486ad064f8ffb94ff22d036965694d2b Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 15 Jan 2025 16:05:53 +0800 Subject: [PATCH 10/10] =?UTF-8?q?doc:=20=E4=BF=AE=E6=94=B9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/basic/event.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs-vuepress/guide/basic/event.md b/docs-vuepress/guide/basic/event.md index 9e2238386..0fb587306 100644 --- a/docs-vuepress/guide/basic/event.md +++ b/docs-vuepress/guide/basic/event.md @@ -170,15 +170,16 @@ Mpx 提供了比原生小程序更强大的事件传参能力，支持以下几 ### 使用 event 对象 ```html - -获取event对象 + +获取event对象