Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 优化组件-基础组件文档 #2572

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 93 additions & 100 deletions mini/component/基础组件/地图/map 高级定制渲染.md

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions mini/component/基础组件/基础内容/icon 图标.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@

## 使用限制

- icon 组件不支持 onTapcatchTap 等点击事件。
- 跳转页面后左上角显示返回上一页 icon,不支持隐藏。
- icon 中所应用的样式如果是插件中的样式,建议修改样式定义的 `class` 名等信息,否则 icon 中不写插件代码显示正常,添加插件代码 icon 显示不正常。
- `icon` 组件不支持 `onTap`、`catchTap` 等点击事件。
- 跳转页面后左上角显示返回上一页 `icon`,不支持隐藏。
- `icon` 中所应用的样式如果是插件中的样式,建议修改样式定义的 `class` 名等信息,否则 `icon` 中不写插件代码显示正常,添加插件代码 `icon` 显示不正常。

## 扫码体验

![|127x157](https://gw.alipayobjects.com/zos/skylark-tools/public/files/7380714f62c709478a9a507f9ff8450d.png#align=left&display=inline&height=157&margin=%5Bobject%20Object%5D&originHeight=157&originWidth=127&status=done&style=none&width=127)
![图标体验二维码](https://gw.alipayobjects.com/zos/skylark-tools/public/files/7380714f62c709478a9a507f9ff8450d.png)

# 使用

## 在线示例

[小程序在线](https://opendocs.alipay.com/openbox/mini/opendocs/basic-component?view=preview&defaultPage=pages/icon/index&defaultOpenedFiles=pages/icon/index&theme=light)
[小程序在线示例](https://opendocs.alipay.com/openbox/mini/opendocs/basic-component?view=preview&defaultPage=pages/icon/index&defaultOpenedFiles=pages/icon/index&theme=light)

## 属性说明

| **属性** | **类型** | **描述** |
| --- | --- | --- |
| type | String | icon 类型。有效值: infowarnwaitingcanceldownloadsearchclearsuccesssuccess_no_circleloading。<br />**版本要求:** loading 支持基础库 [1.7.2](/mini/framework/compatibility) 及以上 |
| size | Number | icon 大小,单位 px。<br />**默认值:** 23 |
| color | String | icon 颜色,同 CSS 色值。 |
| 属性 | 类型 | 描述 |
| ---- | ------ | ---------------------------------------------------------- |
| type | String | `icon` 类型。有效值:`info`、`warn`、`waiting`、`cancel`、`download`、`search`、`clear`、`success`、`success_no_circle`、`loading`。<br />版本要求:`loading` 支持基础库 1.7.2 及以上版本。 |
| size | Number | `icon` 大小,单位为 px。<br />默认值:23 |
| color| String | `icon` 颜色,同 CSS 色值。 |
19 changes: 10 additions & 9 deletions mini/component/基础组件/基础内容/progress 进度条.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# 简介

当页面在请求数据过程中,会出现信息读取的进度过程。

# 使用限制
**Native 渲染引擎**:暂不支持。可以通过 `my.canIUse('progress')` 判断是否支持。

Expand All @@ -12,15 +13,15 @@

## 在线示例

[小程序在线](https://opendocs.alipay.com/openbox/mini/opendocs/basic-component?view=preview&defaultPage=pages/progress/index&defaultOpenedFiles=pages/progress/index&theme=light)
[小程序在线示例](https://opendocs.alipay.com/openbox/mini/opendocs/basic-component?view=preview&defaultPage=pages/progress/index&defaultOpenedFiles=pages/progress/index&theme=light)

## 属性说明

| **属性** | **类型** | **描述** |
| --- | --- | --- |
| percent | Float | 百分比(0~100)。 |
| show-info | Boolean | 在右侧显示百分比值。<br />**默认值:** show-info="{{false}}" |
| stroke-width | Number | 线的粗细,单位 px。<br />**默认值:** 6 |
| active-color | Color | 已选择的进度条颜色。<br />**默认值:** #09BB07 |
| background-color | Color | 未选择的进度条颜色。 |
| active | Boolean | 是否添加从 0% 开始加载的入场动画。<br />**默认值:** `active="{{false}}"` |
| 属性 | 类型 | 描述 |
| ------------ | ------- | ---------------- |
| percent | Float | 百分比0~100。 |
| show-info | Boolean | 在右侧显示百分比值。默认值:`show-info="{{false}}"` |
| stroke-width | Number | 线的粗细,单位是 `px`。默认值:6 |
| active-color | Color | 已选择的进度条颜色。默认值:`#09BB07` |
| background-color | Color | 未选择的进度条颜色。 |
| active | Boolean | 是否添加从 0% 开始加载的入场动画。默认值:`active="{{false}}"` |
184 changes: 90 additions & 94 deletions mini/component/基础组件/基础内容/rich-text 富文本.md

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions mini/component/基础组件/基础内容/text 文本.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@

## 属性说明

| **属性** | **类型** | **描述** |
| --- | --- | --- |
| selectable | Boolean | 是否可选。<br />**默认值:** false |
| space | String | 以何种方式显示连续空格。 |
| decode | Boolean | 是否解码。为 true 时表示对文本内容进行解码,可解析的 HTML 实体字符有:`&nbsp;&lt;&gt;&amp;&apos;&ensp;&emsp;`。<br />**默认值:** false |
| 属性 | 类型 | 描述 |
| ------------ | ------- | --------------------------------------------------------- |
| selectable | Boolean | 是否可选。**默认值:** false |
| space | String | 以何种方式显示连续空格。 |
| decode | Boolean | 是否解码。为 true 时表示对文本内容进行解码,可解析的 HTML 实体字符有:`&nbsp;`、`&lt;`、`&gt;`、`&amp;`、`&apos;`、`&ensp;`、`&emsp;`。**默认值:** false |
| number-of-lines | Number | 多行省略,值须大于等于 1,表现同 css 的 `-webkit-line-clamp` 属性一致。 |

### space 有效值

**说明:** 各个操作系统的空格标准并不一致。

| **属性** | **描述** |
| -------- | ------------------------ |
| nbsp | 根据字体设置的空格大小。 |
| ensp | 中文字符空格一半大小。 |
| emsp | 中文字符空格大小。 |
| 属性 | 描述 |
| ---- | ---------------- |
| nbsp | 根据字体设置的空格大小。 |
| ensp | 中文字符空格一半大小。 |
| emsp | 中文字符空格大小。 |
66 changes: 33 additions & 33 deletions mini/component/基础组件/媒体组件/camera 相机.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
# 简介
系统相机。<br />相关 API:[my.createCameraContext](https://opendocs.alipay.com/mini/03qfj7)

系统相机。相关 API:[my.createCameraContext](https://opendocs.alipay.com/mini/03qfj7)。

## 使用限制

- 基础库 [1.11.0](https://opendocs.alipay.com/mini/framework/lib) 开始支持,低版本需要做 [兼容处理](https://opendocs.alipay.com/mini/framework/compatibility)。
- 需在组件初始化完成后即 `onReady` 回调触发后再执行 my.createCameraContext。
- 需在组件初始化完成后,即 `onReady` 回调触发后再执行 `my.createCameraContext`

# 使用

## 示例代码

### .axml 示例代码

```html
<camera
id="camera"
id="camera"
device-position="front"
flash="off"
flash="off"
style="width: 100%; height: 300px;"
onReady="onCameraReady"
onError="onCameraError"
Expand All @@ -24,14 +26,15 @@
```

### .js 示例代码

```javascript
Page({
onCameraReady(e) {
console.log('相机初始化完成');
console.log('相机初始化完成');
this.cameraContext = my.createCameraContext('camera');
this.cameraContext.takePhoto({
success(res) {
console.log(res);
success(res) {
console.log(res);
}
})
},
Expand All @@ -43,58 +46,55 @@ Page({
},
})
```

## 属性说明
| **属性** | **类型** | **说明** |
| 属性 | 类型 | 说明 |
| --- | --- | --- |
| mode | String | 应用模式。<br />**默认值:**normal<br />**版本要求**:基础库 [1.19.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| device-position | String | 摄像头朝向,前置或后置。可选值为 front、back。 |
| flash | String | 闪光灯。可选值为 auto、on、off。<br />**默认值:**auto<br />**版本要求**:基础库 [1.18.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| output-dimension | String | 相机拍照,录制的分辨率。<br />有效值为 360P、540P、720P、1080P、max。<br />**默认值:**720P<br />**版本要求**:基础库 [1.23.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| frame-size | String | 指定期望的相机帧数据尺寸。<br />**默认值:**medium<br />**版本要求**:基础库 [1.19.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| onReady | EventHandle | 相机初始化成功时触发。`event.detail = {maxZoom}`<br />**版本要求**:基础库 [1.24.3](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。<br />基础库 [2.7.16](https://opendocs.alipay.com/mini/framework/lib-upgrade-v2)、客户端 10.2.58 开始支持返回 `maxZoom`。 |
| mode | String | 应用模式。<br />默认值:normal<br />版本要求:基础库 [1.19.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| device-position | String | 摄像头朝向,前置或后置。可选值为 front、back。 |
| flash | String | 闪光灯。可选值为 auto、on、off。<br />默认值:auto<br />版本要求:基础库 [1.18.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| output-dimension | String | 相机拍照,录制的分辨率。<br />有效值为 360P、540P、720P、1080P、max。<br />默认值:720P<br />版本要求:基础库 [1.23.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| frame-size | String | 指定期望的相机帧数据尺寸。<br />默认值:medium<br />版本要求:基础库 [1.19.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| onReady | EventHandle | 相机初始化成功时触发。event.detail = {maxZoom}<br />版本要求:基础库 [1.24.3](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。<br />基础库 [2.7.16](https://opendocs.alipay.com/mini/framework/lib-upgrade-v2)、客户端 10.2.58 开始支持返回 maxZoom。 |
| onStop | EventHandle | 摄像头在非正常终止时触发,如页面隐藏、退出小程序、压后台等情况。 |
| onError | EventHandle | 用户不允许使用摄像头时触发。`event.detail = { errorCode, errorMessage }`。 |
| onScanCode | EventHandle | 在扫码识别成功时触发,仅在 mode="scanCode" 时生效。`event.detail = { type, result }`。`type` 为码类型,`result` 为识别结果。<br />**版本要求**:基础库 [1.19.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |
| onError | EventHandle | 用户不允许使用摄像头时触发。event.detail = { errorCode, errorMessage }。 |
| onScanCode | EventHandle | 在扫码识别成功时触发,仅在 mode="scanCode" 时生效。event.detail = { type, result }type 为码类型,result 为识别结果。<br />版本要求:基础库 [1.19.0](https://opendocs.alipay.com/mini/framework/compatibility) 及以上。 |


### mode 的合法值
| **值** | **说明** |
| | 说明 |
| --- | --- |
| normal | 相机模式 |
| scanCode | 扫码模式 |


### device-position 的合法值
| **值** | **说明** |
| | 说明 |
| --- | --- |
| front | 前置 |
| back | 后置 |


### flash 的合法值
| **值** | **说明** |
| | 说明 |
| --- | --- |
| auto | 自动 |
| on | 打开 |
| off | 关闭 |


### frame-size 的合法值
| **值** | **说明** |
| | 说明 |
| --- | --- |
| small | 小尺寸帧数据 (360 x 640) |
| medium | 中尺寸帧数据 (540 x 960) |
| large | 大尺寸帧数据 (720 x 1280) |


| medium | 中尺寸帧数据 (540 x 960) |
| large | 大尺寸帧数据 (720 x 1280) |
### 错误码
| **错误码** | **错误描述** |
| --- | --- |
| 1001 | 权限校验失败 |
| 1002 | 磁盘文件相关错误 |
| 1004 | 无摄像头权限 |
| 1005 | 无麦克风权限 |
| 1009 | 扫码时禁止拍照录像 |
| 1000 | 其他错误 |

| 错误码 | 错误描述 |
| ------ | ---------------- |
| 1001 | 权限校验失败 |
| 1002 | 磁盘文件相关错误 |
| 1004 | 无摄像头权限 |
| 1005 | 无麦克风权限 |
| 1009 | 扫码时禁止拍照录像 |
| 1000 | 其他错误 |
Loading