From 56c388b6b53a59d9bc3654e60ec5f28872fad2ce Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 11 Dec 2024 11:54:50 +0800 Subject: [PATCH 01/73] =?UTF-8?q?doc:=20=E6=B7=BB=E5=8A=A0=E4=B8=80?= =?UTF-8?q?=E6=9C=9F=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=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 | 487 +++++++++++++++++++++++++++++ 1 file changed, 487 insertions(+) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 3b80f89ba2..c261a1725b 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -24,6 +24,493 @@ #### 模版语法 #### 基础组件 +目前 Mpx 输出 React Native 仅支持以下组件，具体使用范围可参考如下文档 + +### view +视图容器。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| hover-class | string | | 指定按下去的样式类。 | +| hover-start-time | number | 50 | 按住后多久出现点击态，单位毫秒| +| hover-stay-time | number | 400 | 手指松开后点击态保留时间，单位毫秒 | +| enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + +事件 + +| 事件名 | 说明 | +| ----------------| --------------------------------------------------- | +| bindtap | 点击的时候触发 | + + +### text +文本。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| user-select | boolean | `false` | 文本是否可选。 | +| disable-default-style | boolean | `false` | 会内置默认样式，比如fontSize为16。设置`true`可以禁止默认的内置样式。 | +| enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + + +事件 + + +| 事件名 | 说明 | +| ----------------| --------------------------------------------------- | +| bindtap | 点击的时候触发 | + +注意事项 +1. 未包裹 text 标签的文本，会自动包裹 text 标签。 +2. text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段 + +### image +图片。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| src | String | `false` | 图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式 | +| mode | String | `scaleToFill` | 图片裁剪、缩放的模式，适配微信 image 所有 mode 格式 | +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + +事件 + +| 事件名 | 说明 | +| ----------------| --------------------------------------------------- | +| binderror | 当错误发生时触发，event.detail = { errMsg } | +| bindload | 当图片载入完毕时触发，event.detail = { height, width } | + +注意事项 + +1. image 组件默认宽度320px、高度240px +2. image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分 + +### input +输入框。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| value | String | | 输入框的初始内容 | +| type | String | `text` | input 的类型，不支持 `safe-password`、`nickname` | +| password | Boolean | `false` | 是否是密码类型 | +| placeholder | String | | 输入框为空时占位符 | +| placeholder-class | String | | 指定 placeholder 的样式类，仅支持 color 属性 | +| placeholder-style | String | | 指定 placeholder 的样式，仅支持 color 属性 | +| disabled | Boolean | `false` | 是否禁用 | +| maxlength | Number | `140` | 最大输入长度，设置为 -1 的时候不限制最大长度 | +| auto-focus | Boolean | `false` | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | +| focus | Boolean | `false` | 获取焦点 | +| confirm-type | String | `done` | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | +| confirm-hold | Boolean | `false` | 点击键盘右下角按钮时是否保持键盘不收起 | +| cursor | Number | | 指定 focus 时的光标位置 | +| cursor-color | String | | 光标颜色 | +| selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | +| selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + +事件 + +| 事件名 | 说明 | +| ---------------------| ---------------------------------------------------------------------------------- | +| bindinput | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode` | +| bindfocus | 输入框聚焦时触发，event.detail = { value }，不支持 `height` | +| bindblur | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` | +| bindconfirm | 点击完成按钮时触发，event.detail = { value } | +| bind:selectionchange | 选区改变事件, event.detail = { selectionStart, selectionEnd } | + +方法 + +可通过 `ref` 方式调用以下组件实例方法 + +| 方法名 | 说明 | +| ---------------------| ----------------------------------- | +| focus | 使输入框得到焦点 | +| blur | 使输入框失去焦点 | +| clear | 清空输入框的内容 | +| isFocused | 返回值表明当前输入框是否获得了焦点 | + + +### textarea +多行输入框。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| value | String | | 输入框内容 | +| type | String | `text` | input 的类型，不支持 `safe-password`、`nickname` | +| placeholder | String | | 输入框为空时占位符 | +| placeholder-class | String | | 指定 placeholder 的样式类，仅支持 color 属性 | +| placeholder-style | String | | 指定 placeholder 的样式，仅支持 color 属性 | +| disabled | Boolean | `false` | 是否禁用 | +| maxlength | Number | `140` | 最大输入长度，设置为 -1 的时候不限制最大长度 | +| auto-focus | Boolean | `false` | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | +| focus | Boolean | `false` | 获取焦点 | +| auto-height | Boolean | `false` | 是否自动增高，设置 auto-height 时，style.height不生效 | +| confirm-type | String | `done` | 设置键盘右下角按钮的文字，不支持 `return` | +| confirm-hold | Boolean | `false` | 点击键盘右下角按钮时是否保持键盘不收起 | +| cursor | Number | | 指定 focus 时的光标位置 | +| cursor-color | String | | 光标颜色 | +| selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | +| selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + +事件 + +| 事件名 | 说明 | +| ---------------------| ---------------------------------------------------------------------------------- | +| bindinput | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode` | +| bindfocus | 输入框聚焦时触发，event.detail = { value }，不支持 `height` | +| bindblur | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` | +| bindconfirm | 点击完成按钮时触发，event.detail = { value } | +| bindlinechange | 输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 `heightRpx` | +| bind:selectionchange | 选区改变事件, {selectionStart, selectionEnd} | + +方法 + +可通过 `ref` 方式调用以下组件实例方法 + +| 方法名 | 说明 | +| ---------------------| ----------------------------------- | +| focus | 使输入框得到焦点 | +| blur | 使输入框失去焦点 | +| clear | 清空输入框的内容 | +| isFocused | 返回值表明当前输入框是否获得了焦点 | + + +### button +按钮。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | --------------------------------------------------------- | +| size | String | `default` | 按钮的大小 | +| type | String | `default` | 按钮的样式类型 | +| plain | Boolean | `false` | 按钮是否镂空，背景色透明 | +| disabled | Boolean | `false` | 是否禁用 | +| loading | Boolean | `false` | 名称前是否带 loading 图标 | +| open-type | String | | 微信开放能力，当前仅支持 `share` | +| hover-class | String | | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | +| hover-start-time | Number | `20` | 按住后多久出现点击态，单位毫秒 | +| hover-stay-time | Number | `70` | 手指松开后点击态保留时间，单位毫秒 | +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + + +### scroll-view +可滚动视图区域。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | --------- | -------------------------------------------------- | +| scroll-x | Boolean | `false` | 允许横向滚动动 | +| scroll-y | Boolean | `false` | 允许纵向滚动 | +| upper-threshold | Number | `50` | 距顶部/左边多远时(单位 px),触发 scrolltoupper 事件 | +| lower-threshold | Number | `50` | 距底部/右边多远时(单位 px),触发 scrolltolower 事件 | +| scroll-top | Number | `0` | 设置纵向滚动条位置 | +| scroll-left | Number | `0` | 设置横向滚动条位置 | +| scroll-with-animation | Boolean | `false` | 在设置滚动条位置时使用动画过渡 | +| enable-back-to-top | Boolean | `false` | 点击状态栏的时候视图会滚动到顶部 | +| enhanced | Boolean | `false` | scroll-view 组件功能增强 | +| refresher-enabled | Boolean | `false` | 开启自定义下拉刷新 | +| scroll-anchoring | Boolean | `false` | 开启滚动区域滚动锚点 | +| refresher-default-style | String | `'black'` | 设置下拉刷新默认样式,支持 `black`、`white`、`none`，仅安卓支持 | +| refresher-background | String | `'#fff'` | 设置自定义下拉刷新背景颜色，仅安卓支持 | +| refresher-triggered | Boolean | `false` | 设置当前下拉刷新状态,true 表示已触发 | +| paging-enabled | Number | `false` | 分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置 | +| show-scrollbar | Number | `true` | 滚动条显隐控制 (同时开启 enhanced 属性后生效)| +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + + +事件 + +| 事件名 | 说明 | +| ----------------| ------------------ | +| binddragstart| 滑动开始事件，同时开启 enhanced 属性后生效| +| binddragging| 滑动事件，同时开启 enhanced 属性后生效 | +| binddragend| 滑动结束事件，同时开启 enhanced 属性后生效 | +| bindscrolltoupper | 滚动到顶部/左边触发 | +| bindscrolltolower | 滚动到底部/右边触发 | +| bindscroll | 滚动时触发 | +| bindrefresherrefresh| 自定义下拉刷新被触发 | + +注意事项 + +1. 目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来 + +### swiper +滑块视图容器。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------------ | ------------------------------------| +| indicator-dots | Boolean | `false` | 是否显示面板指示点 | +| indicator-color | color | `rgba(0, 0, 0, .3)` | 指示点颜色 | +| indicator-active-color | color | `#000000` | 当前选中的指示点颜色 | +| autoplay | Boolean | `false` | 是否自动切换 | +| current | Number | `0` | 当前所在滑块的 index | +| interval | Number | `5000` | 自动切换时间间隔 | +| duration | Number | `500` | 滑动动画时长 | +| circular | Boolean | `false` | 是否采用衔接滑动 | +| vertical | Boolean | `false` | 滑动方向是否为纵向 | +| previous-margin | String | `0` | 前边距，可用于露出前一项的一小部分，接受px | +| next-margin | String | `0` | 后边距，可用于露出后一项的一小部分，接受px | +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + + +事件 + +| 事件名 | 说明 | +| ----------------| ------------------ | +| bindchange| current 改变时会触发 change 事件，event.detail = {current, source}| + +### swiper-item +1. 仅可放置在swiper组件中，宽高自动设置为100%。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------------ | ------------------------------------| +| item-id | string | `无` | 该 swiper-item 的标识符 | + + +### checkbox +多选项目 + + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| value | String | | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value | +| disabled | Boolean | false | 是否禁用 | +| checked | Boolean | false | 当前是否选中，可用来设置默认选中 | +| color | String | #09BB07 | checkbox的颜色，同css的color | + + +### checkbox-group +多项选择器，内部由多个checkbox组成。 + + +事件 + +| 事件名 | 说明 | +| ----------------| ------------------ | +| bindchange | checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] } | + + +### radio +单选项目 + + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| value | String | | radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value | +| disabled | Boolean | false | 是否禁用 | +| checked | Boolean | false | 当前是否选中，可用来设置默认选中 | +| color | String | #09BB07 | checkbox 的颜色，同 css 的 color | + + +### radio-group +单项选择器，内部由多个 radio 组成 + + +事件 + +| 事件名 | 说明 | +| ----------------| ------------------ | +| bindchange | radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] } | + + +### label +用来改进表单组件的可用性 + + +注意事项 + +1. 当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。 + + +### icon +图标组件 + + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| type | String | | icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear | +| size | String \| Number | 23 | icon 的大小 | +| color | String | | icon 的颜色，同 css 的 color | + + +### movable-area +movable-view的可移动区域。 + +注意事项 + +1. movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内 + +### movable-view +可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。 + + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------ | ---------------- | ------ | ----------------------------------------------------------------------------------------------------- | +| direction | String | none | 目前支持 all、vertical、horizontal、none｜ +| x | Number | | 定义x轴方向的偏移 | +| y | Number | | 定义y轴方向的偏移 | +|friction | Number | 7 | 摩擦系数 | +|disabled | boolean | false | 是否禁用 | +|scale | boolean | false | 是否支持双指缩放 | +|scale-min | Number | 0.1 | 定义缩放倍数最小值 | +|scale-max | Number | 10 | 定义缩放倍数最大值 | +|scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.1 - 10 | + +事件 + +| 事件名 | 说明 | +| -------------------- | ------------------------------------------ | +| bindchange | 拖动过程中触发的事件，event.detail = {x, y, source} | +| bindscale | 缩放过程中触发的事件，event.detail = {x, y, scale} | +| htouchmove | 初次手指触摸后移动为横向的移动时触发 | +| vtouchmove | 初次手指触摸后移动为纵向的移动时触发 | + +### form +表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。 + +当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。 + +事件 + +| 事件名 | 说明 | +| ---------- | --------------------------------------------------- | +| bindsubmit | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} } | +| bindreset | 表单重置时会触发 reset 事件 | + +### cover-view +视图容器。 +功能同 view 组件 + +### cover-image +视图容器。 +功能同 image 组件 +| bindchange | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）| + + +### picker-view +嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------------------| ------------------ | ------------------------------------| +| value | Array[number] | `false` | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 | + + +事件 + +| 事件名 | 说明 | +| ----------------| ------------------ | +| bindchange | checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] } | + +### picker-view-column +滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致 + + +### picker +从底部弹起的滚动选择器。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| -----------------------| ------------| ------------------ | -----------------------------| +| mode | string | `selector` | 选择器类型 | +| disabled | boolean | `false` | 是否禁用 | + +公共事件 + +| 事件名 | 说明 | +| ----------------| ------------------ | +| bindcancel | 取消选择时触发 | +| bindchange | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）| + +#### 普通选择器：mode = selector + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| -----------------------| ------------------------| ------------- | -----------------------------| +| range | array[object]/array | `[]` | mode 为 selector 或 multiSelector 时，range 有效 | +| range-key | string | `false` | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | +| value | number | 0 | 表示选择了 range 中的第几个（下标从 0 开始）| + +#### 多列选择器：mode = multiSelector +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| -----------------------| ------------------------| ------------- | -----------------------------| +| range | array[object]/array | `[]` | mode 为 selector 或 multiSelector 时，range 有效 | +| range-key | string | `false` | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | +| value | array | `[]` | 表示选择了 range 中的第几个（下标从 0 开始）| +| bindcolumnchange | | | 列改变时触发| + +#### 多列选择器：时间选择器：mode = time +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| -----------------------| ------------------------| ------------- | -----------------------------| +| value | string | `[]` | 表示选中的时间，格式为"hh:mm" | +| start | string | `false` | 表示有效时间范围的开始，字符串格式为"hh:mm" | +| end | string | `[]` | 表示有效时间范围的结束，字符串格式为"hh:mm"| + +#### 多列选择器：时间选择器：mode = date +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| -----------------------| ------------------------| ------------- | ------------------------------------------| +| value | string | `当天` | 表示选中的日期，格式为"YYYY-MM-DD" | +| start | string | `false` | 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" | +| end | string | `[]` | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" | +| fields | string | `day` | 有效值 year,month,day，表示选择器的粒度 | + +#### fields 有效值： +| 属性名 | 说明 | +| -----------------------| ------------------------ | +| year | 选择器粒度为年 | +| month | 选择器粒度为月份 | +| day | 选择器粒度为天 | + +### 省市区选择器：mode = region +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| -----------------------| ------------------------| ------------- | ------------------------------------------| +| value | array | `[]` | 表示选中的省市区，默认选中每一列的第一个值 | +| custom-item | string | | 可为每一列的顶部添加一个自定义的项 | +| level | string | `region` | 选择器层级 | + +#### level 有效值： +| 属性名 | 说明 | +| -----------------------| ------------------------ | +| province | 选省级选择器 | +| city | 市级选择器 | +| region | 区级选择器 | + #### 自定义组件 From 1e456dcde90f49c79b5f2473b45009559ce7c7da Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 11 Dec 2024 19:56:04 +0800 Subject: [PATCH 02/73] =?UTF-8?q?doc:=20=E6=B7=BB=E5=8A=A0=E4=B8=80?= =?UTF-8?q?=E6=9C=9F=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=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 | 486 +++++++++++++++-------------- 1 file changed, 256 insertions(+), 230 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index c261a1725b..d18ab090ff 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -24,9 +24,9 @@ #### 模版语法 #### 基础组件 -目前 Mpx 输出 React Native 仅支持以下组件，具体使用范围可参考如下文档 +目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件属性即为不支持，具体使用范围可参考如下文档 -### view +##### view 视图容器。 属性 @@ -45,167 +45,7 @@ | bindtap | 点击的时候触发 | -### text -文本。 - -属性 - -| 属性名 | 类型 | 默认值 | 说明 | -| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | -| user-select | boolean | `false` | 文本是否可选。 | -| disable-default-style | boolean | `false` | 会内置默认样式，比如fontSize为16。设置`true`可以禁止默认的内置样式。 | -| enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| - - -事件 - - -| 事件名 | 说明 | -| ----------------| --------------------------------------------------- | -| bindtap | 点击的时候触发 | - -注意事项 -1. 未包裹 text 标签的文本，会自动包裹 text 标签。 -2. text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段 - -### image -图片。 - -属性 - -| 属性名 | 类型 | 默认值 | 说明 | -| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | -| src | String | `false` | 图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式 | -| mode | String | `scaleToFill` | 图片裁剪、缩放的模式，适配微信 image 所有 mode 格式 | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| - -事件 - -| 事件名 | 说明 | -| ----------------| --------------------------------------------------- | -| binderror | 当错误发生时触发，event.detail = { errMsg } | -| bindload | 当图片载入完毕时触发，event.detail = { height, width } | - -注意事项 - -1. image 组件默认宽度320px、高度240px -2. image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分 - -### input -输入框。 - -属性 - -| 属性名 | 类型 | 默认值 | 说明 | -| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | -| value | String | | 输入框的初始内容 | -| type | String | `text` | input 的类型，不支持 `safe-password`、`nickname` | -| password | Boolean | `false` | 是否是密码类型 | -| placeholder | String | | 输入框为空时占位符 | -| placeholder-class | String | | 指定 placeholder 的样式类，仅支持 color 属性 | -| placeholder-style | String | | 指定 placeholder 的样式，仅支持 color 属性 | -| disabled | Boolean | `false` | 是否禁用 | -| maxlength | Number | `140` | 最大输入长度，设置为 -1 的时候不限制最大长度 | -| auto-focus | Boolean | `false` | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | -| focus | Boolean | `false` | 获取焦点 | -| confirm-type | String | `done` | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | -| confirm-hold | Boolean | `false` | 点击键盘右下角按钮时是否保持键盘不收起 | -| cursor | Number | | 指定 focus 时的光标位置 | -| cursor-color | String | | 光标颜色 | -| selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | -| selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| - -事件 - -| 事件名 | 说明 | -| ---------------------| ---------------------------------------------------------------------------------- | -| bindinput | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode` | -| bindfocus | 输入框聚焦时触发，event.detail = { value }，不支持 `height` | -| bindblur | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` | -| bindconfirm | 点击完成按钮时触发，event.detail = { value } | -| bind:selectionchange | 选区改变事件, event.detail = { selectionStart, selectionEnd } | - -方法 - -可通过 `ref` 方式调用以下组件实例方法 - -| 方法名 | 说明 | -| ---------------------| ----------------------------------- | -| focus | 使输入框得到焦点 | -| blur | 使输入框失去焦点 | -| clear | 清空输入框的内容 | -| isFocused | 返回值表明当前输入框是否获得了焦点 | - - -### textarea -多行输入框。 - -属性 - -| 属性名 | 类型 | 默认值 | 说明 | -| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | -| value | String | | 输入框内容 | -| type | String | `text` | input 的类型，不支持 `safe-password`、`nickname` | -| placeholder | String | | 输入框为空时占位符 | -| placeholder-class | String | | 指定 placeholder 的样式类，仅支持 color 属性 | -| placeholder-style | String | | 指定 placeholder 的样式，仅支持 color 属性 | -| disabled | Boolean | `false` | 是否禁用 | -| maxlength | Number | `140` | 最大输入长度，设置为 -1 的时候不限制最大长度 | -| auto-focus | Boolean | `false` | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | -| focus | Boolean | `false` | 获取焦点 | -| auto-height | Boolean | `false` | 是否自动增高，设置 auto-height 时，style.height不生效 | -| confirm-type | String | `done` | 设置键盘右下角按钮的文字，不支持 `return` | -| confirm-hold | Boolean | `false` | 点击键盘右下角按钮时是否保持键盘不收起 | -| cursor | Number | | 指定 focus 时的光标位置 | -| cursor-color | String | | 光标颜色 | -| selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | -| selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| - -事件 - -| 事件名 | 说明 | -| ---------------------| ---------------------------------------------------------------------------------- | -| bindinput | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode` | -| bindfocus | 输入框聚焦时触发，event.detail = { value }，不支持 `height` | -| bindblur | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` | -| bindconfirm | 点击完成按钮时触发，event.detail = { value } | -| bindlinechange | 输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 `heightRpx` | -| bind:selectionchange | 选区改变事件, {selectionStart, selectionEnd} | - -方法 - -可通过 `ref` 方式调用以下组件实例方法 - -| 方法名 | 说明 | -| ---------------------| ----------------------------------- | -| focus | 使输入框得到焦点 | -| blur | 使输入框失去焦点 | -| clear | 清空输入框的内容 | -| isFocused | 返回值表明当前输入框是否获得了焦点 | - - -### button -按钮。 - -属性 - -| 属性名 | 类型 | 默认值 | 说明 | -| ----------------------- | ------- | ------------- | --------------------------------------------------------- | -| size | String | `default` | 按钮的大小 | -| type | String | `default` | 按钮的样式类型 | -| plain | Boolean | `false` | 按钮是否镂空，背景色透明 | -| disabled | Boolean | `false` | 是否禁用 | -| loading | Boolean | `false` | 名称前是否带 loading 图标 | -| open-type | String | | 微信开放能力，当前仅支持 `share` | -| hover-class | String | | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | -| hover-start-time | Number | `20` | 按住后多久出现点击态，单位毫秒 | -| hover-stay-time | Number | `70` | 手指松开后点击态保留时间，单位毫秒 | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| - - -### scroll-view +##### scroll-view 可滚动视图区域。 属性 @@ -247,7 +87,8 @@ 1. 目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来 -### swiper + +##### swiper 滑块视图容器。 属性 @@ -274,7 +115,7 @@ | ----------------| ------------------ | | bindchange| current 改变时会触发 change 事件，event.detail = {current, source}| -### swiper-item +##### swiper-item 1. 仅可放置在swiper组件中，宽高自动设置为100%。 属性 @@ -283,8 +124,124 @@ | ----------------------- | ------- | ------------------ | ------------------------------------| | item-id | string | `无` | 该 swiper-item 的标识符 | +##### movable-area +movable-view的可移动区域。 + +注意事项 + +1. movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内 + +##### movable-view +可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。 + + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------ | ---------------- | ------ | ----------------------------------------------------------------------------------------------------- | +| direction | String | none | 目前支持 all、vertical、horizontal、none｜ +| x | Number | | 定义x轴方向的偏移 | +| y | Number | | 定义y轴方向的偏移 | +|friction | Number | 7 | 摩擦系数 | +|disabled | boolean | false | 是否禁用 | +|scale | boolean | false | 是否支持双指缩放 | +|scale-min | Number | 0.1 | 定义缩放倍数最小值 | +|scale-max | Number | 10 | 定义缩放倍数最大值 | +|scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.1 - 10 | + +事件 + +| 事件名 | 说明 | +| -------------------- | ------------------------------------------ | +| bindchange | 拖动过程中触发的事件，event.detail = {x, y, source} | +| bindscale | 缩放过程中触发的事件，event.detail = {x, y, scale} | +| htouchmove | 初次手指触摸后移动为横向的移动时触发 | +| vtouchmove | 初次手指触摸后移动为纵向的移动时触发 | + +##### root-portal +使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。 +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------ | ---------------- | ------ | ----------------------------------------------------------------------------------------------------- | + +| enable | boolean | true | 是否从页面中脱离出来 ｜ + + +##### cover-view +视图容器。 +功能同 view 组件 + +##### cover-image +视图容器。 +功能同 image 组件 + +##### icon +图标组件 -### checkbox + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| type | String | | icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear | +| size | String \| Number | 23 | icon 的大小 | +| color | String | | icon 的颜色，同 css 的 color | + + +##### text +文本。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| user-select | boolean | `false` | 文本是否可选。 | +| disable-default-style | boolean | `false` | 会内置默认样式，比如fontSize为16。设置`true`可以禁止默认的内置样式。 | +| enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + + +事件 + + +| 事件名 | 说明 | +| ----------------| --------------------------------------------------- | +| bindtap | 点击的时候触发 | + +注意事项 +1. 未包裹 text 标签的文本，会自动包裹 text 标签。 +2. text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段 + + +##### button +按钮。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | --------------------------------------------------------- | +| size | String | `default` | 按钮的大小 | +| type | String | `default` | 按钮的样式类型 | +| plain | Boolean | `false` | 按钮是否镂空，背景色透明 | +| disabled | Boolean | `false` | 是否禁用 | +| loading | Boolean | `false` | 名称前是否带 loading 图标 | +| open-type | String | | 微信开放能力，当前仅支持 `share` | +| 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 +用来改进表单组件的可用性 + + +注意事项 + +1. 当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。 + + +##### checkbox 多选项目 @@ -298,7 +255,7 @@ | color | String | #09BB07 | checkbox的颜色，同css的color | -### checkbox-group +##### checkbox-group 多项选择器，内部由多个checkbox组成。 @@ -309,7 +266,7 @@ | bindchange | checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] } | -### radio +##### radio 单选项目 @@ -323,7 +280,7 @@ | color | String | #09BB07 | checkbox 的颜色，同 css 的 color | -### radio-group +##### radio-group 单项选择器，内部由多个 radio 组成 @@ -334,85 +291,115 @@ | bindchange | radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] } | -### label -用来改进表单组件的可用性 - +##### form +表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。 -注意事项 +当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。 -1. 当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。 +事件 +| 事件名 | 说明 | +| ---------- | --------------------------------------------------- | +| bindsubmit | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} } | +| bindreset | 表单重置时会触发 reset 事件 | -### icon -图标组件 +##### input +输入框。 属性 | 属性名 | 类型 | 默认值 | 说明 | | ----------------------- | ------- | ------------- | ---------------------------------------------------------- | -| type | String | | icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear | -| size | String \| Number | 23 | icon 的大小 | -| color | String | | icon 的颜色，同 css 的 color | +| value | String | | 输入框的初始内容 | +| type | String | `text` | input 的类型，不支持 `safe-password`、`nickname` | +| password | Boolean | `false` | 是否是密码类型 | +| placeholder | String | | 输入框为空时占位符 | +| placeholder-class | String | | 指定 placeholder 的样式类，仅支持 color 属性 | +| placeholder-style | String | | 指定 placeholder 的样式，仅支持 color 属性 | +| disabled | Boolean | `false` | 是否禁用 | +| maxlength | Number | `140` | 最大输入长度，设置为 -1 的时候不限制最大长度 | +| auto-focus | Boolean | `false` | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | +| focus | Boolean | `false` | 获取焦点 | +| confirm-type | String | `done` | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | +| confirm-hold | Boolean | `false` | 点击键盘右下角按钮时是否保持键盘不收起 | +| cursor | Number | | 指定 focus 时的光标位置 | +| cursor-color | String | | 光标颜色 | +| selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | +| selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| +事件 -### movable-area -movable-view的可移动区域。 +| 事件名 | 说明 | +| ---------------------| ---------------------------------------------------------------------------------- | +| bindinput | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode` | +| bindfocus | 输入框聚焦时触发，event.detail = { value }，不支持 `height` | +| bindblur | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` | +| bindconfirm | 点击完成按钮时触发，event.detail = { value } | +| bind:selectionchange | 选区改变事件, event.detail = { selectionStart, selectionEnd } | -注意事项 +方法 -1. movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内 +可通过 `ref` 方式调用以下组件实例方法 + +| 方法名 | 说明 | +| ---------------------| ----------------------------------- | +| focus | 使输入框得到焦点 | +| blur | 使输入框失去焦点 | +| clear | 清空输入框的内容 | +| isFocused | 返回值表明当前输入框是否获得了焦点 | -### movable-view -可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。 +##### textarea +多行输入框。 属性 -| 属性名 | 类型 | 默认值 | 说明 | -| ------ | ---------------- | ------ | ----------------------------------------------------------------------------------------------------- | -| direction | String | none | 目前支持 all、vertical、horizontal、none｜ -| x | Number | | 定义x轴方向的偏移 | -| y | Number | | 定义y轴方向的偏移 | -|friction | Number | 7 | 摩擦系数 | -|disabled | boolean | false | 是否禁用 | -|scale | boolean | false | 是否支持双指缩放 | -|scale-min | Number | 0.1 | 定义缩放倍数最小值 | -|scale-max | Number | 10 | 定义缩放倍数最大值 | -|scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.1 - 10 | +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| value | String | | 输入框内容 | +| type | String | `text` | input 的类型，不支持 `safe-password`、`nickname` | +| placeholder | String | | 输入框为空时占位符 | +| placeholder-class | String | | 指定 placeholder 的样式类，仅支持 color 属性 | +| placeholder-style | String | | 指定 placeholder 的样式，仅支持 color 属性 | +| disabled | Boolean | `false` | 是否禁用 | +| maxlength | Number | `140` | 最大输入长度，设置为 -1 的时候不限制最大长度 | +| auto-focus | Boolean | `false` | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | +| focus | Boolean | `false` | 获取焦点 | +| auto-height | Boolean | `false` | 是否自动增高，设置 auto-height 时，style.height不生效 | +| confirm-type | String | `done` | 设置键盘右下角按钮的文字，不支持 `return` | +| confirm-hold | Boolean | `false` | 点击键盘右下角按钮时是否保持键盘不收起 | +| cursor | Number | | 指定 focus 时的光标位置 | +| cursor-color | String | | 光标颜色 | +| selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | +| selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| 事件 -| 事件名 | 说明 | -| -------------------- | ------------------------------------------ | -| bindchange | 拖动过程中触发的事件，event.detail = {x, y, source} | -| bindscale | 缩放过程中触发的事件，event.detail = {x, y, scale} | -| htouchmove | 初次手指触摸后移动为横向的移动时触发 | -| vtouchmove | 初次手指触摸后移动为纵向的移动时触发 | - -### form -表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。 - -当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。 - -事件 +| 事件名 | 说明 | +| ---------------------| ---------------------------------------------------------------------------------- | +| bindinput | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode` | +| bindfocus | 输入框聚焦时触发，event.detail = { value }，不支持 `height` | +| bindblur | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` | +| bindconfirm | 点击完成按钮时触发，event.detail = { value } | +| bindlinechange | 输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 `heightRpx` | +| bind:selectionchange | 选区改变事件, {selectionStart, selectionEnd} | -| 事件名 | 说明 | -| ---------- | --------------------------------------------------- | -| bindsubmit | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} } | -| bindreset | 表单重置时会触发 reset 事件 | +方法 -### cover-view -视图容器。 -功能同 view 组件 +可通过 `ref` 方式调用以下组件实例方法 -### cover-image -视图容器。 -功能同 image 组件 -| bindchange | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）| +| 方法名 | 说明 | +| ---------------------| ----------------------------------- | +| focus | 使输入框得到焦点 | +| blur | 使输入框失去焦点 | +| clear | 清空输入框的内容 | +| isFocused | 返回值表明当前输入框是否获得了焦点 | -### picker-view +##### picker-view 嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示 属性 @@ -428,11 +415,11 @@ movable-view的可移动区域。 | ----------------| ------------------ | | bindchange | checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] } | -### picker-view-column +##### picker-view-column 滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致 -### picker +##### picker 从底部弹起的滚动选择器。 属性 @@ -449,7 +436,7 @@ movable-view的可移动区域。 | bindcancel | 取消选择时触发 | | bindchange | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）| -#### 普通选择器：mode = selector +##### 普通选择器：mode = selector 属性 @@ -459,7 +446,7 @@ movable-view的可移动区域。 | range-key | string | `false` | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | | value | number | 0 | 表示选择了 range 中的第几个（下标从 0 开始）| -#### 多列选择器：mode = multiSelector +##### 多列选择器：mode = multiSelector 属性 | 属性名 | 类型 | 默认值 | 说明 | @@ -469,7 +456,7 @@ movable-view的可移动区域。 | value | array | `[]` | 表示选择了 range 中的第几个（下标从 0 开始）| | bindcolumnchange | | | 列改变时触发| -#### 多列选择器：时间选择器：mode = time +##### 多列选择器：时间选择器：mode = time 属性 | 属性名 | 类型 | 默认值 | 说明 | @@ -478,7 +465,7 @@ movable-view的可移动区域。 | start | string | `false` | 表示有效时间范围的开始，字符串格式为"hh:mm" | | end | string | `[]` | 表示有效时间范围的结束，字符串格式为"hh:mm"| -#### 多列选择器：时间选择器：mode = date +##### 多列选择器：时间选择器：mode = date 属性 | 属性名 | 类型 | 默认值 | 说明 | @@ -488,14 +475,14 @@ movable-view的可移动区域。 | end | string | `[]` | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" | | fields | string | `day` | 有效值 year,month,day，表示选择器的粒度 | -#### fields 有效值： +##### fields 有效值： | 属性名 | 说明 | | -----------------------| ------------------------ | | year | 选择器粒度为年 | | month | 选择器粒度为月份 | | day | 选择器粒度为天 | -### 省市区选择器：mode = region +##### 省市区选择器：mode = region 属性 | 属性名 | 类型 | 默认值 | 说明 | @@ -504,13 +491,52 @@ movable-view的可移动区域。 | custom-item | string | | 可为每一列的顶部添加一个自定义的项 | | level | string | `region` | 选择器层级 | -#### level 有效值： +##### level 有效值： | 属性名 | 说明 | | -----------------------| ------------------------ | | province | 选省级选择器 | | city | 市级选择器 | | region | 区级选择器 | +##### image +图片。 + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| src | String | `false` | 图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式 | +| mode | String | `scaleToFill` | 图片裁剪、缩放的模式，适配微信 image 所有 mode 格式 | +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| + +事件 + +| 事件名 | 说明 | +| ----------------| --------------------------------------------------- | +| binderror | 当错误发生时触发，event.detail = { errMsg } | +| bindload | 当图片载入完毕时触发，event.detail = { height, width } | + +注意事项 + +1. image 组件默认宽度320px、高度240px +2. image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分 + + +##### canvas +画布 + + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| value | String | | radio 标识，当该 radio 选中时，radio-group 的 change 事件会 + + +注意事项 + +1. 仅支持 type 为 2D +1. image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分 #### 自定义组件 From faff052f8a8e2b91bec1e62b8bde93e4056a318a Mon Sep 17 00:00:00 2001 From: luyongfang Date: Thu, 12 Dec 2024 15:18:32 +0800 Subject: [PATCH 03/73] add swiper doc --- docs-vuepress/guide/platform/rn.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index d18ab090ff..069591d9a0 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -106,7 +106,11 @@ | vertical | Boolean | `false` | 滑动方向是否为纵向 | | previous-margin | String | `0` | 前边距，可用于露出前一项的一小部分，接受px | | next-margin | String | `0` | 后边距，可用于露出后一项的一小部分，接受px | -| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| +| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| +| easing-function | String | `linear` | 支持 linear、easeInCubic、easeOutCubic、easeInOutCubic| +| bindchange | eventhandle| 无 | current 改变时会触发 change 事件，event.detail = {current, source}| + + 事件 From 8ef011a9bf24a20c268b2480de7140253d4bbe41 Mon Sep 17 00:00:00 2001 From: wenwen Date: Mon, 16 Dec 2024 15:31:00 +0800 Subject: [PATCH 04/73] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=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 | 599 ++++++++++++++++++++++++++++- 1 file changed, 596 insertions(+), 3 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index bd9158a499..d6d0d6bfc0 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -8,11 +8,11 @@ ### 样式单位 ### 文本样式继承 - +@hjw ### 简写样式属性 - +@hjw ### CSS函数 - +@hjw ### 使用原子类 ## 混合编写RN代码 @@ -30,6 +30,599 @@ ### 自定义组件 ### 样式规则 +#### position +设置元素的定位样式 +##### 值类型 +enum: absolute, relative， 默认relative。 +##### 代码示例 +``` css +position: absolute; +position: relative; +``` +#### top|right|left|bottom +设置元素的不同方向的偏移量 +##### 值类型 +number: px, rpx, % +##### 代码示例 +``` css +top: 10px; +top: 10rpx; +top: 10%; +``` +#### z-index +控制着元素的堆叠覆盖顺序。 +##### 值类型 +number +##### 代码示例 +``` css +z-index: 1; +``` +#### display +设置元素的布局方式。 +##### 值类型 +enum: flex, none +##### 代码示例 +``` css +/* 默认 */ +display:flex +/* 隐藏 */ +display:none +``` +#### align-content +设置多根轴线的对齐方式。 +##### 值类型 +enum: flex-start, flex-end, center, stretch, space-between, space-around, space-evenly +##### 代码示例 +``` css +/** 支持 **/ +align-content: flex-start; +align-content: flex-end; +align-content: center; +align-content: stretch; +align-content: space-between; +align-content: space-around; +align-content: space-evenly; + +/** 不支持 **/ +align-content: safe center; +align-content: unsafe center; +``` +#### align-items +设置单根轴线上的子元素的对齐方式。默认会是交叉轴上的。 +##### 值类型 +enum: flex-start, flex-end, center, stretch, baseline +##### 代码示例 +``` css +/** 支持 **/ +align-items: flex-start; +align-items: flex-end; +align-items: center; +align-items: stretch; +align-items: baseline; + +/** 不支持 **/ +align-items: first baseline; +align-items: last baseline; +``` +#### align-self +设置单个子元素在单根轴线上的对齐方式 +##### 值类型 +enum: auto, flex-start, flex-end, center, stretch, baseline +##### 代码示例 +``` css +/** 支持 **/ +align-self: auto; +align-self: flex-start; +align-self: flex-end; +align-self: center; +align-self: stretch; +align-self: baseline; + +/** 不支持 **/ +align-self: first baseline; +align-self: last baseline; +``` +#### flex-grow +设置子盒子的放大比例 +##### 值类型 +number: >= 0 +##### 代码示例 +```css +flex-grow: 1; +``` +#### flex-shrink +设置子盒子的缩放比例。 +##### 值类型 +number: >= 0 +##### 代码示例 +```css +flex-shrink: 1; +``` +#### flex-basis +设置在分配多余空间之前，子盒子的初始主轴尺寸。 +##### 值类型 +number px|rpx|% +##### 代码示例 +``` css +flex-shrink: 10px; +flex-shrink: 10rpx; +flex-shrink: 20%; +``` +#### flex +flex-grow flex-shrink flex-basis 的缩写 +##### 值类型 +按顺序分别对应 flex-grow flex-shrink flex-basis 的值类型，flex: number >= 0 (flex-grow) number >= 0 (flex-shrink) px,rpx,% (flex-basis) +##### 注意事项 +具体缩写规则参考 [CSS flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) +##### 代码示例 +``` css +/** 简写 **/ +flex: 1; +/* flex-grow | flex-shrink | flex-basis */ +flex: 0 1 1; +``` +#### flex-direction +设置主轴的方向。 +##### 值类型 +enum: row, row-reverse, column, column-reverse +##### 代码示例 +``` css +flex-direction: row; +flex-direction: row-reverse; +flex-direction: column; +flex-direction: column-reverse; +``` +#### flex-wrap +设置元素是否换行。当值为wrap时，alignItems：center不生效。 +##### 值类型 +enum: wrap, nowrap, wrap-reverse +##### 代码示例 +``` css +flex-wrap: wrap; +flex-wrap: nowrap; +flex-wrap: wrap-reverse; +``` +#### flex-flow +是flex-direction flex-wrap 缩写，仅支持 flex-flow: flex-direction flex-wrap 这种顺序，值以空格分隔按顺序赋值 +```css +/* flex-direction */ +flex-flow: row; +/* flex-direction| flex-wrap*/ +flex-flow: row nowrap; +``` +#### margin +margin 是 margin-top|margin-right|margin-left|margin-bottom 的缩写模式, 目前仅支持四种缩写模式。 +##### 值类型 +enum: auto +number: rpx，px, % +##### 代码示例 +``` css +/* all */ +margin: 2px; + +/* top and bottom | left and right */ +margin: 5% auto; + +/* top | left and right | bottom */ +margin: 1rpx auto 2rpx; + +/* top | right | bottom | left */ +margin: 1rpx 2rpx 2rpx ; +``` +#### margin-top|margin-bottom|margin-right|margin-left +##### 值类型 +number: rpx，px, % +##### 代码示例 +``` css +margin-top: 2px; +margin-top: 2rpx; +margin-top: 10%; +``` +#### padding +padding 是 padding-left|padding-right|padding-left|padding-bottom 的缩写模式, 目前仅支持四种缩写模式。 +##### 值类型 +number: rpx, px, % +##### 代码示例 +``` css +/* all */ +padding: 2px; + +/* top and bottom | left and right */ +padding: 5% 10%; + +/* top | left and right | bottom */ +padding: 1rpx 0 2rpx; + +/* top | right | bottom | left */ +padding: 1rpx 2rpx 2rpx ; +``` +#### padding-top|padding-bottom|padding-left|padding-right +##### 值类型 +number: rpx，px, % +##### 代码示例 +``` css +/** padding-top **/ +padding-top: 2px; +padding-top: 2rpx; +padding-top: 10%; +``` +#### border +border 是 border-width|border-style|border-color 的缩写模式, 目前仅支持 width | style | color 这种排序，值以空格分隔按顺序赋值 +```css +/* width | style | color */ +border: 1px solid red; +border: 1px; +border: 1px solid; +border: 1px double pink; +``` +#### border-color +设置边框的颜色, 是 borderTopColor|borderRightColor|borderBottomColor|borderLeftColor 的缩写 +##### 值类型 +color: 参考[Color](https://reactnative.dev/docs/colors) +##### 代码示例 +``` css +/* all border */ +/** 支持 **/ +border-color: red; +``` +#### border-style +设置边框的样式, 不支持缩写。 +##### 值类型 +enum: solid|dotted|dashed +##### 代码示例 +``` css +/** 支持 **/ +/* all border */ +border-color: 'solid'; +border-color: 'dotted'; +border-color: 'dashed'; + +/** 不支持 **/ +border-style: double; +border-style: groove; +border-style: ridge; +border-style: dotted solid; +border-style: hidden double dashed; +border-style: none solid dotted dashed; +``` +#### border-width +设置边框的宽度，是 borderTopWidth|borderRightWidth|borderBottomWidth|borderLeftWidth 的缩写 +##### 值类型 +number: px, rpx, % +##### 代码示例 +``` css +/* all border */ +border-width: 2px; +``` +#### border-top-color|border-bottom-color|border-left-color|border-right-color +设置各边框的颜色 +##### 值类型 +color: 参考[Color](https://reactnative.dev/docs/colors) +##### 代码示例 +``` css +border-top-color: red; +``` +#### border-top-width|border-bottom-width|border-left-width|border-right-width +设置各边框的宽度 +##### 值类型 +number: px, rpx, % +##### 代码示例 +``` css +border-top-width: 2px; +``` +#### border-radius +设置 border 的圆角格式 +##### 值类型 +number: px, rpx, % +##### 代码示例 +``` css +/* all */ +border-radius: 2px; +/* top-left | top-right | bottom-right | bottom-left */ +border-radius: 10px 10px 10px 0; +``` +#### border-bottom-left-radius|border-bottom-right-radius|border-top-left-radius|border-top-right-radius +##### 值类型 +number: px, rpx, % +##### 代码示例 +``` css +border-bottom-left-radius: 2px; +``` +#### background-color +设置背景色 +##### 值类型 +color: 参考[Color](https://reactnative.dev/docs/colors) +##### 代码示例 +``` css +/* all border */ +background-color: red; +``` +#### background-image +设置背景图 +##### 值类型 +仅支持 +##### 注意事项 +仅支持 view 节点 +##### 代码示例 +``` css +background-image: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"); + +/* 不支持 */ +background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); +``` +#### background-size +设置背景图大小 +##### 值类型 +number 支持 px|rpx|%，枚举值支持 contain|cover|auto； +支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto； +支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度； +不支持逗号分隔的多个值：设置多重背景!!! +##### 注意事项 +仅支持 view 节点 +##### 代码示例 +``` css +/* 支持 */ +background-size: 50%; +background-size: 50% 25%; +background-size: contain; +background-size: cover; +background-size: auto; +background-size: 20px auto; + +/ * 不支持 * / +background-size: 50%, 25%, 25%; +``` +#### background-repeat +设置是否重复背景图 +##### 值类型 +enum: no-repeat +##### 注意事项 +仅支持 view 节点 +##### 代码示例 +``` css +background-repeat: no-repeat; + +/* 不支持 */ +background-repeat: repeat; +``` +#### background +表示背景的组合属性，只能在view上使用 +##### 值类型 +仅支持 background-image|background-color|background-size|background-repeat|background-position，具体每个属性的支持情况参见上面具体属性支持的文档 +##### 注意事项 +仅支持 view 节点 +##### 代码示例 +```css +/* 支持 */ +background: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg") pink no-repeat; +background: #000; +background: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg") pink; +/* 不支持 */ +background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); +``` +#### box-shadow +设置阴影颜色、阴影偏移量、阴影模糊半径 +##### 值类型 +仅支持 offset-x|offset-y|blur-radius|color 排序，值以空格分隔按顺序赋值 +##### 代码示例 +```css +/* offset-x | offset-y | blur-radius | color */ +box-shadow: 0 1px 3px rgba(139,0,0,0.32); +``` +#### backface-visibility +指定当 背面朝向观察者时是否可见，仅 支持 +##### 值类型 +enum: visible, hidden +##### 注意事项 +仅支持 image 节点 +##### 代码示例 +```css +backface-visibility: visible; +``` +#### object-fit +确定当元素 与原始图像尺寸不匹配时如何调整图像大小 +##### 值类型 +enum: cover, contain, fill, scale-down +##### 注意事项 +仅支持 image 节点 +##### 代码示例 +```css +object-fit: contain; +``` +#### transform +设置旋转、缩放、倾斜或平移 +##### 值类型 +- array of objects (only rn): [{matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] +- string +##### 代码示例 +```css +/* rn & css */ +transform: 'rotateX(45deg) rotateZ(0.785398rad)', +/* 仅rn支持 */ +transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] +``` +#### transformOrigin +设置视图变换的原点，默认情况下，变换的原点是中心。 +##### 值类型 +- 单值时，该值必须是 px、百分比或关键字 left、center、right、top 和 bottom 之一； +- 双值时，第一个值代表 X 偏移， 必须是 px、百分比或关键字 left、center 和 right 之一， 第二个值代表 Y 偏移，必须是 px、百分比或关键字 top、center 和 bottom 之一； +- 三值时，前两个值与双值语法相同，第三个值代表 Z 偏移，必须是 px。 +##### 代码示例 +```css +transform-origin: bottom; +transform-origin: 10px 2px; +transform-origin: right bottom 20px; +``` +#### color +##### 值类型 +color 参考 [Color](https://reactnative.dev/docs/colors) +##### 注意事项 +仅支持 text 节点，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +color: orange; +color: #fff; +color: #fafafa; +color: rgb(255, 255, 255); +color: rgba(255, 99, 71, 0.2) +``` +#### font-family +可设置系统字体，引入字体文件，暂时不支持。 +##### 值类型 +string +##### 注意事项 +仅支持 text 节点，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +font-family: "PingFangSC-Regular" +``` +#### font-size +可设置字体的大小 +##### 值类型 +number: px,rpx +##### 注意事项 +仅支持 text 节点，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +font-size: 12px; +font-size: 12rpx; +``` +#### font-style +设置文本的字体样式。 +##### 值类型 +enum: normal，italic +##### 注意事项 +仅支持 text 节点，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +font-style: italic; +font-style: normal; +``` +#### font-weight +设置文字的权重。 +##### 值类型 +enum: 100，200，300，400，500，600，800，900,normal,bold +##### 注意事项 +仅支持 text 节点，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +font-weight: 100; +font-weight: 200; +font-weight: 300; +font-weight: 400; +font-weight: 500; +font-weight: 600; +font-weight: 700; +font-weight: 800; +font-weight: 900; + +font-weight: normal; +font-weight: bold; +``` +#### font-variant +设置文本的字体变体 +##### 值类型 +enum: small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums +##### 注意事项 +仅支持 text 节点，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +font-variant: small-caps; +font-variant: oldstyle-nums; +font-variant: lining-nums; +font-variant: tabular-nums; +font-variant: lining-nums; +font-variant: proportional-nums; +``` +#### letter-spacing +定义字符之间的间距 +##### 值类型 +px,rpx +##### 注意事项 +仅支持 text 节点，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +letter-spacing: 2px; +letter-spacing: 2rpx; +``` +#### line-height +设置行高。 +##### 值类型 +##### 注意事项 +仅支持 text 节点上，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +line-height: 16px +line-height: 16rpx +line-height: 100% +line-height: 1 +``` +#### text-align +设置文本的水平对齐方式。 +##### 值类型 +enum: left, right, center, justify +##### 注意事项 +仅支持 text 节点上，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +/** 支持 **/ +text-align: left; +text-align: right; +text-align: center; +text-align: justify; + +/** 不支持 **/ +text-align: match-parent; +text-align: auto; +text-align: justify-all; +``` +#### text-decoration-line +设置文本的装饰线样式。 +##### 值类型 +enum: none, underline, line-through, underline line-through +##### 注意事项 +仅支持 text 节点上，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +/** 支持 **/ +text-decoration-line: none; +text-decoration-line: underline; +text-decoration-line: line-through; +text-decoration-line: underline line-through; + +/** 不支持 **/ +text-decoration-line: overline; +``` +#### text-transform +设置文本的大小写转换。 +##### 值类型 +enum: none, uppercase, lowercase, capitalize +##### 注意事项 +仅支持 text 节点上，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +``` css +/** 支持 **/ +text-transform: none; +text-transform: uppercase; +text-transform: lowercase; +text-transform: capitalize; + +/** 不支持 **/ +text-transform: none; +text-transform: uppercase; +text-transform: lowercase; +text-transform: capitalize; +``` +#### text-shadow +设置文本阴影 +##### 值类型 +仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值 +##### 注意事项 +仅支持 text 节点上，若定义在 view 节点上，则会继承到第一级 text 子节点上 +##### 代码示例 +```css +text-shadow: 1rpx 3rpx 0 #2E0C02; +``` ### 应用能力 From 3cbbfe0e614503792fcd93bc05b183baab0f093b Mon Sep 17 00:00:00 2001 From: wenwen Date: Mon, 16 Dec 2024 15:43:19 +0800 Subject: [PATCH 05/73] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=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 | 75 +++++++++++++++++++++++++++--- 1 file changed, 69 insertions(+), 6 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index d6d0d6bfc0..fd2861670f 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -2,17 +2,80 @@ 大致介绍 ## 跨端样式定义 - +RN 的样式的支持基本为 web 样式的一个子集，同时还有一些属性并未与 web 对齐，因此跨平台输出 RN 时，为了保障多端输出样式一致，可参考本文针对样式在RN上的支持情况来进行样式编写。 ### CSS选择器 - +RN 环境下仅支持以下类名选择器，不支持逗号之外的组合选择器。 +``` css +/* 支持 */ +.classname { + color: red +} +.classA, .classB { + color: red +} +``` ### 样式单位 - +#### number 类型值 +RN 环境中，number 数值型单位支持 px rpx % 三种，web 下的 vw em rem 等不支持。 +#### color 类型值 +RN 环境支持大部分 css 中 color 定义方式，仅少量不支持，详情参考 RN 文档 https://reactnative.dev/docs/colors ### 文本样式继承 -@hjw +RN中，文本节点需要通过Text组件来创建文本节点。文本节点需要给Text组件来设定[属性](https://reactnative.dev/docs/text-style-props)来调整文本的外观。 +Web/小程序中，文本节点可以通过div/view节点进行直接包裹，在div/view标签上设定对应文本样式即可。不需单独包裹text节点。 +框架抹平了此部分的差异，但仍因受限于RN内text的样式[继承原则的限制](https://reactnative.dev/docs/text#limited-style-inheritance)，通过在祖先节点来设置文本节点的样式仍旧无法生效。 +#### 示例代码 +``` html + + 我是文本 + + +.wrapper { + font-size: 20px; +} +.content { + text-align: right; +} +/** 以上例子中 +web渲染效果: 字体的大小为20px，文字居右 +转RN之后渲染效果: 字体大小为默认大小，文字居右 +*/ +``` +#### 使用说明 +1. 无法通过设置祖先节点的样式来修改文本节点的样式，只可通过修改直接包裹文本的节点来修改文本的样式。 +2. 框架处理将文本节点样式的默认值与web进行了对齐，如果需要按照RN的默认值来进行渲染，可设置`disable-default-style`为`true` ### 简写样式属性 -@hjw +#### text-decoration +##### 使用说明 +1.仅支持 text-decoration-line text-decoration-style text-decoration-color +##### 示例代码 +```css +margin: 0; +margin: 0 auto; +margin: 0 auto 10px; +margin: 0 10px 10px 20px; +``` +|缩写属性|支持的缩写格式|备注| +| --- | --- | --- | +|text-decoration|仅支持 text-decoration-line text-decoration-style text-decoration-color|顺序固定，值以空格分隔后按按顺序赋值| +|margin|margin: 0;margin: 0 auto;margin: 0 auto 10px;margin: 0 10px 10px 20px;|-| +|padding|padding: 0;padding: 0 auto;padding: 0 auto 10px;padding: 0 10px 10px 20px;|-| +|text-shadow|仅支持 offset-x offset-y blur-radius color 排序|顺序固定，值以空格分隔后按按顺序赋值| +|border|仅支持 border-width border-style border-color|顺序固定，值以空格分隔后按按顺序赋值| +|box-shadow|仅支持 offset-x offset-y blur-radius color|顺序固定，值以空格分隔后按按顺序赋值| +|flex|仅支持 flex-grow flex-shrink flex-basis|顺序固定，值以空格分隔后按按顺序赋值| +|flex-flow|仅支持 flex-direction flex-wrap|顺序固定，值以空格分隔后按按顺序赋值| +|border-radius|支持 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius|顺序固定，值以空格分隔后按按顺序赋值；当设置 border-radius: 0 相当于同时设置了4个方向| +|background|仅支持 background-image background-color background-repeat|顺序不固定，具体每个属性的支持情况参见上面具体属性支持的文档； ### CSS函数 -@hjw +#### var() +##### 使用说明 +##### 示例代码 +#### calc() +#### 使用说明 +##### 示例代码 +#### env() +#### 使用说明 +##### 示例代码 ### 使用原子类 ## 混合编写RN代码 From 3a0e80de5c111ca772bb3ee9cc0bddc1aae1861b Mon Sep 17 00:00:00 2001 From: wangcuijuan Date: Mon, 16 Dec 2024 15:53:08 +0800 Subject: [PATCH 06/73] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=88=87=E5=88=86?= =?UTF-8?q?=E6=94=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 21 +++++++++++++++++++ .../api/action-sheet/rnActionSheet.jsx | 17 +++++++++++---- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 069591d9a0..3db0221c24 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -542,6 +542,24 @@ movable-view的可移动区域。 1. 仅支持 type 为 2D 1. image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分 +##### web-view +承载网页的容器。会自动铺满整个RN页面 + + +属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | +| src | String | | webview 指向网页的链接，如果需要对跳转的URL设定白名单可跳转，需要在业务跳转之前出来该逻辑 +| bindmessage | EventHandler | | 网页向RN通过 postMessage 传递数据 +| bindload | EventHandler | | 网页加载成功时候触发此事件 +| binderror | EventHandler | | 网页加载失败的时候触发此事件 + + +注意事项 + +1. web-view网页中可使用@mpxjs/webview-bridge@2.9.68提供的接口返回RN页面或与RN页面通信，具体使用细节可以参见[Webview API](#WebviewAPI) + #### 自定义组件 #### 样式规则 @@ -550,7 +568,10 @@ movable-view的可移动区域。 #### 环境API + + #### Webview API +对于web-view组件打开的网页，想要跟RN通信，或者跳转到RN页面，提供了以下能力 #### 其他使用限制 如事件的target等 diff --git a/packages/api-proxy/src/platform/api/action-sheet/rnActionSheet.jsx b/packages/api-proxy/src/platform/api/action-sheet/rnActionSheet.jsx index 4e68c19bca..c6583655c3 100644 --- a/packages/api-proxy/src/platform/api/action-sheet/rnActionSheet.jsx +++ b/packages/api-proxy/src/platform/api/action-sheet/rnActionSheet.jsx @@ -1,19 +1,24 @@ -import { View, TouchableHighlight, Text, StyleSheet, Button, Animated } from 'react-native' +import { View, TouchableHighlight, Text, StyleSheet, Button, Animated, UIManager } from 'react-native' import { successHandle, failHandle } from '../../../common/js' import { Portal } from '@ant-design/react-native' function showActionSheet (options = {}) { + UIManager.setLayoutAnimationEnabledExperimental && + UIManager.setLayoutAnimationEnabledExperimental(true) const { alertText, itemList = [], itemColor = '#000000', success, fail, complete } = options let actionSheetKey const slideAnim = new Animated.Value(500) const slideIn = () => { + console.log('in') // Will change fadeAnim value to 1 in 5 seconds Animated.timing(slideAnim, { toValue: 0, duration: 200, - useNativeDriver: true, + useNativeDriver: true // 这行代码确保了动画在 Android 上的渲染 }).start() + console.log(slideAnim, '-----') } const slideOut = () => { + console.log('out') // Will change fadeAnim value to 1 in 5 seconds Animated.timing(slideAnim, { toValue: 500, @@ -52,7 +57,7 @@ function showActionSheet (options = {}) { borderTopLeftRadius: 10, borderTopRightRadius: 10, transform: [{ - translateY: -500 + translateY: 500 }] }, itemStyle: { @@ -106,7 +111,11 @@ function showActionSheet (options = {}) { style={[ styles.actionSheetContent, { - transform: [{translateY: slideAnim}] + transform: [{ + translateY: slideAnim + }, { + perspective: 1000 + }] } ]}> { alertTextList.map((item, index) => {item}) } From 2b467a7a9f3cf12119b813bb25031532c2ef46db Mon Sep 17 00:00:00 2001 From: wenwen Date: Mon, 16 Dec 2024 20:53:29 +0800 Subject: [PATCH 07/73] feat: add init style md --- docs-vuepress/guide/platform/rn.md | 173 ++++++++++++++++++++++------- 1 file changed, 131 insertions(+), 42 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index fd2861670f..21eccbbaa0 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -2,9 +2,28 @@ 大致介绍 ## 跨端样式定义 -RN 的样式的支持基本为 web 样式的一个子集，同时还有一些属性并未与 web 对齐，因此跨平台输出 RN 时，为了保障多端输出样式一致，可参考本文针对样式在RN上的支持情况来进行样式编写。 +基本为 web 样式的一个子集， +RN 样式属性和 CSS 样式属性是相交关系，RN 有少部分样式属性（比如 tintColor、writingDirection 等） CSS 不支持，CSS 也有部分样式属性 RN 不支持（比如 clip-path、animation、transition 等）。 + +因此，一方面在我们进行跨平台开发时，跨平台代码需要尽量使用功能的交集；另一方面为了减少开发适配的成本，Mpx 内部也对 RN 的样式作了部分抹平。 + +具体工作分为两大类有： + +**编译时的class类样式转化** +- 属性名转驼峰 +- 单位的校验和对齐 +- 过滤 RN 不支持的属性和属性值 +- 简写转换 +- 样式属性差异转换和拉齐 + +**运行时的style样式处理** +- 属性名转驼峰 +- 单位的计算和处理 +- 100% 计算 +- css func 处理，包括 env()、calc()、var() + ### CSS选择器 -RN 环境下仅支持以下类名选择器，不支持逗号之外的组合选择器。 +RN 环境下仅支持以下类选择器，不支持逗号之外的组合选择器。 ``` css /* 支持 */ .classname { @@ -17,16 +36,25 @@ RN 环境下仅支持以下类名选择器，不支持逗号之外的组合选 ### 样式单位 #### number 类型值 RN 环境中，number 数值型单位支持 px rpx % 三种，web 下的 vw em rem 等不支持。 +Todo: 支持的单位以及%分别是相对自己还是父级的某属性梳理补充 #### color 类型值 RN 环境支持大部分 css 中 color 定义方式，仅少量不支持，详情参考 RN 文档 https://reactnative.dev/docs/colors +Todo: 不支持的颜色形式补充 ### 文本样式继承 -RN中，文本节点需要通过Text组件来创建文本节点。文本节点需要给Text组件来设定[属性](https://reactnative.dev/docs/text-style-props)来调整文本的外观。 -Web/小程序中，文本节点可以通过div/view节点进行直接包裹，在div/view标签上设定对应文本样式即可。不需单独包裹text节点。 -框架抹平了此部分的差异，但仍因受限于RN内text的样式[继承原则的限制](https://reactnative.dev/docs/text#limited-style-inheritance)，通过在祖先节点来设置文本节点的样式仍旧无法生效。 +Web/小程序中，文本节点可以通过 div/view 节点进行直接包裹，在 div/view 节点上也可以直接设定对应文本样式。 +但是在RN中，必须通过 Text 来创建文本节点，[文本样式属性](https://reactnative.dev/docs/text-style-props)只有设置给 Text 节点才能生效。 +Mpx 框架抹平了这部分的差异，在使用 Mpx 转 RN 时，我们可以使用 view 节点直接包裹文本，也可以在 view 节点上设置文本样式作用到直接子 text 节点上。 +但仍因受限于[RN内 text 的样式继承原则的限制](https://reactnative.dev/docs/text#limited-style-inheritance)，只有 view 节点下的子 text 节点可以继承 view 节点上的文本样式，且 text 节点之间可以继承。 +具体参考以下代码： #### 示例代码 ``` html + - 我是文本 + 文本1 + 文本2 + 文本3 + 文本4 + 文本5 .wrapper { @@ -35,47 +63,102 @@ Web/小程序中，文本节点可以通过div/view节点进行直接包裹， .content { text-align: right; } -/** 以上例子中 -web渲染效果: 字体的大小为20px，文字居右 -转RN之后渲染效果: 字体大小为默认大小，文字居右 -*/ -``` -#### 使用说明 -1. 无法通过设置祖先节点的样式来修改文本节点的样式，只可通过修改直接包裹文本的节点来修改文本的样式。 -2. 框架处理将文本节点样式的默认值与web进行了对齐，如果需要按照RN的默认值来进行渲染，可设置`disable-default-style`为`true` + +``` +> **使用说明** +> 1. 只有父级 view 节点的文本样式可以被子 text 节点继承； +> 2. view 节点直接包裹文本实际上等同于 view>text>文本，Mpx 框架在编译时若检测到 view 节点直接包裹文本会自动添加一层 text 节点； +> 3. 多级 text 节点可实现文本样式的继承，比如 text>text>文本 ； +> 4. 若不想使用 Mpx 内部实现的 view>text>文本 这种文本样式继承，可设置`disable-default-style=true` 来关闭该继承逻辑； ### 简写样式属性 -#### text-decoration -##### 使用说明 -1.仅支持 text-decoration-line text-decoration-style text-decoration-color -##### 示例代码 -```css -margin: 0; -margin: 0 auto; -margin: 0 auto 10px; -margin: 0 10px 10px 20px; -``` -|缩写属性|支持的缩写格式|备注| -| --- | --- | --- | -|text-decoration|仅支持 text-decoration-line text-decoration-style text-decoration-color|顺序固定，值以空格分隔后按按顺序赋值| -|margin|margin: 0;margin: 0 auto;margin: 0 auto 10px;margin: 0 10px 10px 20px;|-| -|padding|padding: 0;padding: 0 auto;padding: 0 auto 10px;padding: 0 10px 10px 20px;|-| -|text-shadow|仅支持 offset-x offset-y blur-radius color 排序|顺序固定，值以空格分隔后按按顺序赋值| -|border|仅支持 border-width border-style border-color|顺序固定，值以空格分隔后按按顺序赋值| -|box-shadow|仅支持 offset-x offset-y blur-radius color|顺序固定，值以空格分隔后按按顺序赋值| -|flex|仅支持 flex-grow flex-shrink flex-basis|顺序固定，值以空格分隔后按按顺序赋值| -|flex-flow|仅支持 flex-direction flex-wrap|顺序固定，值以空格分隔后按按顺序赋值| -|border-radius|支持 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius|顺序固定，值以空格分隔后按按顺序赋值；当设置 border-radius: 0 相当于同时设置了4个方向| -|background|仅支持 background-image background-color background-repeat|顺序不固定，具体每个属性的支持情况参见上面具体属性支持的文档； +在 Mpx 内对于通过 class 类来定义的样式会按照 RN 的样式规则在编译处理一遍，其中最重要的一部分就是将 RN 不支持简写属性按约定的规则转换成 RN 能支持多属性结构。 + +现已支持的简写属性如下: +- [text-shadow]() +- [text-decoration]() +- [border]() +- [border-left]() +- [border-right]() +- [border-top]() +- [border-bottom]() +- [border-radius]() +- [border-width]() +- [border-color]() +- [box-shadow]() +- [flex]() +- [flex-flow]() +- [margin]() +- [padding]() +- [background]() + +> **注意事项**： +> 考虑到运行时转化的性能开销问题，简写能力只在编译处理时转化，所以 class 类上设置时简写属性会处理转化的，而在 style 属性上使用了对应的简写是不会转化的，若对应的简写属性 RN 不支持，那在 style 上使用时需要分开写。 + +[//]: # (表格形式先注释) +[//]: # () +[//]: # (|简写属性| 文档 |) + +[//]: # (|---|----------|) + +[//]: # (|text-shadow|链一下api文档|) + +[//]: # (|text-decoration| |) + +[//]: # (|border| |) + +[//]: # (|border-left| |) + +[//]: # (|border-right| |) + +[//]: # (|border-top| |) + +[//]: # (|border-bottom| |) + +[//]: # (|flex| |) + +[//]: # (|flex-flow| |) + +[//]: # (|border-radius| |) + +[//]: # (|border-width| |) + +[//]: # (|border-color| |) + +[//]: # (|margin| |) + +[//]: # (|padding| |) + +[//]: # (|box-shadow| |) +[//]: # (|background| |) + ### CSS函数 #### var() -##### 使用说明 -##### 示例代码 +具体处理逻辑 +```css +/* 代码示意 */ +``` +> 注意事项 #### calc() -#### 使用说明 -##### 示例代码 +具体处理逻辑 +```css +/* 代码示意 */ +``` +> 注意事项 #### env() -#### 使用说明 -##### 示例代码 +具体处理逻辑 +```css +/* 代码示意 */ +``` +> 注意事项 ### 使用原子类 ## 混合编写RN代码 @@ -93,6 +176,7 @@ margin: 0 10px 10px 20px; ### 自定义组件 ### 样式规则 +Todo 补充细节 #### position 设置元素的定位样式 ##### 值类型 @@ -212,6 +296,7 @@ flex-shrink: 10rpx; flex-shrink: 20%; ``` #### flex +Todo 重要 flex-grow flex-shrink flex-basis 的缩写 ##### 值类型 按顺序分别对应 flex-grow flex-shrink flex-basis 的值类型，flex: number >= 0 (flex-grow) number >= 0 (flex-shrink) px,rpx,% (flex-basis) @@ -472,6 +557,10 @@ background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); /* offset-x | offset-y | blur-radius | color */ box-shadow: 0 1px 3px rgba(139,0,0,0.32); ``` +> 注意事项 +> - android 不支持 +> - ios 也只支持 offset-x | offset-y | blur-radius | color, 不支持 spread-radius +> - react@0.76 支持了 box-shadow #### backface-visibility 指定当 背面朝向观察者时是否可见，仅 支持 ##### 值类型 From ecf1ae190d28a51f1eff26a3abc056bc1ba06677 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Tue, 17 Dec 2024 19:16:16 +0800 Subject: [PATCH 08/73] =?UTF-8?q?docs:=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 | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index a7f59fe2d5..4953efcd12 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -65,12 +65,15 @@ | enhanced | Boolean | `false` | scroll-view 组件功能增强 | | refresher-enabled | Boolean | `false` | 开启自定义下拉刷新 | | scroll-anchoring | Boolean | `false` | 开启滚动区域滚动锚点 | +| scroll-into-view | Boolean | `false` | 值应为某子元素id（id不能以数字开头） | | refresher-default-style | String | `'black'` | 设置下拉刷新默认样式,支持 `black`、`white`、`none`，仅安卓支持 | | refresher-background | String | `'#fff'` | 设置自定义下拉刷新背景颜色，仅安卓支持 | | refresher-triggered | Boolean | `false` | 设置当前下拉刷新状态,true 表示已触发 | | paging-enabled | Number | `false` | 分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置 | | show-scrollbar | Number | `true` | 滚动条显隐控制 (同时开启 enhanced 属性后生效)| | enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| +| simultaneous-handlers | Array | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件。 +| wait-for | Array | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件。 事件 @@ -88,6 +91,9 @@ 注意事项 1. 目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来 +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] #### swiper @@ -146,14 +152,20 @@ 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 | 摩擦系数 | -|disabled | boolean | false | 是否禁用 | -|scale | boolean | false | 是否支持双指缩放 | -|scale-min | Number | 0.1 | 定义缩放倍数最小值 | -|scale-max | Number | 10 | 定义缩放倍数最大值 | -|scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.1 - 10 | +| friction | Number | 7 | 摩擦系数 | +| disabled | boolean | false | 是否禁用 | +| animation | boolean | true | 是否使用动画 | +| simultaneous-handlers | Array | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件。 +| wait-for | Array | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件。 + +注意事项 + +1. simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture] +2. wait-for 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail] 事件 @@ -557,6 +569,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] 定义的属性、方法 3. canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘图，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机 +4. 通过 Canvas.createImage 画图，图片的链接不能有特殊字符，安卓手机可能会 load 失败 ### 自定义组件 From 6646b411efd152d620bfc60c12dae923e76cb3c1 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Tue, 17 Dec 2024 20:12:23 +0800 Subject: [PATCH 09/73] =?UTF-8?q?docs:=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 | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 4953efcd12..908fbbeec6 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -28,6 +28,14 @@ ### 基础组件 目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件属性即为不支持，具体使用范围可参考如下文档 +基础组件通用属性 + +| enable-offset | Boolean | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| +| enable-var | Boolean | true | 默认支持使用 css variable，若想关闭该功能可设置为 false | +| parent-font-size | Number | 0 | 父组件字体大小，主要用于百分比计算的场景，如 font-size: 100%| +| parent-width | Number | 0 | 父组件宽度，主要用于百分比计算的场景，如 width: calc(100% - 20px)，需要在外部传递父组件的宽度| +| parent-height | Number | 0 | 父组件高度，主要用于百分比计算的场景，如 height: calc(100% - 20px),需要在外部传递父组件的高度| + #### view 视图容器。 @@ -185,6 +193,9 @@ movable-view的可移动区域。 | enable | boolean | true | 是否从页面中脱离出来 ｜ +注意事项: + +1. style 样式不支持中使用百分比计算、css variable #### cover-view 视图容器。 From 10738bed06d7d16a5e5a4c1d6eb8417a23973464 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 18 Dec 2024 10:42:38 +0800 Subject: [PATCH 10/73] =?UTF-8?q?docs:=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 908fbbeec6..3ee3e6437b 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -579,7 +579,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] 定义的属性、方法 -3. canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘图，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机 +3. canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘制，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机 4. 通过 Canvas.createImage 画图，图片的链接不能有特殊字符，安卓手机可能会 load 失败 ### 自定义组件 From 54b6df6d529788889da560b02a03d308d90f6bea Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 18 Dec 2024 10:55:20 +0800 Subject: [PATCH 11/73] =?UTF-8?q?docs:=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 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 3ee3e6437b..eac77584d1 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -188,8 +188,8 @@ movable-view的可移动区域。 使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。 属性 -| 属性名 | 类型 | 默认值 | 说明 | -| ------ | ---------------- | ------ | ----------------------------------------------------------------------------------------------------- | +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | | enable | boolean | true | 是否从页面中脱离出来 ｜ From 776016599d9fc43b87509a02c700146479f5c3c4 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 18 Dec 2024 11:13:12 +0800 Subject: [PATCH 12/73] =?UTF-8?q?docs:=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 | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index eac77584d1..a0989a261c 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -26,15 +26,17 @@ ### 模版语法 ### 基础组件 -目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件属性即为不支持，具体使用范围可参考如下文档 +目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件以及组件属性即为不支持，具体使用范围可参考如下文档 -基础组件通用属性 +RN环境基础组件通用属性 +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------------- | ------- | ------------- | ---------------------------------------------------------- | | enable-offset | Boolean | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| | enable-var | Boolean | true | 默认支持使用 css variable，若想关闭该功能可设置为 false | -| parent-font-size | Number | 0 | 父组件字体大小，主要用于百分比计算的场景，如 font-size: 100%| -| parent-width | Number | 0 | 父组件宽度，主要用于百分比计算的场景，如 width: calc(100% - 20px)，需要在外部传递父组件的宽度| -| parent-height | Number | 0 | 父组件高度，主要用于百分比计算的场景，如 height: calc(100% - 20px),需要在外部传递父组件的高度| +| parent-font-size | Number | | 父组件字体大小，主要用于百分比计算的场景，如 font-size: 100%| +| parent-width | Number | | 父组件宽度，主要用于百分比计算的场景，如 width: calc(100% - 20px)，需要在外部传递父组件的宽度| +| parent-height | Number | | 父组件高度，主要用于百分比计算的场景，如 height: calc(100% - 20px),需要在外部传递父组件的高度| #### view 视图容器。 @@ -167,13 +169,8 @@ movable-view的可移动区域。 | friction | Number | 7 | 摩擦系数 | | disabled | boolean | false | 是否禁用 | | animation | boolean | true | 是否使用动画 | -| simultaneous-handlers | Array | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件。 -| wait-for | Array | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件。 - -注意事项 - -1. simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture] -2. wait-for 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail] +| simultaneous-handlers | Array | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件 +| wait-for | Array | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件 事件 @@ -184,6 +181,12 @@ movable-view的可移动区域。 | htouchmove | 初次手指触摸后移动为横向的移动时触发 | | vtouchmove | 初次手指触摸后移动为纵向的移动时触发 | + +注意事项 + +1. simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture] +2. wait-for 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail] + #### root-portal 使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。 属性 From 1cb192f3138774d32f12b85d3be82369e98a4b0f Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 18 Dec 2024 11:22:06 +0800 Subject: [PATCH 13/73] =?UTF-8?q?docs:=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 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index a0989a261c..e52ec52d53 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -196,7 +196,7 @@ movable-view的可移动区域。 | enable | boolean | true | 是否从页面中脱离出来 ｜ -注意事项: +注意事项 1. style 样式不支持中使用百分比计算、css variable @@ -241,6 +241,7 @@ movable-view的可移动区域。 | bindtap | 点击的时候触发 | 注意事项 + 1. 未包裹 text 标签的文本，会自动包裹 text 标签。 2. text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段 @@ -577,7 +578,6 @@ API | getContext | 该方法返回 Canvas 的绘图上下文。仅支持在 2D Canvas 中使用 | | toDataURL | 返回一个包含图片展示的 data URI | - 注意事项 1. canvas 组件目前仅支持 2D 类型，不支持 webgl From 1281b30a554bf44f43ad3e3ec7cdbca4e1979d4a Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 18 Dec 2024 11:47:48 +0800 Subject: [PATCH 14/73] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E7=9B=B8=E5=85=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 92 ++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index e52ec52d53..8afd06d3fc 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -25,6 +25,98 @@ ### 模版语法 +#### 事件处理 +目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获 + +普通事件绑定 +```js + + Click here! + +``` + +绑定并阻止事件冒泡 +```js + + Click here! + +``` + +事件捕获 + +```js + + outer view + + inner view + + +``` + +中断捕获阶段和取消冒泡阶段 + +```js + + outer view + + +``` + +在此基础上也新增了事件处理内联传参的增强机制。 + +```html + + +``` + +除此之外，Mpx 也支持了动态事件绑定 + +```html + + +``` + +注意事项 + +1. 当同一个元素上同时绑定了 catchtap 和 bindtap 事件时，两个事件都会被触发执行。但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。 +如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。如果第一个绑定的是 bindtap，则不会阻止事件冒泡。 +2. 当同一个元素上绑定了 capture-bind:tap 和 bindtap 事件时，事件的执行时机会根据模板上第一个绑定事件的标识符来决定。如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发，如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。 +3. 当使用了事件委托想获取 e.target.dataset 时，只有点击到文本节点才能获取到，点击其他区域无效。建议直接将事件绑定到事件触发的元素上，使用 e.currentTarget 来获取 dataset 等数据。 + + ### 基础组件 目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件以及组件属性即为不支持，具体使用范围可参考如下文档 From de2110aaf79c7538b88d532149798e4f3154a74e Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 18 Dec 2024 21:30:20 +0800 Subject: [PATCH 15/73] =?UTF-8?q?docs:=E4=BF=AE=E6=94=B9=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 | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 8afd06d3fc..7cefa76400 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -174,8 +174,9 @@ RN环境基础组件通用属性 | paging-enabled | Number | `false` | 分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置 | | show-scrollbar | Number | `true` | 滚动条显隐控制 (同时开启 enhanced 属性后生效)| | enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息| -| simultaneous-handlers | Array | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件。 -| wait-for | Array | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件。 +| enable-trigger-intersection-observer | Boolean | [] | 是否开启intersection-observer | +| simultaneous-handlers | Array | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件 | +| wait-for | Array | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件 | 事件 @@ -261,8 +262,8 @@ movable-view的可移动区域。 | friction | Number | 7 | 摩擦系数 | | disabled | boolean | false | 是否禁用 | | animation | boolean | true | 是否使用动画 | -| simultaneous-handlers | Array | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件 -| wait-for | Array | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件 +| simultaneous-handlers | Array | [] | 主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件 | +| wait-for | Array | [] | 主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件 | 事件 From bc858f02931e556d26216b724b693eee42a07937 Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 19 Dec 2024 15:48:21 +0800 Subject: [PATCH 16/73] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/.vuepress/config.js | 10 ++++++++++ docs-vuepress/guide/platform/{index.md => basic.md} | 0 docs-vuepress/guide/platform/miniprogram.md | 1 + docs-vuepress/guide/platform/web.md | 1 + .../api-proxy/src/platform/api/storage/rnStorage.js | 2 +- .../api-proxy/src/platform/api/system/index.ios.js | 2 +- 6 files changed, 14 insertions(+), 2 deletions(-) rename docs-vuepress/guide/platform/{index.md => basic.md} (100%) diff --git a/docs-vuepress/.vuepress/config.js b/docs-vuepress/.vuepress/config.js index 796588e020..40cc2e3ce4 100644 --- a/docs-vuepress/.vuepress/config.js +++ b/docs-vuepress/.vuepress/config.js @@ -46,6 +46,16 @@ const sidebar = { 'advance/provide-inject' ] }, + { + title: '跨端', + collapsable: false, + children: [ + 'platform/basic', + 'platform/miniprogram', + 'platform/web', + 'platform/rn' + ] + }, { title: '组合式 API', collapsable: false, diff --git a/docs-vuepress/guide/platform/index.md b/docs-vuepress/guide/platform/basic.md similarity index 100% rename from docs-vuepress/guide/platform/index.md rename to docs-vuepress/guide/platform/basic.md diff --git a/docs-vuepress/guide/platform/miniprogram.md b/docs-vuepress/guide/platform/miniprogram.md index e69de29bb2..0390001e1b 100644 --- a/docs-vuepress/guide/platform/miniprogram.md +++ b/docs-vuepress/guide/platform/miniprogram.md @@ -0,0 +1 @@ +# 跨端输出小程序 diff --git a/docs-vuepress/guide/platform/web.md b/docs-vuepress/guide/platform/web.md index e69de29bb2..e2ee6ceaa5 100644 --- a/docs-vuepress/guide/platform/web.md +++ b/docs-vuepress/guide/platform/web.md @@ -0,0 +1 @@ +# 跨端输出Web diff --git a/packages/api-proxy/src/platform/api/storage/rnStorage.js b/packages/api-proxy/src/platform/api/storage/rnStorage.js index 8612c44813..be94ec5f4f 100644 --- a/packages/api-proxy/src/platform/api/storage/rnStorage.js +++ b/packages/api-proxy/src/platform/api/storage/rnStorage.js @@ -1,4 +1,4 @@ -import AsyncStorage from '@react-native-async-storage/async-storage' +// import AsyncStorage from '@react-native-async-storage/async-storage' import { envError, successHandle, failHandle, defineUnsupportedProps } from '../../../common/js' import { hasOwn } from '@mpxjs/utils' function setStorage (options = {}) { diff --git a/packages/api-proxy/src/platform/api/system/index.ios.js b/packages/api-proxy/src/platform/api/system/index.ios.js index 6633441b55..2c6a88155e 100644 --- a/packages/api-proxy/src/platform/api/system/index.ios.js +++ b/packages/api-proxy/src/platform/api/system/index.ios.js @@ -1,4 +1,4 @@ -import DeviceInfo from 'react-native-device-info' +// import DeviceInfo from 'react-native-device-info' import { PixelRatio } from 'react-native' import { successHandle, failHandle, defineUnsupportedProps } from '../../../common/js' import { getWindowInfo, getLaunchOptionsSync, getEnterOptionsSync } from './rnSystem' From e4148e0affd96b2c7fd1442ca224d00c78c36b87 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Fri, 20 Dec 2024 16:56:09 +0800 Subject: [PATCH 17/73] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E7=9B=B8=E5=85=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 7cefa76400..d3a7e221fd 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -115,6 +115,7 @@ 如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。如果第一个绑定的是 bindtap，则不会阻止事件冒泡。 2. 当同一个元素上绑定了 capture-bind:tap 和 bindtap 事件时，事件的执行时机会根据模板上第一个绑定事件的标识符来决定。如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发，如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。 3. 当使用了事件委托想获取 e.target.dataset 时，只有点击到文本节点才能获取到，点击其他区域无效。建议直接将事件绑定到事件触发的元素上，使用 e.currentTarget 来获取 dataset 等数据。 +4. 如果元素上设置了 opacity: 0 的样式，会导致 ios 事件无法响应。 ### 基础组件 From 327aa11a424430e3870011c3e1d2eac5bcea812a Mon Sep 17 00:00:00 2001 From: wangcuijuan Date: Mon, 23 Dec 2024 21:37:57 +0800 Subject: [PATCH 18/73] =?UTF-8?q?=E5=85=88=E6=8F=90=E4=BA=A4=E4=B8=80?= =?UTF-8?q?=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/guide/platform/rn.md | 162 ++++++++++++++++++++++++++++- 1 file changed, 161 insertions(+), 1 deletion(-) diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vuepress/guide/platform/rn.md index 3db0221c24..b8ab0d48c4 100644 --- a/docs-vuepress/guide/platform/rn.md +++ b/docs-vuepress/guide/platform/rn.md @@ -567,12 +567,172 @@ movable-view的可移动区域。 #### 应用能力 #### 环境API - +在RN环境中也提供了一部分常用api能力，方法名与使用方式与小程序相同，可能对于某个api提供的能力会比微信小程序提供的能力少一些，以下是使用说明： +##### 使用说明 +如果全量引入api-proxy这种情况下，需要如下配置 +```javascript +// 全量引入api-proxy +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三方库 | +|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------| +| showActionSheet | react-native-reanimated | +| getNetworkType、
offNetworkStatusChange、
onNetworkStatusChange | @react-native-community/netinfo | +| getLocation、
openLocation、
chooseLocation | react-native-get-location | +| setStorage、
setStorageSync、
getStorage、
getStorageSync、
getStorageInfo、
getStorageInfoSync、
removeStorage，
removeStorageSync，
clearStorage，
clearStorageSync | @react-native-async-storage/async-storage | +| getSystemInfo、
getSystemInfoSync、
getDeviceInfo、
getWindowInfo、
getLaunchOptionsSync、
getEnterOptionsSync | react-native-device-info | +| getWindowInfo、
getLaunchOptionsSync、
getEnterOptionsSync | react-native-safe-area-context | +| vibrateShort、
vibrateLong | react-native-haptic-feedback | + +在RN 项目中，如果是以全量引入api-proxy的方法需要在RN环境中执行以下所有的命令，如果只是使用单个api的能力，可以参考上表来判断安装对应的包 +``` +// 安装api-proxy下所用到的依赖 如果 +npm i @react-native-async-storage/async-storage +npm i @react-native-clipboard/clipboard +npm i @react-native-community/netinfo +npm i react-native-safe-area-context +npm i react-native-device-info +npm i react-native-reanimated +npm i react-native-haptic-feedback +ios项目需要执行如下命令 +cd ios +pod install + +npm i react-native-get-location +``` + +android下需要做如下配置： +安装react-native-get-location包后，需要在AndroidManifest.xml中定义位置权限，[参考文档](https://www.npmjs.com/package/react-native-get-location) +``` + + + + + + +``` +安装react-native-haptic-feedback包后需要在安卓中配置，[配置参考文档](https://github.com/mkuczera/react-native-haptic-feedback) +打开 android/app/src/main/java/[...]/MainApplication.java. 在文件的顶部添加以下导入下面的代码片段 +``` +import com.mkuczera.RNReactNativeHapticFeedbackPackage; +``` + + +修改设置,将下面的配置添加到android/settings.gradle文件中 + +```javascript +include ':react-native-haptic-feedback' +project(':react-native-haptic-feedback').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-haptic-feedback/android') +``` +react-native-reanimated在mpx和RN项目都要安装，安装好包后需要在babel.config.json文件中做如下配置，并且RN环境中使用的react-native-reanimated与mpx项目中安装的react-native-reanimated版本要一致： +[配置参考文档](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) +```javascript +module.exports = { + presets: [ + ... // don't add it here :) + ], + plugins: [ + ... + 'react-native-reanimated/plugin', + ], +}; +``` #### Webview API 对于web-view组件打开的网页，想要跟RN通信，或者跳转到RN页面，提供了以下能力 +| 方法名 | 说明 | +|---------------|---------------------------------------------| +| navigateTo | 保留当前webview页面，跳转RN页面 | +| navigateBack | 关闭当前页面，返回上一页或多级RN页面 | +| switchTab | 跳转到RN的 tabBar 页面 | +| reLaunch | 关闭所有页面，打开到应用内的某个RN页面 | +| redirectTo | 关闭当前页面，跳转到应用内的某个RN页面 | +| getEnv | 获取当前环境 | +| postMessage | 向RN发送消息，实时触发组件的message事件 | +| invoke | 开放一个webview页面和web页面互通消息的能力 | + +##### webview-bridge示例代码 +```javascript +import webviewBridge from '@mpxjs/webview-bridge' +webviewBridge.navigateTo({ + url: 'RN地址', + success: () => { + console.log('跳转成功') + } +}) +``` + +##### invoke示例代码 +RN环境中挂载getTime的逻辑 +```javascript +import mpx from '@mpxjs/core' +... +// 普通方法 +mpx.config.webviewConfig = { + apiImplementations: { + getTime: (options = {}) => { + const { params = {} } = options + return { + text: params.text, + time: '2024-12-24' + } + } + } +} +// 或者promise +mpx.config.webviewConfig = { + apiImplementations: { + getTime: (options = {}) => { + return new Promise((resolve, reject) => { + const { params = {} } = options + if (params.text) { + resolve({ + text: params.text, + time: '2024-12-24' + }) + } else { + reject(new Error('没有传text参数')) + } + }) + } + } +} +... +``` +web中通信的逻辑 +```javascript +import webviewBridge from '@mpxjs/webview-bridge' +webviewBridge.invoke('getTime', { + params: { + text: '我是入参' + }, + success: (res) => { + console.log('接收到的消息：', res.time) + } +}) +``` + + #### 其他使用限制 如事件的target等 From 1dd453c59777d027c2441c2944483885b5ac75b4 Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 26 Dec 2024 16:23:15 +0800 Subject: [PATCH 19/73] =?UTF-8?q?docs:=E6=9A=82=E5=AD=98=E6=A8=A1=E7=89=88?= =?UTF-8?q?=E8=AF=AD=E6=B3=95=E6=94=B9=E5=8A=A8=E9=83=A8=E5=88=86=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/api/directives.md | 6 +- docs-vuepress/guide/basic/list-render.md | 42 +++++- docs-vuepress/guide/platform/rn.md | 175 +++++++++++++++++++++-- 3 files changed, 205 insertions(+), 18 deletions(-) diff --git a/docs-vuepress/api/directives.md b/docs-vuepress/api/directives.md index 1814839ef3..075fd67669 100644 --- a/docs-vuepress/api/directives.md +++ b/docs-vuepress/api/directives.md @@ -91,7 +91,8 @@ Page({ ``` ``` js -Page({ +import { createComponent } from '@mpxjs/core' +createComponent({ data: { array: [{ id: 1, text: 'foo' @@ -126,7 +127,8 @@ Page({ ``` ``` js -Page({ +import { createComponent } from '@mpxjs/core' +createComponent({ data: { array: [{ id: 1, text: 'foo' diff --git a/docs-vuepress/guide/basic/list-render.md b/docs-vuepress/guide/basic/list-render.md index c32322368f..9a25b31e2a 100644 --- a/docs-vuepress/guide/basic/list-render.md +++ b/docs-vuepress/guide/basic/list-render.md @@ -1,6 +1,8 @@ # 列表渲染 -Mpx中的列表渲染与原生小程序中完全一致，详情可以查看[这里](https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html) +在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 + +默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。 > 值得注意的是wx:key与Vue中的key属性的区别，不能使用数据绑定，只能传递普通字符串将数组item中的对应属性作为key，或者传入保留关键字*this将item本身作为key @@ -9,7 +11,7 @@ Mpx中的列表渲染与原生小程序中完全一致，详情可以查看[这 ```html