提交 cf4b9bb0 编写于 作者: O openharmony_ci 提交者: Gitee

!774 format modification

Merge pull request !774 from zengyawen/master
# 应用开发
- [应用开发导读](application-dev-guide.md)
- DevEco Studio(OpenHarmony)使用指南
- [概述](quick-start/deveco-studio-overview.md)
- [版本变更说明](quick-start/deveco-studio-release-notes.md)
- [配置OpenHarmony SDK](quick-start/configuring-openharmony-sdk.md)
- 创建OpenHarmony工程
- [使用工程向导创建新工程](quick-start/use-wizard-to-create-project.md)
- [通过导入Sample方式创建新工程](quick-start/import-sample-to-create-project.md)
- [配置OpenHarmony应用签名信息](quick-start/configuring-openharmony-app-signature.md)
- [安装运行OpenHarmony应用](quick-start/installing-openharmony-app.md)
- [包结构说明](quick-start/package-structure.md)
- 快速入门
- [开发准备](quick-start/start-overview.md)
- [使用JS语言开发](quick-start/start-with-js.md)
- JS UI框架
- [JS UI框架概述](ui/ui-js-overview.md)
- 构建用户界面
- [组件介绍](ui/ui-js-building-ui-component.md)
- 构建布局
- [布局说明](ui/ui-js-building-ui-layout-intro.md)
- [添加标题行和文本区域](ui/ui-js-building-ui-layout-text.md)
- [添加图片区域](ui/ui-js-building-ui-layout-image.md)
- [添加留言区域](ui/ui-js-building-ui-layout-comment.md)
- [添加容器](ui/ui-js-building-ui-layout-external-container.md)
- [添加交互](ui/ui-js-building-ui-interactions.md)
- [动画](ui/ui-js-building-ui-animation.md)
- [事件](ui/ui-js-building-ui-event.md)
- [页面路由](ui/ui-js-building-ui-routes.md)
- [自定义组件](ui/ui-js-custom-components.md)
- 音频
- [音频开发概述](media/audio-overview.md)
- [音频播放开发指导](media/audio-playback.md)
- [音频管理开发指导](media/audio-management.md)
- [音频录制开发指导](media/audio-recorder.md)
- IPC与RPC通信
- [IPC与RPC通信概述](connectivity/ipc-rpc-overview.md)
- [IPC与RPC通信开发指导](connectivity/ipc-rpc-development-guideline.md)
- [远端状态订阅开发实例](connectivity/subscribe-remote-state.md)
- JS 开发参考
- 框架说明
- [文件组织](js-reference/js-framework-file.md)
- [js标签配置](js-reference/js-framework-js-tag.md)
- [app.js](js-reference/js-framework-js-file.md)
- 语法
- [HML语法参考](js-reference/js-framework-syntax-hml.md)
- [CSS语法参考](js-reference/js-framework-syntax-css.md)
- [JS语法参考](js-reference/js-framework-syntax-js.md)
- [生命周期](js-reference/js-framework-lifecycle.md)
- [资源限定与访问](js-reference/js-framework-resource-restriction.md)
- [多语言支持](js-reference/js-framework-multiple-languages.md)
- 组件
- 通用
- [通用属性](js-reference/component/js-components-common-attributes.md)
- [通用样式](js-reference/component/js-components-common-styles.md)
- [通用事件](js-reference/component/js-components-common-events.md)
- [通用方法](js-reference/component/js-components-common-methods.md)
- [动画样式](js-reference/component/js-components-common-animation.md)
- [渐变样式](js-reference/component/js-components-common-gradient.md)
- [转场样式](js-reference/component/js-components-common-transition.md)
- [媒体查询](js-reference/component/js-components-common-mediaquery.md)
- [自定义字体样式](js-reference/component/js-components-common-customizing-font.md)
- [原子布局](js-reference/component/js-components-common-atomic-layout.md)
- 容器组件
- [badge](js-reference/component/js-components-container-badge.md)
- [dialog](js-reference/component/js-components-container-dialog.md)
- [div](js-reference/component/js-components-container-div.md)
- [form](js-reference/component/js-components-container-form.md)
- [list](js-reference/component/js-components-container-list.md)
- [list-item](js-reference/component/js-components-container-list-item.md)
- [list-item-group](js-reference/component/js-components-container-list-item-group.md)
- [panel](js-reference/component/js-components-container-panel.md)
- [popup](js-reference/component/js-components-container-popup.md)
- [refresh](js-reference/component/js-components-container-refresh.md)
- [stack](js-reference/component/js-components-container-stack.md)
- [stepper](js-reference/component/js-components-container-stepper.md)
- [stepper-item](js-reference/component/js-components-container-stepper-item.md)
- [swiper](js-reference/component/js-components-container-swiper.md)
- [tabs](js-reference/component/js-components-container-tabs.md)
- [tab-bar](js-reference/component/js-components-container-tab-bar.md)
- [tab-content](js-reference/component/js-components-container-tab-content.md)
- 基础组件
- [button](js-reference/component/js-components-basic-button.md)
- [chart](js-reference/component/js-components-basic-chart.md)
- [divider](js-reference/component/js-components-basic-divider.md)
- [image](js-reference/component/js-components-basic-image.md)
- [image-animator](js-reference/component/js-components-basic-image-animator.md)
- [input](js-reference/component/js-components-basic-input.md)
- [label](js-reference/component/js-components-basic-label.md)
- [marquee](js-reference/component/js-components-basic-marquee.md)
- [menu](js-reference/component/js-components-basic-menu.md)
- [option](js-reference/component/js-components-basic-option.md)
- [picker](js-reference/component/js-components-basic-picker.md)
- [picker-view](js-reference/component/js-components-basic-picker-view.md)
- [piece](js-reference/component/js-components-basic-piece.md)
- [progress](js-reference/component/js-components-basic-progress.md)
- [qrcode](js-reference/component/js-components-basic-qrcode.md)
- [rating](js-reference/component/js-components-basic-rating.md)
- [richtext](js-reference/component/js-components-basic-richtext.md)
- [search](js-reference/component/js-components-basic-search.md)
- [select](js-reference/component/js-components-basic-select.md)
- [slider](js-reference/component/js-components-basic-slider.md)
- [span](js-reference/component/js-components-basic-span.md)
- [switch](js-reference/component/js-components-basic-switch.md)
- [text](js-reference/component/js-components-basic-text.md)
- [textarea](js-reference/component/js-components-basic-textarea.md)
- [toolbar](js-reference/component/js-components-basic-toolbar.md)
- [toolbar-item](js-reference/component/js-components-basic-toolbar-item.md)
- [toggle](js-reference/component/js-components-basic-toggle.md)
- 媒体组件
- [video](js-reference/component/js-components-media-video.md)
- 画布组件
- [canvas组件](js-reference/component/js-components-canvas-canvas.md)
- [CanvasRenderingContext2D对象](js-reference/component/js-components-canvas-canvasrenderingcontext2d.md)
- [Image对象](js-reference/component/js-components-canvas-image.md)
- [CanvasGradient对象](js-reference/component/js-components-canvas-canvasgradient.md)
- [ImageData对象](js-reference/component/js-components-canvas-imagedata.md)
- [Path2D对象](js-reference/component/js-components-canvas-path2d.md)
- [ImageBitmap对象](js-reference/component/js-components-canvas-imagebitmap.md)
- [OffscreenCanvas对象](js-reference/component/js-components-canvas-offscreencanvas.md)
- [OffscreenCanvasRenderingContext2D对象](js-reference/component/js-components-canvas-offscreencanvasrenderingcontext2d.md)
- 栅格组件
- [基本概念](js-reference/component/js-components-grid-basic-concepts.md)
- [grid-container](js-reference/component/js-components-grid-container.md)
- [grid-row](js-reference/component/js-components-grid-row.md)
- [grid-col](js-reference/component/js-components-grid-col.md)
- svg组件
- [通用属性](js-reference/component/js-components-svg-common-attributes.md)
- [svg](js-reference/component/js-components-svg.md)
- [rect](js-reference/component/js-components-svg-rect.md)
- [circle](js-reference/component/js-components-svg-circle.md)
- [ellipse](js-reference/component/js-components-svg-ellipse.md)
- [path](js-reference/component/js-components-svg-path.md)
- [line](js-reference/component/js-components-svg-line.md)
- [polyline](js-reference/component/js-components-svg-polyline.md)
- [polygon](js-reference/component/js-components-svg-polygon.md)
- [text](js-reference/component/js-components-svg-text.md)
- [tspan](js-reference/component/js-components-svg-tspan.md)
- [textPath](js-reference/component/js-components-svg-textpath.md)
- [animate](js-reference/component/js-components-svg-animate.md)
- [animateMotion](js-reference/component/js-components-svg-animate-motion.md)
- [animateTransform](js-reference/component/js-components-svg-animate-transform.md)
- 自定义组件
- [基本用法](js-reference/component/js-components-custom-basic-usage.md)
- [自定义事件](js-reference/component/js-components-custom-events.md)
- [Props](js-reference/component/js-components-custom-props.md)
- [事件参数](js-reference/component/js-components-custom-event-parameter.md)
- [slot插槽](js-reference/component/js-components-custom-slot.md)
- [生命周期定义](js-reference/component/js-components-custom-lifecycle.md)
- 接口
- 基本功能
- [应用上下文](js-reference/apis/js-apis-system-app.md)
- [日志打印](js-reference/apis/js-apis-basic-features-logs.md)
- [页面路由](js-reference/apis/js-apis-system-router.md)
- [弹窗](js-reference/apis/js-apis-system-prompt.md)
- [应用配置](js-reference/apis/js-apis-system-configuration.md)
- [定时器](js-reference/apis/js-apis-system-timer.md)
- [动画](js-reference/apis/js-apis-animator.md)
- [应用打点](js-reference/apis/js-apis-hiappevent.md)
- [性能打点](js-reference/apis/js-apis-bytrace.md)
- [分布式帐号管理](js-reference/apis/js-apis-distributedaccount.md)
- 媒体
- [音频管理](js-reference/apis/js-apis-audio.md)
- [音频播放](js-reference/apis/js-apis-media.md)
- 数据管理
- [文件管理](js-reference/apis/js-apis-fileio.md)
- [单版本分布式数据库](js-reference/apis/js-apis-data-singlekvstore.md)
- [创建和获取分布式数据库](js-reference/apis/js-apis-data-kvmanager.md)
- [KVManager配置信息](js-reference/apis/js-apis-data-kvmanager-config.md)
- [分布式数据库操作描述](js-reference/apis/js-apis-data-kvstore.md)
- [数据类型描述](js-reference/apis/js-apis-data-type.md)
- [轻量级存储](js-reference/apis/js-apis-data-storage.md)
- 设备管理
- [设备信息](js-reference/apis/js-apis-deviceinfo.md)
- [系统属性](js-reference/apis/js-apis-systemparameter.md)
- [系统恢复](js-reference/apis/js-apis-update.md)
- [显示设备属性](js-reference/apis/js-apis-display.md)
- [电池和充电属性](js-reference/apis/js-apis-batteryinfo.md)
- [设置系统屏幕亮度](js-reference/apis/js-apis-brightness.md)
- [系统电源管理](js-reference/apis/js-apis-power.md)
- [Runninglock锁](js-reference/apis/js-apis-runninglock.md)
- [传感器](js-reference/apis/js-apis-sensor.md)
- [振动](js-reference/apis/js-apis-vibrate.md)
- [国际化(I18n)](js-reference/apis/js-apis-i18n.md)
- [国际化(Intl)](js-reference/apis/js-apis-intl.md)
- [资源管理](js-reference/apis/js-apis-resourcemanage.md)
- [时间设置](js-reference/apis/js-apis-systemtime.md)
- [升级](js-reference/apis/js-apis-libupdateclient.md)
- [获取进程相关的信息](js-reference/apis/js-apis-process.md)
- [字符串编解码](js-reference/apis/js-apis-util.md)
- [启动一个worker](js-reference/apis/js-apis-worker.md)
- [URL字符串解析](js-reference/apis/js-apis-url.md)
# 应用开发导读<a name="ZH-CN_TOPIC_0000001162242674"></a>
# 应用开发导读
应用开发文档用于指导开发者通过OpenHarmony提供的接口完成应用开发。当前应用开发文档提供了在标准系统上开发应用的JS接口。
在这部分中,开发者可以通过“[入门](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/quick-start/Readme-CN.md)”来了解应用开发的基本方法。完整的接口清单和参考使用指导可参见“[JS开发参考](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/js-reference/Readme-CN.md)”。
在这部分中,开发者可以通过“[入门](quick-start/Readme-CN.md)”来了解应用开发的基本方法。完整的接口清单和参考使用指导可参见“[JS开发参考](js-reference/Readme-CN.md)”。
除此之外,为方便开发者对常用功能进行深入理解,还提供了[UI](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/ui/Readme-CN.md)[媒体](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/media/Readme-CN.md)[网络与连接](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/connectivity/Readme-CN.md)三个模块的开发指南。
除此之外,为方便开发者对常用功能进行深入理解,还提供了[UI](ui/Readme-CN.md)[媒体](media/Readme-CN.md)[网络与连接](connectivity/Readme-CN.md)三个模块的开发指南。
如果需要了解各子系统的原理和基本信息,可以参考“docs/zh-cn/readme”目录中各子系统readme的介绍。
# 网络与连接
- [IPC与RPC通信](ipc-rpc.md)
- [IPC与RPC通信概述](ipc-rpc-overview.md)
- [IPC与RPC通信开发指导](ipc-rpc-development-guideline.md)
- [远端状态订阅开发实例](subscribe-remote-state.md)
- IPC与RPC通信
- [IPC与RPC通信概述](ipc-rpc-overview.md)
- [IPC与RPC通信开发指导](ipc-rpc-development-guideline.md)
- [远端状态订阅开发实例](subscribe-remote-state.md)
# IPC与RPC通信开发指导<a name="ZH-CN_TOPIC_0000001103710988"></a>
# IPC与RPC通信开发指导
- [场景介绍](#section18502174174019)
- [接口说明](#section1633115419401)
- [开发步骤](#section4207112818418)
- [场景介绍](#场景介绍)
- [接口说明](#接口说明)
- [开发步骤](#开发步骤)
## 场景介绍<a name="section18502174174019"></a>
## 场景介绍
IPC/RPC的主要工作是让运行在不同进程的Proxy和Stub互相通信,包括Proxy和Stub运行在不同设备的情况。
## 接口说明<a name="section1633115419401"></a>
**表 1** Native侧IPC接口
<a name="table178849240013"></a>
<table><thead align="left"><tr id="row6884924608"><th class="cellrowborder" valign="top" width="14.12141214121412%" id="mcps1.2.4.1.1"><p id="p98846241706"><a name="p98846241706"></a><a name="p98846241706"></a>类/接口</p>
</th>
<th class="cellrowborder" valign="top" width="52.54525452545254%" id="mcps1.2.4.1.2"><p id="p1488482414020"><a name="p1488482414020"></a><a name="p1488482414020"></a>方法</p>
</th>
<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="p388516244016"><a name="p388516244016"></a><a name="p388516244016"></a>功能说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row15885824402"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p08859241008"><a name="p08859241008"></a><a name="p08859241008"></a>IRemoteBroker</p>
</td>
<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 "><p id="p388572412010"><a name="p388572412010"></a><a name="p388572412010"></a>sptr&lt;IRemoteObject&gt; AsObject()</p>
</td>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p13885724405"><a name="p13885724405"></a><a name="p13885724405"></a>返回通信对象。派生类需要实现,Stub端返回RemoteObject对象本身,Proxy端返回代理对象。</p>
</td>
</tr>
<tr id="row138859241808"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p1888515245012"><a name="p1888515245012"></a><a name="p1888515245012"></a>IRemoteStub</p>
</td>
<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 "><p id="p1388516240011"><a name="p1388516240011"></a><a name="p1388516240011"></a>virtual int OnRemoteRequest(uint32_t code, MessageParcel &amp;data, MessageParcel &amp;reply, MessageOption &amp;option)</p>
</td>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p1188582414016"><a name="p1188582414016"></a><a name="p1188582414016"></a>请求处理方法,派生类需要重写,处理Proxy的请求并返回结果。</p>
</td>
</tr>
<tr id="row108856241904"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p6885924609"><a name="p6885924609"></a><a name="p6885924609"></a>IRemoteProxy</p>
</td>
<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 ">&nbsp;&nbsp;</td>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p688592413018"><a name="p688592413018"></a><a name="p688592413018"></a>业务Proxy类派生自IRemoteProxy类。</p>
</td>
</tr>
</tbody>
</table>
## 开发步骤<a name="section4207112818418"></a>
**Native侧开发步骤**
## 接口说明
1. 定义IPC接口ITestAbility
**表1** Native侧IPC接口
SA接口继承IPC基类接口IRemoteBroker,接口里定义描述符、业务函数和消息码,其中业务函数在Proxy端和Stub端都需要实现。
| 类/接口 | 方法 | 功能说明 |
| -------- | -------- | -------- |
| IRemoteBroker | sptr&lt;IRemoteObject&gt;&nbsp;AsObject() | 返回通信对象。派生类需要实现,Stub端返回RemoteObject对象本身,Proxy端返回代理对象。 |
| IRemoteStub | virtual&nbsp;int&nbsp;OnRemoteRequest(uint32_t&nbsp;code,&nbsp;MessageParcel&nbsp;&amp;data,&nbsp;MessageParcel&nbsp;&amp;reply,&nbsp;MessageOption&nbsp;&amp;option) | 请求处理方法,派生类需要重写,处理Proxy的请求并返回结果。 |
| IRemoteProxy | | 业务Proxy类派生自IRemoteProxy类。 |
```
class ITestAbility : public IRemoteBroker {
public:
// DECLARE_INTERFACE_DESCRIPTOR是必须的, 入参需使用std::u16string;
DECLARE_INTERFACE_DESCRIPTOR(u"test.ITestAbility");
int TRANS_ID_PING_ABILITY = 1; // 定义消息码
virtual int TestPingAbility(const std::u16string &dummy) = 0; // 定义业务函数
};
```
2. 定义和实现服务端TestAbilityStub
## 开发步骤
该类是和IPC框架相关的实现,需要继承 IRemoteStub<ITestAbility\>。Stub端作为接收请求的一端,需重写OnRemoteRequest方法用于接收客户端调用。
**Native侧开发步骤**
```
class TestAbilityStub : public IRemoteStub<ITestAbility> {
public:
virtual int OnRemoteRequest(uint32_t code, MessageParcel &data, MessageParcel &reply, MessageOption &option) override;
int TestPingAbility(const std::u16string &dummy) override;
1. 定义IPC接口ITestAbility
SA接口继承IPC基类接口IRemoteBroker,接口里定义描述符、业务函数和消息码,其中业务函数在Proxy端和Stub端都需要实现。
```
class ITestAbility : public IRemoteBroker {
public:
// DECLARE_INTERFACE_DESCRIPTOR是必须的,入参需使用std::u16string;
DECLARE_INTERFACE_DESCRIPTOR(u"test.ITestAbility");
int TRANS_ID_PING_ABILITY = 1; // 定义消息码
virtual int TestPingAbility(const std::u16string &dummy) = 0; // 定义业务函数
};
```
2. 定义和实现服务端TestAbilityStub
该类是和IPC框架相关的实现,需要继承 IRemoteStub&lt;ITestAbility&gt;。Stub端作为接收请求的一端,需重写OnRemoteRequest方法用于接收客户端调用。
```
class TestAbilityStub : public IRemoteStub<ITestAbility> {
public:
virtual int OnRemoteRequest(uint32_t code, MessageParcel &data, MessageParcel &reply, MessageOption &option) override;
int TestPingAbility(const std::u16string &dummy) override;
};
int TestServiceStub::OnRemoteRequest(uint32_t code,
MessageParcel &data, MessageParcel &reply, MessageOption &option)
{
switch (code) {
case TRANS_ID_PING_ABILITY: {
std::u16string dummy = data.ReadString16();
int result = TestPingAbility(dummy);
reply.WriteInt32(result);
return 0;
}
default:
return IPCObjectStub::OnRemoteRequest(code, data, reply, option);
}
}
```
3. 定义服务端业务函数具体实现类TestAbility
```
class TestAbility : public TestAbilityStub {
public:
int TestPingAbility(const std::u16string &dummy);
}
int TestAbility::TestPingAbility(const std::u16string &dummy) {
return 0;
}
```
4. 定义和实现客户端TestAbilityProxy
该类是Proxy端实现,继承IRemoteProxy<ITestAbility\>,调用SendRequest接口向Stub端发送请求,对外暴露服务端提供的能力。
```
class TestAbilityProxy : public IRemoteProxy<ITestAbility> {
public:
explicit TestAbilityProxy(const sptr<IRemoteObject> &impl);
int TestPingService(const std::u16string &dummy) override;
private:
static inline BrokerDelegator<TestAbilityProxy> delegator_; // 方便后续使用iface_cast宏
int TestServiceStub::OnRemoteRequest(uint32_t code,
MessageParcel &data, MessageParcel &reply, MessageOption &option)
{
switch (code) {
case TRANS_ID_PING_ABILITY: {
std::u16string dummy = data.ReadString16();
int result = TestPingAbility(dummy);
reply.WriteInt32(result);
return 0;
}
default:
return IPCObjectStub::OnRemoteRequest(code, data, reply, option);
}
}
```
3. 定义服务端业务函数具体实现类TestAbility
```
class TestAbility : public TestAbilityStub {
public:
int TestPingAbility(const std::u16string &dummy);
}
int TestAbility::TestPingAbility(const std::u16string &dummy) {
return 0;
}
```
4. 定义和实现客户端 TestAbilityProxy
该类是Proxy端实现,继承IRemoteProxy&lt;ITestAbility&gt;,调用SendRequest接口向Stub端发送请求,对外暴露服务端提供的能力。
```
class TestAbilityProxy : public IRemoteProxy<ITestAbility> {
public:
explicit TestAbilityProxy(const sptr<IRemoteObject> &impl);
int TestPingService(const std::u16string &dummy) override;
private:
static inline BrokerDelegator<TestAbilityProxy> delegator_; // 方便后续使用iface_cast宏
}
TestAbilityProxy::TestAbilityProxy(const sptr<IRemoteObject> &impl)
: IRemoteProxy<ITestAbility>(impl)
{
}
int TestAbilityProxy::TestPingService(const std::u16string &dummy){
MessageOption option;
MessageParcel dataParcel, replyParcel;
dataParcel.WriteString16(dummy);
int error = Remote()->SendRequest(TRANS_ID_PING_ABILITY, dataParcel, replyParcel, option);
int result = (error == ERR_NONE) ? replyParcel.ReadInt32() : -1;
return result;
}
TestAbilityProxy::TestAbilityProxy(const sptr<IRemoteObject> &impl)
: IRemoteProxy<ITestAbility>(impl)
{
}
int TestAbilityProxy::TestPingService(const std::u16string &dummy) {
MessageOption option;
MessageParcel dataParcel, replyParcel;
dataParcel.WriteString16(dummy);
int error = Remote()->SendRequest(TRANS_ID_PING_ABILITY, dataParcel, replyParcel, option);
int result = (error == ERR_NONE) ? replyParcel.ReadInt32() : -1;
return result;
}
```
5. SA注册与启动
SA需要将自己的TestAbilityStub实例通过AddSystemAbility接口注册到SystemAbilityManager,设备内与分布式的注册参数不同。
```
// 注册到本设备内
auto samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
samgr->AddSystemAbility(said, new TestAbility());
// 在组网场景下,会被同步到其他设备上
auto samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
ISystemAbilityManager::SAExtraProp saExtra;
saExtra.isDistributed = true; // 设置为分布式SA
int result = samgr->AddSystemAbility(said, new TestAbility(), saExtra);
```
6. SA获取与调用
通过SystemAbilityManager的GetSystemAbility方法可获取到对应SA的代理IRemoteObject,然后构造TestAbilityProxy即可。
```
// 获取本设备内注册的SA的proxy
sptr<ISystemAbilityManager> samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
sptr<IRemoteObject> remoteObject = samgr->GetSystemAbility(said);
sptr<ITestAbility> testAbility = iface_cast<ITestAbility>(remoteObject); // 使用iface_cast宏转换成具体类型
// 获取其他设备注册的SA的Proxy
sptr<ISystemAbilityManager> samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
sptr<IRemoteObject> remoteObject = samgr->GetSystemAbility(sdid, deviceId); // deviceId是指定设备的标识符
sptr<TestAbilityProxy> proxy(new TestAbilityProxy(remoteObject)); // 直接构造具体Proxy
```
```
5. SA 注册与启动
SA 需要将自己的 TestAbilityStub实例通过 AddSystemAbility接口注册到 SystemAbilityManager,设备内与分布式的注册参数不同。
```
// 注册到本设备内
auto samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
samgr->AddSystemAbility(said, new TestAbility());
// 在组网场景下,会被同步到其他设备上
auto samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
ISystemAbilityManager::SAExtraProp saExtra;
saExtra.isDistributed = true; // 设置为分布式SA
int result = samgr->AddSystemAbility(said, new TestAbility(), saExtra);
```
6. SA 获取与调用
通过SystemAbilityManager的GetSystemAbility方法可获取到对应SA的代理IRemoteObject,然后构造TestAbilityProxy即可。
```
// 获取本设备内注册的SA的proxy
sptr<ISystemAbilityManager> samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
sptr<IRemoteObject> remoteObject = samgr->GetSystemAbility(said);
sptr<ITestAbility> testAbility = iface_cast<ITestAbility>(remoteObject); // 使用iface_cast宏转换成具体类型
// 获取其他设备注册的SA的Proxy
sptr<ISystemAbilityManager> samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
sptr<IRemoteObject> remoteObject = samgr->GetSystemAbility(sdid, deviceId); // deviceId是指定设备的标识符
sptr<TestAbilityProxy> proxy(new TestAbilityProxy(remoteObject)); // 直接构造具体Proxy
```
# IPC与RPC通信概述<a name="ZH-CN_TOPIC_0000001103870800"></a>
# IPC与RPC通信概述
- [基本概念](#section175012297491)
- [约束与限制](#section2029921310472)
- [相关模块](#section1189019299446)
- [基本概念](#基本概念)
- [约束与限制](#约束与限制)
- [相关模块](#相关模块)
## 基本概念<a name="section175012297491"></a>
## 基本概念
IPC(Inter-Process Communication)与RPC(Remote Procedure Call)机制用于实现跨进程通信,不同的是前者使用Binder驱动,用于设备内的跨进程通信,而后者使用软总线驱动,用于跨设备跨进程通信。IPC和RPC通常采用客户端-服务器(Client-Server)模型,服务请求方(Client)可获取提供服务提供方(Server)的代理 (Proxy),并通过此代理读写数据来实现进程间的数据通信。通常,Server会先注册系统能力(System Ability)到系统能力管理者(System Ability Manager,缩写SAMgr)中,SAMgr负责管理这些SA并向Client提供相关的接口。Client要和某个具体的SA通信,必须先从SAMgr中获取该SA的代理,然后使用代理和SA通信。下文使用Proxy表示服务请求方,Stub表示服务提供方。
## 约束与限制<a name="section2029921310472"></a>
## 约束与限制
目前暂不支持的场景:
跨设备RPC
## 相关模块<a name="section1189019299446"></a>
分布式任务调度子系统
## 相关模块
分布式任务调度子系统
# IPC与RPC通信<a name="ZH-CN_TOPIC_0000001157385969"></a>
# IPC与RPC通信
- **[IPC与RPC通信概述](ipc-rpc-overview.md)**
- **[IPC与RPC通信开发指导](ipc-rpc-development-guideline.md)**
- **[远端状态订阅开发实例](subscribe-remote-state.md)**
- **[IPC与RPC通信概述](ipc-rpc-overview.md)**
- **[IPC与RPC通信开发指导](ipc-rpc-development-guideline.md)**
- **[远端状态订阅开发实例](subscribe-remote-state.md)**
\ No newline at end of file
# 远端状态订阅开发实例<a name="ZH-CN_TOPIC_0000001104030756"></a>
# 远端状态订阅开发实例
IPC/RPC 提供对远端 Stub对象状态的订阅机制, 在远端 Stub对象死亡时,可触发死亡通知告诉本地 Proxy对象。这种状态通知订阅并不会自动附加在每个本地 Proxy对象上,需要调用特定接口完成,当不再需要订阅时也需要调用特定接口取消。使用这种订阅机制的用户,需要实现死亡通知接口DeathRecipient并实现onRemoteDied方法,清理资源,该方法会在 远端 Stub对象所在进程死亡,或所在设备离开组网时被回调。值得注意的是,调用这些接口有一定的顺序。首先,必然需要 Proxy订阅 Stub死亡通知,若在订阅期间未发生 Stub死亡,则可在不再需要时取消订阅;若在订阅期间发生 Stub死亡,则会自动触发 Proxy自定义的后续操作,也无需再手动取消订阅。
RPC目前不提供匿名 Stub对象的死亡通知,即只有向 SAMgr注册过的服务才能被订阅死亡通知。 IPC则支持匿名对象的死亡通知。
IPC/RPC提供对远端Stub对象状态的订阅机制, 在远端Stub对象死亡时,可触发死亡通知告诉本地Proxy对象。这种状态通知订阅并不会自动附加在每个本地Proxy对象上,需要调用特定接口完成,当不再需要订阅时也需要调用特定接口取消。使用这种订阅机制的用户,需要实现死亡通知接口DeathRecipient并实现onRemoteDied方法,清理资源,该方法会在远端Stub对象所在进程死亡,或所在设备离开组网时被回调。值得注意的是,调用这些接口有一定的顺序。首先,必然需要Proxy订阅Stub死亡通知,若在订阅期间未发生Stub死亡,则可在不再需要时取消订阅;若在订阅期间发生Stub死亡,则会自动触发Proxy自定义的后续操作,也无需再手动取消订阅。
RPC目前不提供匿名Stub对象的死亡通知,即只有向SAMgr注册过的服务才能被订阅死亡通知。IPC则支持匿名对象的死亡通知。
**Native侧接口**
依次为添加对远端Stub对象状态订阅的接口,取消订阅的接口,及感知到远端Stub对象死亡而进行本地操作的接口:
```
bool AddDeathRecipient(const sptr<DeathRecipient> &recipient);
bool RemoveDeathRecipient(const sptr<DeathRecipient> &recipient);
void OnRemoteDied(const wptr<IRemoteObject> &object);
```
参考代码
```
class TestDeathRecipient : public IRemoteObject::DeathRecipient {
public:
virtual void OnRemoteDied(const wptr<IRemoteObject>& remoteObject);
}
sptr<IRemoteObject::DeathRecipient> deathRecipient (new TestDeathRecipient()); // 构造一个死亡通知对象
sptr<IRemoteObject::DeathRecipient> deathRecipient (new TestDeathRecipient());// 构造一个死亡通知对象
bool result = proxy->AddDeathRecipient(deathRecipient); // 注册死亡通知
result = proxy->RemoveDeathRecipient(deathRecipient); // 移除死亡通知
```
# JS开发参考
- [框架说明](js-framework.md)
- 框架说明
- [文件组织](js-framework-file.md)
- [js标签配置](js-framework-js-tag.md)
- [app.js](js-framework-js-file.md)
- [语法](js-framework-syntax.md)
- 语法
- [HML语法参考](js-framework-syntax-hml.md)
- [CSS语法参考](js-framework-syntax-css.md)
- [JS语法参考](js-framework-syntax-js.md)
......@@ -14,7 +14,7 @@
- [多语言支持](js-framework-multiple-languages.md)
- [组件](component/Readme-CN.md)
- [通用](component/js-components-common.md)
- 通用
- [通用属性](component/js-components-common-attributes.md)
- [通用样式](component/js-components-common-styles.md)
- [通用事件](component/js-components-common-events.md)
......@@ -26,7 +26,7 @@
- [自定义字体样式](component/js-components-common-customizing-font.md)
- [原子布局](component/js-components-common-atomic-layout.md)
- [容器组件](component/js-components-container.md)
- 容器组件
- [badge](component/js-components-container-badge.md)
- [dialog](component/js-components-container-dialog.md)
- [div](component/js-components-container-div.md)
......@@ -45,7 +45,7 @@
- [tab-bar](component/js-components-container-tab-bar.md)
- [tab-content](component/js-components-container-tab-content.md)
- [基础组件](component/js-components-basic.md)
- 基础组件
- [button](component/js-components-basic-button.md)
- [chart](component/js-components-basic-chart.md)
- [divider](component/js-components-basic-divider.md)
......@@ -74,10 +74,10 @@
- [toolbar-item](component/js-components-basic-toolbar-item.md)
- [toggle](component/js-components-basic-toggle.md)
- [媒体组件](component/js-components-media.md)
- 媒体组件
- [video](component/js-components-media-video.md)
- [画布组件](component/js-components-canvas.md)
- 画布组件
- [canvas组件](component/js-components-canvas-canvas.md)
- [CanvasRenderingContext2D对象](component/js-components-canvas-canvasrenderingcontext2d.md)
- [Image对象](component/js-components-canvas-image.md)
......@@ -88,15 +88,15 @@
- [OffscreenCanvas对象](component/js-components-canvas-offscreencanvas.md)
- [OffscreenCanvasRenderingContext2D对象](component/js-components-canvas-offscreencanvasrenderingcontext2d.md)
- [栅格组件](component/js-components-grid.md)
- 栅格组件
- [基本概念](component/js-components-grid-basic-concepts.md)
- [grid-container](component/js-components-grid-container.md)
- [grid-row](component/js-components-grid-row.md)
- [grid-col](component/js-components-grid-col.md)
- [svg组件](component/js-components-svg.md)
- svg组件
- [通用属性](component/js-components-svg-common-attributes.md)
- [svg](component/js-components-svg-0.md)
- [svg](component/js-components-svg.md)
- [rect](component/js-components-svg-rect.md)
- [circle](component/js-components-svg-circle.md)
- [ellipse](component/js-components-svg-ellipse.md)
......@@ -111,7 +111,7 @@
- [animateMotion](component/js-components-svg-animate-motion.md)
- [animateTransform](component/js-components-svg-animate-transform.md)
- [自定义组件](component/js-components-custom.md)
- 自定义组件
- [基本用法](component/js-components-custom-basic-usage.md)
- [自定义事件](component/js-components-custom-events.md)
- [Props](component/js-components-custom-props.md)
......@@ -130,7 +130,7 @@
- [Notification模块](apis/js-apis-notification.md)
- [Context模块](apis/js-apis-Context.md)
- [基本功能](apis/js-apis-basic-features.md)
- 基本功能
- [应用上下文](apis/js-apis-system-app.md)
- [日志打印](apis/js-apis-basic-features-logs.md)
- [页面路由](apis/js-apis-system-router.md)
......@@ -141,8 +141,8 @@
- [应用打点](apis/js-apis-hiappevent.md)
- [性能打点](apis/js-apis-bytrace.md)
- [分布式帐号管理](apis/js-apis-distributedaccount.md)
- [媒体](apis/js-apis-multmedia.md)
- 媒体
- [音频管理](apis/js-apis-audio.md)
- [音频播放](apis/js-apis-media.md)
......@@ -152,7 +152,7 @@
- [SIM卡管理](apis/js-apis-sim.md)
- [网络搜索](apis/js-apis-radio.md)
- [数据管理](apis/js-apis-data.md)
- 数据管理
- [文件管理](apis/js-apis-fileio.md)
- [单版本分布式数据库](apis/js-apis-data-singlekvstore.md)
- [创建和获取分布式数据库](apis/js-apis-data-kvmanager.md)
......@@ -160,8 +160,8 @@
- [分布式数据库操作描述](apis/js-apis-data-kvstore.md)
- [数据类型描述](apis/js-apis-data-type.md)
- [轻量级存储](apis/js-apis-data-storage.md)
- [设备管理](apis/js-apis-device-mgmt.md)
- 设备管理
- [设备信息](apis/js-apis-deviceinfo.md)
- [系统属性](apis/js-apis-systemparameter.md)
- [系统恢复](apis/js-apis-update.md)
......
......@@ -57,7 +57,9 @@
>![](../../public_sys-resources/icon-note.gif) **说明:**
>从 API Version 6 开始支持。
>
>- 从 API Version 6 开始支持。
>- 标记<sup>7+</sup>的接口从API Version 7开始支持。
## 导入模块<a name="zh-cn_topic_0000001208447259_s56d19203690d4782bfc74069abb6bd71"></a>
......@@ -72,35 +74,8 @@ import fileio from '@ohos.fileio';
## 使用说明<a name="zh-cn_topic_0000001208447259_section17323786612"></a>
使用该功能模块对文件/目录进行操作前,需要先获取其绝对路径。
<a name="zh-cn_topic_0000001208447259_table859142263817"></a>
<table><thead align="left"><tr id="zh-cn_topic_0000001208447259_row165922243812"><th class="cellrowborder" valign="top" width="21.6%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001208447259_p20593226383"><a name="zh-cn_topic_0000001208447259_p20593226383"></a><a name="zh-cn_topic_0000001208447259_p20593226383"></a>目录类型</p>
</th>
<th class="cellrowborder" valign="top" width="53.57000000000001%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001208447259_p125911229389"><a name="zh-cn_topic_0000001208447259_p125911229389"></a><a name="zh-cn_topic_0000001208447259_p125911229389"></a>说明</p>
</th>
<th class="cellrowborder" valign="top" width="24.830000000000002%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001208447259_p1177425414331"><a name="zh-cn_topic_0000001208447259_p1177425414331"></a><a name="zh-cn_topic_0000001208447259_p1177425414331"></a>相关接口</p>
</th>
</tr>
</thead>
<tbody><tr id="zh-cn_topic_0000001208447259_row14604221386"><td class="cellrowborder" valign="top" width="21.6%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001208447259_p0605228382"><a name="zh-cn_topic_0000001208447259_p0605228382"></a><a name="zh-cn_topic_0000001208447259_p0605228382"></a>内部存储的缓存目录</p>
</td>
<td class="cellrowborder" valign="top" width="53.57000000000001%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001208447259_p76010229385"><a name="zh-cn_topic_0000001208447259_p76010229385"></a><a name="zh-cn_topic_0000001208447259_p76010229385"></a>可读写,随时可能清除,不保证持久性。一般用作下载临时目录或缓存目录。</p>
</td>
<td class="cellrowborder" valign="top" width="24.830000000000002%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001208447259_p1677525420331"><a name="zh-cn_topic_0000001208447259_p1677525420331"></a><a name="zh-cn_topic_0000001208447259_p1677525420331"></a>getCacheDir</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001208447259_row20601622183813"><td class="cellrowborder" valign="top" width="21.6%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001208447259_p166062273813"><a name="zh-cn_topic_0000001208447259_p166062273813"></a><a name="zh-cn_topic_0000001208447259_p166062273813"></a>内部存储目录</p>
</td>
<td class="cellrowborder" valign="top" width="53.57000000000001%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001208447259_p19601522103813"><a name="zh-cn_topic_0000001208447259_p19601522103813"></a><a name="zh-cn_topic_0000001208447259_p19601522103813"></a>随应用卸载删除。</p>
</td>
<td class="cellrowborder" valign="top" width="24.830000000000002%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001208447259_p147753546339"><a name="zh-cn_topic_0000001208447259_p147753546339"></a><a name="zh-cn_topic_0000001208447259_p147753546339"></a>getFilesDir</p>
</td>
</tr>
</tbody>
</table>
“文件/目录绝对路径”=“应用目录路径”+“文件/目录名”
“文件/目录绝对路径”=“应用目录路径”+“文件/目录名”。
应用目录路径可通过[Context模块的接口getOrCreateLocalDir](js-apis-Context.md)获取。
通过上述接口获取到应用目录路径dir,文件名为“xxx.txt”,文件所在绝对路径为:
```
......@@ -2129,4 +2104,3 @@ isSymbolicLink\(\): boolean
let isSymbolicLink = dir.readSync().isSymbolicLink();
```
......@@ -80,9 +80,9 @@
- [grid-row](js-components-grid-row.md)
- [grid-col](js-components-grid-col.md)
- [svg组件](js-components-svg.md)
- [svg组件](js-svg.md)
- [通用属性](js-components-svg-common-attributes.md)
- [svg](js-components-svg-0.md)
- [svg](js-components-svg.md)
- [rect](js-components-svg-rect.md)
- [circle](js-components-svg-circle.md)
- [ellipse](js-components-svg-ellipse.md)
......
# svg<a name="ZH-CN_TOPIC_0000001164577152"></a>
- [权限列表](#zh-cn_topic_0000001173164705_section11257113618419)
- [子组件](#zh-cn_topic_0000001173164705_section9288143101012)
- [属性](#zh-cn_topic_0000001173164705_section2907183951110)
- [示例](#zh-cn_topic_0000001173164705_section360556124815)
基础容器,主要作为svg的根节点使用,也可以在svg中嵌套使用。
>![](../../public_sys-resources/icon-note.gif) **说明:**
>从API Version 7 开始支持。
>约束条件:svg父组件或者svg组件需要定义宽高值,否则不进行绘制。
## 权限列表<a name="zh-cn_topic_0000001173164705_section11257113618419"></a>
## 子组件<a name="zh-cn_topic_0000001173164705_section9288143101012"></a>
支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。
## 属性<a name="zh-cn_topic_0000001173164705_section2907183951110"></a>
支持所列的Svg组件通用属性和以下表格的属性,设置的通用属性会传递给子组件。
<a name="zh-cn_topic_0000001173164705_table20633101642315"></a>
<table><thead align="left"><tr id="zh-cn_topic_0000001173164705_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173164705_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001173164705_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001173164705_aaf1247770b244944bbcc9f28d9a6f00b"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173164705_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001173164705_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001173164705_a6efc3502761f4faf9630e484280f75b6"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173164705_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001173164705_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001173164705_a27a37273d9ad47569ddbcb8db985d302"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173164705_p824610360217"><a name="zh-cn_topic_0000001173164705_p824610360217"></a><a name="zh-cn_topic_0000001173164705_p824610360217"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173164705_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001173164705_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001173164705_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="zh-cn_topic_0000001173164705_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_a83b6dd280109466fb015e64de1ef4df3"><a name="zh-cn_topic_0000001173164705_a83b6dd280109466fb015e64de1ef4df3"></a><a name="zh-cn_topic_0000001173164705_a83b6dd280109466fb015e64de1ef4df3"></a>id</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_abc38fa2b85854bc687af75eb17a00a4d"><a name="zh-cn_topic_0000001173164705_abc38fa2b85854bc687af75eb17a00a4d"></a><a name="zh-cn_topic_0000001173164705_abc38fa2b85854bc687af75eb17a00a4d"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_a8d12e4af905d4743a5ec9cd6018d2972"><a name="zh-cn_topic_0000001173164705_a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="zh-cn_topic_0000001173164705_a8d12e4af905d4743a5ec9cd6018d2972"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p42461736102118"><a name="zh-cn_topic_0000001173164705_p42461736102118"></a><a name="zh-cn_topic_0000001173164705_p42461736102118"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_a1a1731af05554f119fa365748f276bb2"><a name="zh-cn_topic_0000001173164705_a1a1731af05554f119fa365748f276bb2"></a><a name="zh-cn_topic_0000001173164705_a1a1731af05554f119fa365748f276bb2"></a>组件的唯一标识。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_a97f90720f6ef448fb3afbb3b1c13ae25"><a name="zh-cn_topic_0000001173164705_a97f90720f6ef448fb3afbb3b1c13ae25"></a><a name="zh-cn_topic_0000001173164705_a97f90720f6ef448fb3afbb3b1c13ae25"></a>width</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_a165d9cd14ccf4127b2e22cc6397680ac"><a name="zh-cn_topic_0000001173164705_a165d9cd14ccf4127b2e22cc6397680ac"></a><a name="zh-cn_topic_0000001173164705_a165d9cd14ccf4127b2e22cc6397680ac"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_a836c513375114f6dac7693e0b4f33230"><a name="zh-cn_topic_0000001173164705_a836c513375114f6dac7693e0b4f33230"></a><a name="zh-cn_topic_0000001173164705_a836c513375114f6dac7693e0b4f33230"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p17246836142119"><a name="zh-cn_topic_0000001173164705_p17246836142119"></a><a name="zh-cn_topic_0000001173164705_p17246836142119"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_adbe7ecbee96b4f938b04a4b8d62791bf"><a name="zh-cn_topic_0000001173164705_adbe7ecbee96b4f938b04a4b8d62791bf"></a><a name="zh-cn_topic_0000001173164705_adbe7ecbee96b4f938b04a4b8d62791bf"></a>设置组件的宽度</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_a4a0bae0e1bb946d6bc7bf30e0a535343"><a name="zh-cn_topic_0000001173164705_a4a0bae0e1bb946d6bc7bf30e0a535343"></a><a name="zh-cn_topic_0000001173164705_a4a0bae0e1bb946d6bc7bf30e0a535343"></a>height</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_p1346327134215"><a name="zh-cn_topic_0000001173164705_p1346327134215"></a><a name="zh-cn_topic_0000001173164705_p1346327134215"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_p14463117184214"><a name="zh-cn_topic_0000001173164705_p14463117184214"></a><a name="zh-cn_topic_0000001173164705_p14463117184214"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p1646316754213"><a name="zh-cn_topic_0000001173164705_p1646316754213"></a><a name="zh-cn_topic_0000001173164705_p1646316754213"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_p64638784216"><a name="zh-cn_topic_0000001173164705_p64638784216"></a><a name="zh-cn_topic_0000001173164705_p64638784216"></a>设置组件的高度</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_a3cf785e2a2a043268d168f58d59207c8"><a name="zh-cn_topic_0000001173164705_a3cf785e2a2a043268d168f58d59207c8"></a><a name="zh-cn_topic_0000001173164705_a3cf785e2a2a043268d168f58d59207c8"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_aa9b258d23e1e425dbc2ffe8edbc91a42"><a name="zh-cn_topic_0000001173164705_aa9b258d23e1e425dbc2ffe8edbc91a42"></a><a name="zh-cn_topic_0000001173164705_aa9b258d23e1e425dbc2ffe8edbc91a42"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_ac312df4f14444c98955ed055456848a7"><a name="zh-cn_topic_0000001173164705_ac312df4f14444c98955ed055456848a7"></a><a name="zh-cn_topic_0000001173164705_ac312df4f14444c98955ed055456848a7"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p1624612362219"><a name="zh-cn_topic_0000001173164705_p1624612362219"></a><a name="zh-cn_topic_0000001173164705_p1624612362219"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_p62121758111517"><a name="zh-cn_topic_0000001173164705_p62121758111517"></a><a name="zh-cn_topic_0000001173164705_p62121758111517"></a>设置当前svg的x轴坐标,根svg节点无效</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row1259531661611"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_p1359601671613"><a name="zh-cn_topic_0000001173164705_p1359601671613"></a><a name="zh-cn_topic_0000001173164705_p1359601671613"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_p65967163165"><a name="zh-cn_topic_0000001173164705_p65967163165"></a><a name="zh-cn_topic_0000001173164705_p65967163165"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 ">&nbsp;&nbsp;</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p1059610169169"><a name="zh-cn_topic_0000001173164705_p1059610169169"></a><a name="zh-cn_topic_0000001173164705_p1059610169169"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_p125961416161611"><a name="zh-cn_topic_0000001173164705_p125961416161611"></a><a name="zh-cn_topic_0000001173164705_p125961416161611"></a>设置当前svg的y轴坐标,根svg节点无效</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row11404114510176"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_p11404124541714"><a name="zh-cn_topic_0000001173164705_p11404124541714"></a><a name="zh-cn_topic_0000001173164705_p11404124541714"></a>viewBox</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_p1640474511172"><a name="zh-cn_topic_0000001173164705_p1640474511172"></a><a name="zh-cn_topic_0000001173164705_p1640474511172"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_p740494521712"><a name="zh-cn_topic_0000001173164705_p740494521712"></a><a name="zh-cn_topic_0000001173164705_p740494521712"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p04046452179"><a name="zh-cn_topic_0000001173164705_p04046452179"></a><a name="zh-cn_topic_0000001173164705_p04046452179"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_p740434541717"><a name="zh-cn_topic_0000001173164705_p740434541717"></a><a name="zh-cn_topic_0000001173164705_p740434541717"></a>设置当前svg的视口。支持的格式为&lt;number number number number&gt;,4个参数分别表示min-x, min-y, width and height,viewBox的宽高和svg的宽高不一致,会以中心对齐进行缩放。</p>
</td>
</tr>
</tbody>
</table>
## 示例<a name="zh-cn_topic_0000001173164705_section360556124815"></a>
```
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" fill="#00FF00"></rect>
</svg>
<rect x="10" y="10" width="80" height="80" fill="red" ></rect>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="80" height="80" fill="red"></rect>
</svg>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 400 400">
<rect x="10" y="10" width="80" height="80" fill="blue"></rect>
</svg>
</svg>
</div>
```
![](figures/zh-cn_image_0000001173164789.png)
# svg组件<a name="ZH-CN_TOPIC_0000001164895644"></a>
- **[通用属性](js-components-svg-common-attributes.md)**
- **[svg](js-components-svg-0.md)**
- **[rect](js-components-svg-rect.md)**
- **[circle](js-components-svg-circle.md)**
- **[ellipse](js-components-svg-ellipse.md)**
- **[path](js-components-svg-path.md)**
- **[line](js-components-svg-line.md)**
- **[polyline](js-components-svg-polyline.md)**
- **[polygon](js-components-svg-polygon.md)**
- **[text](js-components-svg-text.md)**
- **[tspan](js-components-svg-tspan.md)**
- **[textPath](js-components-svg-textpath.md)**
- **[animate](js-components-svg-animate.md)**
- **[animateMotion](js-components-svg-animate-motion.md)**
- **[animateTransform](js-components-svg-animate-transform.md)**
# svg<a name="ZH-CN_TOPIC_0000001164577152"></a>
- [权限列表](#zh-cn_topic_0000001173164705_section11257113618419)
- [子组件](#zh-cn_topic_0000001173164705_section9288143101012)
- [属性](#zh-cn_topic_0000001173164705_section2907183951110)
- [示例](#zh-cn_topic_0000001173164705_section360556124815)
基础容器,主要作为svg的根节点使用,也可以在svg中嵌套使用。
>![](../../public_sys-resources/icon-note.gif) **说明:**
>从API Version 7 开始支持。
>约束条件:svg父组件或者svg组件需要定义宽高值,否则不进行绘制。
## 权限列表<a name="zh-cn_topic_0000001173164705_section11257113618419"></a>
## 子组件<a name="zh-cn_topic_0000001173164705_section9288143101012"></a>
支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。
## 属性<a name="zh-cn_topic_0000001173164705_section2907183951110"></a>
支持所列的Svg组件通用属性和以下表格的属性,设置的通用属性会传递给子组件。
<a name="zh-cn_topic_0000001173164705_table20633101642315"></a>
<table><thead align="left"><tr id="zh-cn_topic_0000001173164705_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173164705_aaf1247770b244944bbcc9f28d9a6f00b"><a name="zh-cn_topic_0000001173164705_aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="zh-cn_topic_0000001173164705_aaf1247770b244944bbcc9f28d9a6f00b"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173164705_a6efc3502761f4faf9630e484280f75b6"><a name="zh-cn_topic_0000001173164705_a6efc3502761f4faf9630e484280f75b6"></a><a name="zh-cn_topic_0000001173164705_a6efc3502761f4faf9630e484280f75b6"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173164705_a27a37273d9ad47569ddbcb8db985d302"><a name="zh-cn_topic_0000001173164705_a27a37273d9ad47569ddbcb8db985d302"></a><a name="zh-cn_topic_0000001173164705_a27a37273d9ad47569ddbcb8db985d302"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173164705_p824610360217"><a name="zh-cn_topic_0000001173164705_p824610360217"></a><a name="zh-cn_topic_0000001173164705_p824610360217"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173164705_a2ff3361bfd3b420ba4967452d2ddd098"><a name="zh-cn_topic_0000001173164705_a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="zh-cn_topic_0000001173164705_a2ff3361bfd3b420ba4967452d2ddd098"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="zh-cn_topic_0000001173164705_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_a83b6dd280109466fb015e64de1ef4df3"><a name="zh-cn_topic_0000001173164705_a83b6dd280109466fb015e64de1ef4df3"></a><a name="zh-cn_topic_0000001173164705_a83b6dd280109466fb015e64de1ef4df3"></a>id</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_abc38fa2b85854bc687af75eb17a00a4d"><a name="zh-cn_topic_0000001173164705_abc38fa2b85854bc687af75eb17a00a4d"></a><a name="zh-cn_topic_0000001173164705_abc38fa2b85854bc687af75eb17a00a4d"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_a8d12e4af905d4743a5ec9cd6018d2972"><a name="zh-cn_topic_0000001173164705_a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="zh-cn_topic_0000001173164705_a8d12e4af905d4743a5ec9cd6018d2972"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p42461736102118"><a name="zh-cn_topic_0000001173164705_p42461736102118"></a><a name="zh-cn_topic_0000001173164705_p42461736102118"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_a1a1731af05554f119fa365748f276bb2"><a name="zh-cn_topic_0000001173164705_a1a1731af05554f119fa365748f276bb2"></a><a name="zh-cn_topic_0000001173164705_a1a1731af05554f119fa365748f276bb2"></a>组件的唯一标识。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_a97f90720f6ef448fb3afbb3b1c13ae25"><a name="zh-cn_topic_0000001173164705_a97f90720f6ef448fb3afbb3b1c13ae25"></a><a name="zh-cn_topic_0000001173164705_a97f90720f6ef448fb3afbb3b1c13ae25"></a>width</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_a165d9cd14ccf4127b2e22cc6397680ac"><a name="zh-cn_topic_0000001173164705_a165d9cd14ccf4127b2e22cc6397680ac"></a><a name="zh-cn_topic_0000001173164705_a165d9cd14ccf4127b2e22cc6397680ac"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_a836c513375114f6dac7693e0b4f33230"><a name="zh-cn_topic_0000001173164705_a836c513375114f6dac7693e0b4f33230"></a><a name="zh-cn_topic_0000001173164705_a836c513375114f6dac7693e0b4f33230"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p17246836142119"><a name="zh-cn_topic_0000001173164705_p17246836142119"></a><a name="zh-cn_topic_0000001173164705_p17246836142119"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_adbe7ecbee96b4f938b04a4b8d62791bf"><a name="zh-cn_topic_0000001173164705_adbe7ecbee96b4f938b04a4b8d62791bf"></a><a name="zh-cn_topic_0000001173164705_adbe7ecbee96b4f938b04a4b8d62791bf"></a>设置组件的宽度</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_a4a0bae0e1bb946d6bc7bf30e0a535343"><a name="zh-cn_topic_0000001173164705_a4a0bae0e1bb946d6bc7bf30e0a535343"></a><a name="zh-cn_topic_0000001173164705_a4a0bae0e1bb946d6bc7bf30e0a535343"></a>height</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_p1346327134215"><a name="zh-cn_topic_0000001173164705_p1346327134215"></a><a name="zh-cn_topic_0000001173164705_p1346327134215"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_p14463117184214"><a name="zh-cn_topic_0000001173164705_p14463117184214"></a><a name="zh-cn_topic_0000001173164705_p14463117184214"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p1646316754213"><a name="zh-cn_topic_0000001173164705_p1646316754213"></a><a name="zh-cn_topic_0000001173164705_p1646316754213"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_p64638784216"><a name="zh-cn_topic_0000001173164705_p64638784216"></a><a name="zh-cn_topic_0000001173164705_p64638784216"></a>设置组件的高度</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_a3cf785e2a2a043268d168f58d59207c8"><a name="zh-cn_topic_0000001173164705_a3cf785e2a2a043268d168f58d59207c8"></a><a name="zh-cn_topic_0000001173164705_a3cf785e2a2a043268d168f58d59207c8"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_aa9b258d23e1e425dbc2ffe8edbc91a42"><a name="zh-cn_topic_0000001173164705_aa9b258d23e1e425dbc2ffe8edbc91a42"></a><a name="zh-cn_topic_0000001173164705_aa9b258d23e1e425dbc2ffe8edbc91a42"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_ac312df4f14444c98955ed055456848a7"><a name="zh-cn_topic_0000001173164705_ac312df4f14444c98955ed055456848a7"></a><a name="zh-cn_topic_0000001173164705_ac312df4f14444c98955ed055456848a7"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p1624612362219"><a name="zh-cn_topic_0000001173164705_p1624612362219"></a><a name="zh-cn_topic_0000001173164705_p1624612362219"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_p62121758111517"><a name="zh-cn_topic_0000001173164705_p62121758111517"></a><a name="zh-cn_topic_0000001173164705_p62121758111517"></a>设置当前svg的x轴坐标,根svg节点无效</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row1259531661611"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_p1359601671613"><a name="zh-cn_topic_0000001173164705_p1359601671613"></a><a name="zh-cn_topic_0000001173164705_p1359601671613"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_p65967163165"><a name="zh-cn_topic_0000001173164705_p65967163165"></a><a name="zh-cn_topic_0000001173164705_p65967163165"></a>&lt;length&gt;|&lt;percentage&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 ">&nbsp;&nbsp;</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p1059610169169"><a name="zh-cn_topic_0000001173164705_p1059610169169"></a><a name="zh-cn_topic_0000001173164705_p1059610169169"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_p125961416161611"><a name="zh-cn_topic_0000001173164705_p125961416161611"></a><a name="zh-cn_topic_0000001173164705_p125961416161611"></a>设置当前svg的y轴坐标,根svg节点无效</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001173164705_row11404114510176"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164705_p11404124541714"><a name="zh-cn_topic_0000001173164705_p11404124541714"></a><a name="zh-cn_topic_0000001173164705_p11404124541714"></a>viewBox</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164705_p1640474511172"><a name="zh-cn_topic_0000001173164705_p1640474511172"></a><a name="zh-cn_topic_0000001173164705_p1640474511172"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164705_p740494521712"><a name="zh-cn_topic_0000001173164705_p740494521712"></a><a name="zh-cn_topic_0000001173164705_p740494521712"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164705_p04046452179"><a name="zh-cn_topic_0000001173164705_p04046452179"></a><a name="zh-cn_topic_0000001173164705_p04046452179"></a></p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164705_p740434541717"><a name="zh-cn_topic_0000001173164705_p740434541717"></a><a name="zh-cn_topic_0000001173164705_p740434541717"></a>设置当前svg的视口。支持的格式为&lt;number number number number&gt;,4个参数分别表示min-x, min-y, width and height,viewBox的宽高和svg的宽高不一致,会以中心对齐进行缩放。</p>
</td>
</tr>
</tbody>
</table>
## 示例<a name="zh-cn_topic_0000001173164705_section360556124815"></a>
```
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" fill="#00FF00"></rect>
</svg>
<rect x="10" y="10" width="80" height="80" fill="red" ></rect>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="80" height="80" fill="red"></rect>
</svg>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 400 400">
<rect x="10" y="10" width="80" height="80" fill="blue"></rect>
</svg>
</svg>
</div>
```
![](figures/zh-cn_image_0000001173164789.png)
# svg组件<a name="ZH-CN_TOPIC_0000001164895644"></a>
- **[通用属性](js-components-svg-common-attributes.md)**
- **[svg](js-components-svg.md)**
- **[rect](js-components-svg-rect.md)**
- **[circle](js-components-svg-circle.md)**
- **[ellipse](js-components-svg-ellipse.md)**
- **[path](js-components-svg-path.md)**
- **[line](js-components-svg-line.md)**
- **[polyline](js-components-svg-polyline.md)**
- **[polygon](js-components-svg-polygon.md)**
- **[text](js-components-svg-text.md)**
- **[tspan](js-components-svg-tspan.md)**
- **[textPath](js-components-svg-textpath.md)**
- **[animate](js-components-svg-animate.md)**
- **[animateMotion](js-components-svg-animate-motion.md)**
- **[animateTransform](js-components-svg-animate-transform.md)**
# 媒体
- [音频](audio.md)
- [音频开发概述](audio-overview.md)
- [音频播放开发指导](audio-playback.md)
- [音频管理开发指导](audio-management.md)
- [音频录制开发指导](audio-recorder.md)
- 音频
- [音频开发概述](audio-overview.md)
- [音频播放开发指导](audio-playback.md)
- [音频管理开发指导](audio-management.md)
- [音频录制开发指导](audio-recorder.md)
# 音频开发概述<a name="ZH-CN_TOPIC_0000001147055469"></a>
# 音频开发概述
- [基本概念](#section296512102281)
- [基本概念](#基本概念)
OpenHarmony音频模块支持音频业务的开发,提供音频相关的功能,主要包括音频播放、音量管理等。
>![](../public_sys-resources/icon-note.gif) **说明:**
>由于权限问题,此部分功能在标准系统暂不可用。
## 基本概念<a name="section296512102281"></a>
## 基本概念
- **采样**
- **采样**<br/>
采样是指将连续时域上的模拟信号按照一定的时间间隔采样,获取到离散时域上离散信号的过程。
采样是指将连续时域上的模拟信号按照一定的时间间隔采样,获取到离散时域上离散信号的过程。
- **采样率**<br/>
采样率为每秒从连续信号中提取并组成离散信号的采样次数,单位用赫兹(Hz)来表示。通常人耳能听到频率范围大约在20Hz~20kHz之间的声音。常用的音频采样频率有:8kHz、11.025kHz、22.05kHz、16kHz、37.8kHz、44.1kHz、48kHz、96kHz、192kHz等。
- **采样率**
采样率为每秒从连续信号中提取并组成离散信号的采样次数,单位用赫兹(Hz)来表示。通常人耳能听到频率范围大约在20Hz~20kHz之间的声音。常用的音频采样频率有:8kHz、11.025kHz、22.05kHz、16kHz、37.8kHz、44.1kHz、48kHz、96kHz、192kHz等。
- **声道**
声道是指声音在录制或播放时在不同空间位置采集或回放的相互独立的音频信号,所以声道数也就是声音录制时的音源数量或回放时相应的扬声器数量。
- **音频帧**
音频数据是流式的,本身没有明确的一帧帧的概念,在实际的应用中,为了音频算法处理/传输的方便,一般约定俗成取2.5ms\~60ms为单位的数据量为一帧音频。这个时间被称之为“采样时间”,其长度没有特别的标准,它是根据编解码器和具体应用的需求来决定的。
- **PCM**
PCM(Pulse Code Modulation),即脉冲编码调制,是一种将模拟信号数字化的方法,是将时间连续、取值连续的模拟信号转换成时间离散、抽样值离散的数字信号的过程。
- **声道**<br/>
声道是指声音在录制或播放时在不同空间位置采集或回放的相互独立的音频信号,所以声道数也就是声音录制时的音源数量或回放时相应的扬声器数量。
- **音频帧**<br/>
音频数据是流式的,本身没有明确的一帧帧的概念,在实际的应用中,为了音频算法处理/传输的方便,一般约定俗成取2.5ms~60ms为单位的数据量为一帧音频。这个时间被称之为“采样时间”,其长度没有特别的标准,它是根据编解码器和具体应用的需求来决定的。
- **PCM**<br/>
PCM(Pulse Code Modulation),即脉冲编码调制,是一种将模拟信号数字化的方法,是将时间连续、取值连续的模拟信号转换成时间离散、抽样值离散的数字信号的过程。
# 音频<a name="ZH-CN_TOPIC_0000001110946022"></a>
# 音频
- **[音频开发概述](audio-overview.md)**
- **[音频播放开发指导](audio-playback.md)**
- **[音频开发概述](audio-overview.md)**
- **[音频管理开发指导](audio-management.md)**
- **[音频录制开发指导](audio-recorder.md)**
- **[音频播放开发指导](audio-playback.md)**
- **[音频管理开发指导](audio-management.md)**
- **[音频录制开发指导](audio-recorder.md)**
\ No newline at end of file
# 入门
- [DevEco Studio(OpenHarmony)使用指南](deveco-studio-user-guide-for-openharmony.md)
- [概述](deveco-studio-overview.md)
- [版本变更说明](deveco-studio-release-notes.md)
- [配置OpenHarmony SDK](configuring-openharmony-sdk.md)
- [创建OpenHarmony工程](create-openharmony-project.md)
- [使用工程向导创建新工程](use-wizard-to-create-project.md)
- [通过导入Sample方式创建新工程](import-sample-to-create-project.md)
- [配置OpenHarmony应用签名信息](configuring-openharmony-app-signature.md)
- [安装运行OpenHarmony应用](installing-openharmony-app.md)
- [包结构说明](package-structure.md)
- [快速入门](start.md)
- [开发准备](start-overview.md)
- [使用JS语言开发](start-with-js.md)
- DevEco Studio(OpenHarmony)使用指南
- [概述](deveco-studio-overview.md)
- [版本变更说明](deveco-studio-release-notes.md)
- [配置OpenHarmony SDK](configuring-openharmony-sdk.md)
- 创建OpenHarmony工程
- [使用工程向导创建新工程](use-wizard-to-create-project.md)
- [通过导入Sample方式创建新工程](import-sample-to-create-project.md)
- [配置OpenHarmony应用签名信息](configuring-openharmony-app-signature.md)
- [安装运行OpenHarmony应用](installing-openharmony-app.md)
- [包结构说明](package-structure.md)
- 快速入门
- [开发准备](start-overview.md)
- [使用JS语言开发](start-with-js.md)
# 配置OpenHarmony应用签名信息<a name="ZH-CN_TOPIC_0000001159890371"></a>
# 配置OpenHarmony应用签名信息
- [生成密钥和证书请求文件](#section153146467405)
- [生成应用证书文件](#section136609429562)
- [生成应用Profile文件](#section2048641015325)
- [配置应用签名信息](#section10152423193310)
- [生成密钥和证书请求文件](#生成密钥和证书请求文件)
- [生成应用证书文件](#生成应用证书文件)
- [生成应用Profile文件](#生成应用profile文件)
- [配置应用签名信息](#配置应用签名信息)
使用真机设备运行和调试OpenHarmony应用前,需要对应用进行签名才能正常运行。该指导用于OpenHarmony应用的签名配置。除此章节以外,DevEco Studio的其余操作指导无差别,具体请访问[HUAWEI DevEco Studio使用指南](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387)。配置应用签名信息的流程如下图所示。
![](figures/zh-cn_image_0000001113808114.png)
## 生成密钥和证书请求文件<a name="section153146467405"></a>
![zh-cn_image_0000001113808114](figures/zh-cn_image_0000001113808114.png)
## 生成密钥和证书请求文件
OpenHarmony应用通过数字证书(.cer文件)和Profile文件(.p7b文件)来保证应用的完整性,需要通过DevEco Studio来生成密钥文件(.p12文件)和证书请求文件(.csr文件)。同时,也可以使用命令行工具的方式来生成密钥文件和证书请求文件。具体操作请参考[生成密钥和证书请求文件](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/publish_app-0000001053223745#section9752152162813)
## 生成应用证书文件<a name="section136609429562"></a>
使用[生成密钥和证书请求文件](#section153146467405)中生成的证书请求文件,来生成应用签名所需的数字证书文件。生成方法如下:
## 生成应用证书文件
进入DevEco Studio安装目录的**Sdk\\toolchains\\lib**文件夹下(该SDK目录只能是OpenHarmony SDK,配置方法可参考[配置OpenHarmony SDK](configuring-openharmony-sdk.md)),打开命令行工具,执行如下命令(如果keytool命令不能执行,请在系统环境变量中添加JDK的环境变量)。其中,只需要修改输入和输出即可快速生成证书文件,即修改**-infile**指定证书请求文件csr文件路径,**-outfile**指定输出证书文件名及路径。
使用[生成密钥和证书请求文件](#生成密钥和证书请求文件)中生成的证书请求文件,来生成应用签名所需的数字证书文件。生成方法如下:
进入DevEco Studio安装目录的 **Sdk\toolchains\lib**文件夹下(该SDK目录只能是OpenHarmony SDK,配置方法可参考[配置OpenHarmony SDK](../quick-start/configuring-openharmony-sdk.md)),打开命令行工具,执行如下命令(如果keytool命令不能执行,请在系统环境变量中添加JDK的环境变量)。其中,只需要修改输入和输出即可快速生成证书文件,即修改 **-infile**指定证书请求文件csr文件路径, **-outfile**指定输出证书文件名及路径。
```
keytool -gencert -alias "OpenHarmony Application CA" -infile myApplication_ohos.csr -outfile myApplication_ohos.cer -keystore OpenHarmony.p12 -sigalg SHA384withECDSA -storepass 123456 -ext KeyUsage:"critical=digitalSignature" -validity 3650 -rfc
......@@ -25,21 +28,30 @@ keytool -gencert -alias "OpenHarmony Application CA" -infile myApplication_ohos.
关于该命令的参数说明如下:
- **alias**:用于签发证书的CA私钥别名,OpenHarmony社区CA私钥存于OpenHarmony.p12密钥库文件中,该参数不能修改。
- **infile**:证书请求(CSR)文件的路径。
- **outfile**:输出证书链文件名及路径。
- **keystore**:签发证书的CA密钥库路径,OpenHarmony密钥库文件名为OpenHarmony.p12,文件在OpenHarmony SDK中**Sdk\\toolchains\\lib**路径下,该参数不能修改。请注意,该OpenHarmony.p12文件并不是[生成密钥和证书请求文件](#section153146467405)中生成的.p12文件。
- **sigalg**:证书签名算法,该参数不能修改。
- **storepass**:密钥库密码,密码为123456,该参数不能修改。
- **ext**:证书扩展项,该参数不能修改。
- **validity**:证书有效期,自定义天数。
- **rfc**:输出文件格式指定,该参数不能修改。
- **alias**:用于签发证书的CA私钥别名,OpenHarmony社区CA私钥存于OpenHarmony.p12密钥库文件中,该参数不能修改。
- **infile**:证书请求(CSR)文件的路径。
- **outfile**:输出证书链文件名及路径。
- **keystore**:签发证书的CA密钥库路径,OpenHarmony密钥库文件名为OpenHarmony.p12,文件在OpenHarmony SDK中 **Sdk\toolchains\lib**路径下,该参数不能修改。请注意,该OpenHarmony.p12文件并不是[生成密钥和证书请求文件](#生成密钥和证书请求文件)中生成的.p12文件。
- **sigalg**:证书签名算法,该参数不能修改。
- **storepass**:密钥库密码,密码为123456,该参数不能修改。
## 生成应用Profile文件<a name="section2048641015325"></a>
- **ext**:证书扩展项,该参数不能修改。
- **validity**:证书有效期,自定义天数。
- **rfc**:输出文件格式指定,该参数不能修改。
## 生成应用Profile文件
Profile文件包含OpenHarmony应用的包名、数字证书信息、描述应用允许申请的证书权限列表,以及允许应用调试的设备列表(如果应用类型为Release类型,则设备列表为空)等内容,每个应用包中均必须包含一个Profile文件。
进入**Sdk\\toolchains\\lib**目录下,打开命令行工具,执行如下命令。
进入 **Sdk\toolchains\lib**目录下,打开命令行工具,执行如下命令。
```
java -jar provisionsigtool.jar sign --in UnsgnedReleasedProfileTemplate.json --out myApplication_ohos_Provision.p7b --keystore OpenHarmony.p12 --storepass 123456 --alias "OpenHarmony Application Profile Release" --sigAlg SHA256withECDSA --cert OpenHarmonyProfileRelease.pem --validity 365 --developer-id ohosdeveloper --bundle-name 包名 --permission 受限权限名(可选) --permission 受限权限名(可选) --distribution-certificate myApplication_ohos.cer
......@@ -47,45 +59,62 @@ java -jar provisionsigtool.jar sign --in UnsgnedReleasedProfileTemplate.json --o
关于该命令的参数说明如下:
- **provisionsigtool**:Profile文件生成工具,文件在OpenHarmony SDK的**Sdk\\toolchains\\lib**路径下。
- **in**:Profile模板文件所在路径,文件在OpenHarmony SDK中**Sdk\\toolchains\\lib**路径下,该参数不能修改。
- **out**:输出的Profile文件名和路径。
- **keystore**:签发证书的密钥库路径,OpenHarmony密钥库文件名为OpenHarmony.p12,文件在OpenHarmony SDK中**Sdk\\toolchains\\lib**路径下,该参数不能修改。
- **storepass**:密钥库密码,密码为123456,该参数不能修改。
- **alias**:用于签名Profile私钥别名,OpenHarmony社区CA私钥存于OpenHarmony.p12密钥库文件中,该参数不能修改。
- **sigalg**:证书签名算法,该参数不能修改。
- **cert**:签名Profile的证书文件路径,文件在OpenHarmony SDK中**Sdk\\toolchains\\lib**路径下,该参数不能修改。
- **validity**:证书有效期,自定义天数。
- **developer-id**:开发者标识符,自定义一个字符串。
- **bundle-name**:填写应用包名。
- **permission**:可选字段,如果不需要,则可以不用填写此字段;如果需要添加多个受限权限,则如示例所示重复输入。受限权限列表如下:ohos.permission.READ\_CONTACTS、ohos.permission.WRITE\_CONTACTS。
- **distribution-certificate**[生成应用证书文件](#section136609429562)中生成的证书文件。
## 配置应用签名信息<a name="section10152423193310"></a>
- **provisionsigtool**:Profile文件生成工具,文件在OpenHarmony SDK的 **Sdk\toolchains\lib**路径下。
- **in**:Profile模板文件所在路径,文件在OpenHarmony SDK中 **Sdk\toolchains\lib**路径下,该参数不能修改。
- **out**:输出的Profile文件名和路径。
- **keystore**:签发证书的密钥库路径,OpenHarmony密钥库文件名为OpenHarmony.p12,文件在OpenHarmony SDK中 **Sdk\toolchains\lib**路径下,该参数不能修改。
- **storepass**:密钥库密码,密码为123456,该参数不能修改。
- **alias**:用于签名Profile私钥别名,OpenHarmony社区CA私钥存于OpenHarmony.p12密钥库文件中,该参数不能修改。
- **sigalg**:证书签名算法,该参数不能修改。
- **cert**:签名Profile的证书文件路径,文件在OpenHarmony SDK中 **Sdk\toolchains\lib**路径下,该参数不能修改。
- **validity**:证书有效期,自定义天数。
- **developer-id**:开发者标识符,自定义一个字符串。
- **bundle-name**:填写应用包名。
- **permission**:可选字段,如果不需要,则可以不用填写此字段;如果需要添加多个受限权限,则如示例所示重复输入。受限权限列表如下:ohos.permission.READ_CONTACTS、ohos.permission.WRITE_CONTACTS。
- **distribution-certificate**[生成应用证书文件](#生成应用证书文件)中生成的证书文件。
## 配置应用签名信息
在真机设备上调试前,需要使用到制作的私钥(.p12)文件、证书(.cer)文件和Profile(.p7b)文件对调试的模块进行签名。
打开**File \> Project Structure**,点击**Project \> Signing Configs \> debug**窗口中,去除勾选“Automatically generate signing”,然后配置指定模块的调试签名信息。
打开 **File &gt; Project Structure**,点击 **Project &gt; Signing Configs &gt; debug**窗口中,去除勾选“Automatically generate signing”,然后配置指定模块的调试签名信息。
- **Store File**:选择密钥库文件,文件后缀为.p12,该文件为[生成密钥和证书请求文件](#生成密钥和证书请求文件)中生成的.p12文件。
- **Store Password**:输入密钥库密码,该密码为[生成密钥和证书请求文件](#生成密钥和证书请求文件)中填写的密钥库密码保持一致。
- **Key Alias**:输入密钥的别名信息,与[生成密钥和证书请求文件](#生成密钥和证书请求文件)中填写的别名保持一致。
- **Store File**:选择密钥库文件,文件后缀为.p12,该文件为[生成密钥和证书请求文件](#section153146467405)中生成的.p12文件。
- **Store Password**:输入密钥库密码,该密码为[生成密钥和证书请求文件](#section153146467405)中填写的密钥库密码保持一致。
- **Key Alias**:输入密钥的别名信息,与[生成密钥和证书请求文件](#section153146467405)中填写的别名保持一致。
- **Key Password**:输入密钥的密码,与**Store Password**保持一致。
- **Sign Alg**:签名算法,固定为SHA256withECDSA。
- **Profile File**:选择[生成应用Profile文件](#section2048641015325)中生成的Profile文件,文件后缀为.p7b。
- **Certpath File**:选择[生成应用证书文件](#section136609429562)中生成的数字证书文件,文件后缀为.cer。
- **Key Password**:输入密钥的密码,与 **Store Password**保持一致。
![](figures/zh-cn_image_0000001155643492.png)
- **Sign Alg**:签名算法,固定为SHA256withECDSA。
设置完签名信息后,点击**OK**进行保存,然后可以在工程下的build.gradle中查看签名的配置信息
- **Profile File**:选择[生成应用Profile文件](#生成应用profile文件)中生成的Profile文件,文件后缀为.p7b
![](figures/zh-cn_image_0000001202722349.png)
- **Certpath File**:选择[生成应用证书文件](#生成应用证书文件)中生成的数字证书文件,文件后缀为.cer。
![zh-cn_image_0000001155643492](figures/zh-cn_image_0000001155643492.png)
设置完签名信息后,点击 **OK**进行保存,然后可以在工程下的build.gradle中查看签名的配置信息。
![zh-cn_image_0000001202722349](figures/zh-cn_image_0000001202722349.png)
默认情况下,DevEco Studio编译hap包的类型为debug类型,如果需要编译release类型的hap包,请打开工程左下角的OhosBuild Variants,设置模块的编译构建类型为release。关于编译构建hap的详细说明请参考[HUAWEI DevEco Studio使用指南](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/build_hap-0000001053342418)
![](figures/zh-cn_image_0000001115066116.png)
![zh-cn_image_0000001115066116](figures/zh-cn_image_0000001115066116.png)
编译完成后,OpenHarmony应用的Hap包可以从工程的bulid目录下获取。
![](figures/zh-cn_image_0000001163918627.png)
![zh-cn_image_0000001163918627](figures/zh-cn_image_0000001163918627.png)
# 创建OpenHarmony工程<a name="ZH-CN_TOPIC_0000001130929834"></a>
# 创建OpenHarmony工程
- **[使用工程向导创建新工程](use-wizard-to-create-project.md)**
- **[通过导入Sample方式创建新工程](import-sample-to-create-project.md)**
- **[使用工程向导创建新工程](use-wizard-to-create-project.md)**
- **[通过导入Sample方式创建新工程](import-sample-to-create-project.md)**
\ No newline at end of file
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册