Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 0bf53713 编写于 作者: E ester.zhou
浏览文件
操作

update docs 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 3edd0a77
隐藏空白更改
内联 并排
Showing with 1117 addition and 1305 deletion
en/application-dev/reference/apis/js-apis-pasteboard.md
浏览文件 @ 0bf53713
# Pasteboard # Pasteboard
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. > **NOTE**<br>The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> >
...@@ -48,9 +48,9 @@ Creates a **PasteData** object for plain text. ...@@ -48,9 +48,9 @@ Creates a **PasteData** object for plain text.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("content"); var pasteData = pasteboard.createPlainTextData("content");
``` ```
## pasteboard.createHtmlData<sup>7+</sup> ## pasteboard.createHtmlData<sup>7+</sup>
...@@ -75,10 +75,10 @@ Creates a **PasteData** object for HTML text. ...@@ -75,10 +75,10 @@ Creates a **PasteData** object for HTML text.
**Example** **Example**
```js ```js
var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>"; var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>";
var pasteData = pasteboard.createHtmlData(html); var pasteData = pasteboard.createHtmlData(html);
``` ```
## pasteboard.createWantData<sup>7+</sup> ## pasteboard.createWantData<sup>7+</sup>
...@@ -103,13 +103,13 @@ Creates a **PasteData** object for Want text. ...@@ -103,13 +103,13 @@ Creates a **PasteData** object for Want text.
**Example** **Example**
```js ```js
var object = { var object = {
bundleName: "com.example.aafwk.test", bundleName: "com.example.aafwk.test",
abilityName: "com.example.aafwk.test.TwoAbility" abilityName: "com.example.aafwk.test.TwoAbility"
}; };
var pasteData = pasteboard.createWantData(object); var pasteData = pasteboard.createWantData(object);
``` ```
## pasteboard.createUriData<sup>7+</sup> ## pasteboard.createUriData<sup>7+</sup>
...@@ -134,9 +134,9 @@ Creates a **PasteData** object for URI text. ...@@ -134,9 +134,9 @@ Creates a **PasteData** object for URI text.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createUriData("dataability:///com.example.myapplication1?user.txt"); var pasteData = pasteboard.createUriData("dataability:///com.example.myapplication1?user.txt");
``` ```
## pasteboard.createPlainTextRecord<sup>7+</sup> ## pasteboard.createPlainTextRecord<sup>7+</sup>
...@@ -161,9 +161,9 @@ Creates a **PasteDataRecord** object of the plain text type. ...@@ -161,9 +161,9 @@ Creates a **PasteDataRecord** object of the plain text type.
**Example** **Example**
```js ```js
var record = pasteboard.createPlainTextRecord("hello"); var record = pasteboard.createPlainTextRecord("hello");
``` ```
## pasteboard.createHtmlTextRecord<sup>7+</sup> ## pasteboard.createHtmlTextRecord<sup>7+</sup>
...@@ -188,10 +188,10 @@ Creates a **PasteDataRecord** object of the HTML text type. ...@@ -188,10 +188,10 @@ Creates a **PasteDataRecord** object of the HTML text type.
**Example** **Example**
```js ```js
var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>"; var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>";
var record = pasteboard.createHtmlTextRecord(html); var record = pasteboard.createHtmlTextRecord(html);
``` ```
## pasteboard.createWantRecord<sup>7+</sup> ## pasteboard.createWantRecord<sup>7+</sup>
...@@ -216,13 +216,13 @@ Creates a **PasteDataRecord** object of the Want text type. ...@@ -216,13 +216,13 @@ Creates a **PasteDataRecord** object of the Want text type.
**Example** **Example**
```js ```js
var object = { var object = {
bundleName: "com.example.aafwk.test", bundleName: "com.example.aafwk.test",
abilityName: "com.example.aafwk.test.TwoAbility" abilityName: "com.example.aafwk.test.TwoAbility"
}; };
var record = pasteboard.createWantRecord(object); var record = pasteboard.createWantRecord(object);
``` ```
## pasteboard.createUriRecord<sup>7+</sup> ## pasteboard.createUriRecord<sup>7+</sup>
...@@ -247,9 +247,9 @@ Creates a **PasteDataRecord** object of the URI text type. ...@@ -247,9 +247,9 @@ Creates a **PasteDataRecord** object of the URI text type.
**Example** **Example**
```js ```js
var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt"); var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt");
``` ```
## PasteDataProperty<sup>7+</sup> ## PasteDataProperty<sup>7+</sup>
...@@ -301,14 +301,14 @@ Forcibly converts the content in this **PasteData** object to the plain text. Th ...@@ -301,14 +301,14 @@ Forcibly converts the content in this **PasteData** object to the plain text. Th
**Example** **Example**
```js ```js
var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt"); var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt");
record.convertToText().then((data) => { record.convertToText().then((data) => {
console.info('convertToText success data : ' + JSON.stringify(data)); console.info('convertToText success data : ' + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error('convertToText failed because ' + JSON.stringify(error)); console.error('convertToText failed because ' + JSON.stringify(error));
}); });
``` ```
### convertToText<sup>7+</sup> ### convertToText<sup>7+</sup>
...@@ -327,16 +327,16 @@ Forcibly converts the content in this **PasteData** object to the plain text. Th ...@@ -327,16 +327,16 @@ Forcibly converts the content in this **PasteData** object to the plain text. Th
**Example** **Example**
```js ```js
var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt"); var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt");
record.convertToText((err, data) => { record.convertToText((err, data) => {
if (err) { if (err) {
console.error('convertToText failed because ' + JSON.stringify(err)); console.error('convertToText failed because ' + JSON.stringify(err));
return; return;
} }
console.info('convertToText success data : ' + JSON.stringify(data)); console.info('convertToText success data : ' + JSON.stringify(data));
}); });
``` ```
## PasteData ## PasteData
...@@ -366,10 +366,10 @@ Obtains the plain text of the primary record. ...@@ -366,10 +366,10 @@ Obtains the plain text of the primary record.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var plainText = pasteData.getPrimaryText(); var plainText = pasteData.getPrimaryText();
``` ```
### getPrimaryHtml<sup>7+</sup> ### getPrimaryHtml<sup>7+</sup>
...@@ -388,11 +388,11 @@ Obtains the HTML text of the primary record. ...@@ -388,11 +388,11 @@ Obtains the HTML text of the primary record.
**Example** **Example**
```js ```js
var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>"; var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>";
var pasteData = pasteboard.createHtmlData(html); var pasteData = pasteboard.createHtmlData(html);
var htmlText = pasteData.getPrimaryHtml(); var htmlText = pasteData.getPrimaryHtml();
``` ```
### getPrimaryWant<sup>7+</sup> ### getPrimaryWant<sup>7+</sup>
...@@ -411,14 +411,14 @@ Obtains the **Want** object of the primary record. ...@@ -411,14 +411,14 @@ Obtains the **Want** object of the primary record.
**Example** **Example**
```js ```js
var object = { var object = {
bundleName: "com.example.aafwk.test", bundleName: "com.example.aafwk.test",
abilityName: "com.example.aafwk.test.TwoAbility" abilityName: "com.example.aafwk.test.TwoAbility"
}; };
var pasteData = pasteboard.createWantData(object); var pasteData = pasteboard.createWantData(object);
var want = pasteData.getPrimaryWant(); var want = pasteData.getPrimaryWant();
``` ```
### getPrimaryUri<sup>7+</sup> ### getPrimaryUri<sup>7+</sup>
...@@ -437,10 +437,10 @@ Obtains the URI text of the primary record. ...@@ -437,10 +437,10 @@ Obtains the URI text of the primary record.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createUriData("dataability:///com.example.myapplication1?user.txt"); var pasteData = pasteboard.createUriData("dataability:///com.example.myapplication1?user.txt");
var uri = pasteData.getPrimaryUri(); var uri = pasteData.getPrimaryUri();
``` ```
### addTextRecord<sup>7+</sup> ### addTextRecord<sup>7+</sup>
...@@ -461,10 +461,10 @@ The pasteboard supports a maximum number of 128 data records. ...@@ -461,10 +461,10 @@ The pasteboard supports a maximum number of 128 data records.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
pasteData.addTextRecord("good"); pasteData.addTextRecord("good");
``` ```
### addHtmlRecord<sup>7+</sup> ### addHtmlRecord<sup>7+</sup>
...@@ -485,11 +485,11 @@ The pasteboard supports a maximum number of 128 data records. ...@@ -485,11 +485,11 @@ The pasteboard supports a maximum number of 128 data records.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>"; var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>";
pasteData.addHtmlRecord(html); pasteData.addHtmlRecord(html);
``` ```
### addWantRecord<sup>7+</sup> ### addWantRecord<sup>7+</sup>
...@@ -510,14 +510,14 @@ The pasteboard supports a maximum number of 128 data records. ...@@ -510,14 +510,14 @@ The pasteboard supports a maximum number of 128 data records.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var object = { var object = {
bundleName: "com.example.aafwk.test", bundleName: "com.example.aafwk.test",
abilityName: "com.example.aafwk.test.TwoAbility" abilityName: "com.example.aafwk.test.TwoAbility"
}; };
pasteData.addWantRecord(object); pasteData.addWantRecord(object);
``` ```
### addUriRecord<sup>7+</sup> ### addUriRecord<sup>7+</sup>
...@@ -538,10 +538,10 @@ The pasteboard supports a maximum number of 128 data records. ...@@ -538,10 +538,10 @@ The pasteboard supports a maximum number of 128 data records.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
pasteData.addUriRecord("dataability:///com.example.myapplication1?user.txt"); pasteData.addUriRecord("dataability:///com.example.myapplication1?user.txt");
``` ```
### addRecord<sup>7+</sup> ### addRecord<sup>7+</sup>
...@@ -562,14 +562,14 @@ The pasteboard supports a maximum number of 128 data records. ...@@ -562,14 +562,14 @@ The pasteboard supports a maximum number of 128 data records.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createUriData("dataability:///com.example.myapplication1?user.txt"); var pasteData = pasteboard.createUriData("dataability:///com.example.myapplication1?user.txt");
var textRecord = pasteboard.createPlainTextRecord("hello"); var textRecord = pasteboard.createPlainTextRecord("hello");
var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>"; var html = "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "<meta charset=\"utf-8\">\n" + "<title>HTML-PASTEBOARD_HTML</title>\n" + "</head>\n" + "<body>\n" + " <h1>HEAD</h1>\n" + " <p></p>\n" + "</body>\n" + "</html>";
var htmlRecord = pasteboard.createHtmlTextRecord(html); var htmlRecord = pasteboard.createHtmlTextRecord(html);
pasteData.addRecord(textRecord); pasteData.addRecord(textRecord);
pasteData.addRecord(htmlRecord); pasteData.addRecord(htmlRecord);
``` ```
### getMimeTypes<sup>7+</sup> ### getMimeTypes<sup>7+</sup>
...@@ -588,10 +588,10 @@ Obtains **mimeTypes** in [PasteDataProperty](#pastedataproperty7) from this past ...@@ -588,10 +588,10 @@ Obtains **mimeTypes** in [PasteDataProperty](#pastedataproperty7) from this past
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var types = pasteData.getMimeTypes(); var types = pasteData.getMimeTypes();
``` ```
### getPrimaryMimeType<sup>7+</sup> ### getPrimaryMimeType<sup>7+</sup>
...@@ -610,10 +610,10 @@ Obtains the data type of the primary record. ...@@ -610,10 +610,10 @@ Obtains the data type of the primary record.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var type = pasteData.getPrimaryMimeType(); var type = pasteData.getPrimaryMimeType();
``` ```
### getProperty<sup>7+</sup> ### getProperty<sup>7+</sup>
...@@ -632,10 +632,10 @@ Obtains the property description object. ...@@ -632,10 +632,10 @@ Obtains the property description object.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var property = pasteData.getProperty(); var property = pasteData.getProperty();
``` ```
### getRecordAt<sup>7+</sup> ### getRecordAt<sup>7+</sup>
...@@ -660,10 +660,10 @@ Obtains the record with the specified index. ...@@ -660,10 +660,10 @@ Obtains the record with the specified index.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var record = pasteData.getRecordAt(0); var record = pasteData.getRecordAt(0);
``` ```
### getRecordCount<sup>7+</sup> ### getRecordCount<sup>7+</sup>
...@@ -682,10 +682,10 @@ Obtains the number of data records in this pasteboard. ...@@ -682,10 +682,10 @@ Obtains the number of data records in this pasteboard.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var count = pasteData.getRecordCount(); var count = pasteData.getRecordCount();
``` ```
### getTag<sup>7+</sup> ### getTag<sup>7+</sup>
...@@ -704,10 +704,10 @@ Obtains the user-defined tag content. If the tag content is not set, null is ret ...@@ -704,10 +704,10 @@ Obtains the user-defined tag content. If the tag content is not set, null is ret
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var tag = pasteData.getTag(); var tag = pasteData.getTag();
``` ```
### hasMimeType<sup>7+</sup> ### hasMimeType<sup>7+</sup>
...@@ -732,10 +732,10 @@ Checks whether the content of this pasteboard contains the specified data type. ...@@ -732,10 +732,10 @@ Checks whether the content of this pasteboard contains the specified data type.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var hasType = pasteData.hasMimeType(pasteboard.MIMETYPE_TEXT_PLAIN); var hasType = pasteData.hasMimeType(pasteboard.MIMETYPE_TEXT_PLAIN);
``` ```
### removeRecordAt<sup>7+</sup> ### removeRecordAt<sup>7+</sup>
...@@ -760,10 +760,10 @@ Removes the data record with a specified index from this pasteboard. ...@@ -760,10 +760,10 @@ Removes the data record with a specified index from this pasteboard.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var isRemove = pasteData.removeRecordAt(0); var isRemove = pasteData.removeRecordAt(0);
``` ```
### replaceRecordAt<sup>7+</sup> ### replaceRecordAt<sup>7+</sup>
...@@ -789,11 +789,11 @@ Replaces the data record with a specified index in this pasteboard. ...@@ -789,11 +789,11 @@ Replaces the data record with a specified index in this pasteboard.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("hello"); var pasteData = pasteboard.createPlainTextData("hello");
var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt"); var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt");
var isReplace = pasteData.replaceRecordAt(0, record); var isReplace = pasteData.replaceRecordAt(0, record);
``` ```
## pasteboard.getSystemPasteboard ## pasteboard.getSystemPasteboard
...@@ -812,9 +812,9 @@ Obtains the system pasteboard. ...@@ -812,9 +812,9 @@ Obtains the system pasteboard.
**Example** **Example**
```js ```js
var systemPasteboard = pasteboard.getSystemPasteboard(); var systemPasteboard = pasteboard.getSystemPasteboard();
``` ```
## SystemPasteboard ## SystemPasteboard
...@@ -843,17 +843,17 @@ Writes data to a pasteboard. This API uses an asynchronous callback to return th ...@@ -843,17 +843,17 @@ Writes data to a pasteboard. This API uses an asynchronous callback to return th
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("content"); var pasteData = pasteboard.createPlainTextData("content");
var systemPasteboard = pasteboard.getSystemPasteboard(); var systemPasteboard = pasteboard.getSystemPasteboard();
systemPasteboard.setPasteData(pasteData, (error, data) => { systemPasteboard.setPasteData(pasteData, (error, data) => {
if (error) { if (error) {
console.error('Failed to setPasteData. Cause: ' + error.message); console.error('Failed to setPasteData. Cause: ' + error.message);
return; return;
} }
console.info('setPasteData successfully.'); console.info('setPasteData successfully.');
}); });
``` ```
### setPasteData ### setPasteData
...@@ -878,15 +878,15 @@ Writes data to a pasteboard. This API uses a promise to return the result. ...@@ -878,15 +878,15 @@ Writes data to a pasteboard. This API uses a promise to return the result.
**Example** **Example**
```js ```js
var pasteData = pasteboard.createPlainTextData("content"); var pasteData = pasteboard.createPlainTextData("content");
var systemPasteboard = pasteboard.getSystemPasteboard(); var systemPasteboard = pasteboard.getSystemPasteboard();
systemPasteboard.setPasteData(pasteData).then((data) => { systemPasteboard.setPasteData(pasteData).then((data) => {
console.info('setPasteData success.'); console.info('setPasteData success.');
}).catch((error) => { }).catch((error) => {
console.error('Failed to setPasteData. Cause: ' + error.message); console.error('Failed to setPasteData. Cause: ' + error.message);
}); });
``` ```
### getPasteData ### getPasteData
...@@ -905,16 +905,16 @@ Reads the system pasteboard content. This API uses an asynchronous callback to r ...@@ -905,16 +905,16 @@ Reads the system pasteboard content. This API uses an asynchronous callback to r
**Example** **Example**
```js ```js
var systemPasteboard = pasteboard.getSystemPasteboard(); var systemPasteboard = pasteboard.getSystemPasteboard();
systemPasteboard.getPasteData((error, pasteData) => { systemPasteboard.getPasteData((error, pasteData) => {
if (error) { if (error) {
console.error('Failed to getPasteData. Cause: ' + error.message); console.error('Failed to getPasteData. Cause: ' + error.message);
return; return;
} }
var text = pasteData.getPrimaryText(); var text = pasteData.getPrimaryText();
}); });
``` ```
### getPasteData ### getPasteData
...@@ -933,14 +933,14 @@ Reads the system pasteboard content. This API uses a promise to return the resul ...@@ -933,14 +933,14 @@ Reads the system pasteboard content. This API uses a promise to return the resul
**Example** **Example**
```js ```js
var systemPasteboard = pasteboard.getSystemPasteboard(); var systemPasteboard = pasteboard.getSystemPasteboard();
systemPasteboard.getPasteData().then((pasteData) => { systemPasteboard.getPasteData().then((pasteData) => {
var text = pasteData.getPrimaryText(); var text = pasteData.getPrimaryText();
}).catch((error) => { }).catch((error) => {
console.error('Failed to getPasteData. Cause: ' + error.message); console.error('Failed to getPasteData. Cause: ' + error.message);
}) })
``` ```
### on('update')<sup>7+</sup> ### on('update')<sup>7+</sup>
...@@ -960,18 +960,18 @@ Subscribes to the content change event of the system pasteboard. If the pasteboa ...@@ -960,18 +960,18 @@ Subscribes to the content change event of the system pasteboard. If the pasteboa
**Example** **Example**
```js ```js
var systemPasteboard = pasteboard.getSystemPasteboard(); var systemPasteboard = pasteboard.getSystemPasteboard();
var listener = ()=>{ var listener = () => {
console.info('The system pasteboard has changed'); console.info('The system pasteboard has changed');
}; };
systemPasteboard.on('update', listener); systemPasteboard.on('update', listener);
``` ```
### off('update')<sup>7+</sup> ### off('update')<sup>7+</sup>
off(type: 'update', callback? : () =&gt;void ): void off(type: 'update', callback?: () =&gt;void ): void
Unsubscribes from the system pasteboard content change event. Unsubscribes from the system pasteboard content change event.
...@@ -986,9 +986,12 @@ Unsubscribes from the system pasteboard content change event. ...@@ -986,9 +986,12 @@ Unsubscribes from the system pasteboard content change event.
**Example** **Example**
```js ```js
systemPasteboard.off('update', listener); let listener = () => {
``` console.info('The system pasteboard has changed');
};
systemPasteboard.off('update', listener);
```
### hasPasteData<sup>7+</sup> ### hasPasteData<sup>7+</sup>
...@@ -1007,15 +1010,15 @@ Checks whether the system pasteboard contains content. This API uses an asynchro ...@@ -1007,15 +1010,15 @@ Checks whether the system pasteboard contains content. This API uses an asynchro
**Example** **Example**
```js ```js
systemPasteboard.hasPasteData((err, data) => { systemPasteboard.hasPasteData((err, data) => {
if (err) { if (err) {
console.error('failed to hasPasteData because ' + JSON.stringify(err)); console.error('failed to hasPasteData because ' + JSON.stringify(err));
return; return;
} }
console.info('success hasPasteData : ' + JSON.stringify(data)); console.info('success hasPasteData : ' + JSON.stringify(data));
}); });
``` ```
### hasPasteData<sup>7+</sup> ### hasPasteData<sup>7+</sup>
...@@ -1059,15 +1062,15 @@ Clears the system pasteboard content. This API uses an asynchronous callback to ...@@ -1059,15 +1062,15 @@ Clears the system pasteboard content. This API uses an asynchronous callback to
**Example** **Example**
```js ```js
systemPasteboard.clear((err, data) => { systemPasteboard.clear((err, data) => {
if (err) { if (err) {
console.error('failed to clear because ' + JSON.stringify(err)); console.error('failed to clear because ' + JSON.stringify(err));
return; return;
} }
console.info('success clear'); console.info('success clear');
}); });
``` ```
### clear<sup>7+</sup> ### clear<sup>7+</sup>
...@@ -1086,10 +1089,10 @@ Clears the system pasteboard content. This API uses a promise to return the resu ...@@ -1086,10 +1089,10 @@ Clears the system pasteboard content. This API uses a promise to return the resu
**Example** **Example**
```js ```js
systemPasteboard.clear().then((data) => { systemPasteboard.clear().then((data) => {
console.info('success clear'); console.info('success clear');
}).catch((error) => { }).catch((error) => {
console.error('failed to clear because ' + JSON.stringify(error)); console.error('failed to clear because ' + JSON.stringify(error));
}); });
``` ```
\ No newline at end of file
en/application-dev/reference/apis/js-apis-system-parameter.md
浏览文件 @ 0bf53713
# System Parameter # System Parameter
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> - The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. > - The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> - This is a system API and cannot be called by third-party applications. > - This is a system API and cannot be called by third-party applications.
...@@ -203,9 +203,9 @@ try { ...@@ -203,9 +203,9 @@ try {
``` ```
## parameter.set(key: string, def?: string) ## parameter.set
set(key: string, def?: string): Promise&lt;string&gt; set(key: string, value: string): Promise&lt;void&gt;
Sets a value for the attribute with the specified key. This API uses a promise to return the result. Sets a value for the attribute with the specified key. This API uses a promise to return the result.
...@@ -222,7 +222,7 @@ Sets a value for the attribute with the specified key. This API uses a promise t ...@@ -222,7 +222,7 @@ Sets a value for the attribute with the specified key. This API uses a promise t
| Type| Description| | Type| Description|
| -------- | -------- | | -------- | -------- |
| Promise&lt;string&gt; | Promise used to return the execution result.| | Promise&lt;void&gt; | Promise used to return the execution result.|
**Example** **Example**
......
en/application-dev/reference/apis/js-apis-wallpaper.md
浏览文件 @ 0bf53713
# Wallpaper # Wallpaper
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. > **NOTE**<br>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
## Modules to Import ## Modules to Import
...@@ -29,18 +28,18 @@ Defines the wallpaper type. ...@@ -29,18 +28,18 @@ Defines the wallpaper type.
getColors(wallpaperType: WallpaperType, callback: AsyncCallback&lt;Array&lt;RgbaColor&gt;&gt;): void getColors(wallpaperType: WallpaperType, callback: AsyncCallback&lt;Array&lt;RgbaColor&gt;&gt;): void
Obtains the main color information of the wallpaper of a specified type. Obtains the main color information of the wallpaper of the specified type. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
- Parameters **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| wallpaperType | [WallpaperType](#wallpapertype) | Yes | Wallpaper type. | | wallpaperType | [WallpaperType](#wallpapertype) | Yes | Wallpaper type. |
| callback | AsyncCallback&lt;Array&lt;[RgbaColor](#rgbacolor)&gt;&gt; | Yes | Callback used to return the main color information of the wallpaper. | | callback | AsyncCallback&lt;Array&lt;[RgbaColor](#rgbacolor)&gt;&gt; | Yes | Callback used to return the main color information of the wallpaper. |
**Example**
- Example
```js ```js
wallpaper.getColors(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => { wallpaper.getColors(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {
if (error) { if (error) {
...@@ -56,7 +55,7 @@ Obtains the main color information of the wallpaper of a specified type. ...@@ -56,7 +55,7 @@ Obtains the main color information of the wallpaper of a specified type.
getColors(wallpaperType: WallpaperType): Promise&lt;Array&lt;RgbaColor&gt;&gt; getColors(wallpaperType: WallpaperType): Promise&lt;Array&lt;RgbaColor&gt;&gt;
Obtains the main color information of the wallpaper of a specified type. Obtains the main color information of the wallpaper of the specified type. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -74,20 +73,20 @@ Obtains the main color information of the wallpaper of a specified type. ...@@ -74,20 +73,20 @@ Obtains the main color information of the wallpaper of a specified type.
**Example** **Example**
```js ```js
wallpaper.getColors(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => { wallpaper.getColors(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
console.log(`success to getColors.`); console.log(`success to getColors.`);
}).catch((error) => { }).catch((error) => {
console.error(`failed to getColors because: ` + JSON.stringify(error)); console.error(`failed to getColors because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.getId ## wallpaper.getId
getId(wallpaperType: WallpaperType, callback: AsyncCallback&lt;number&gt;): void getId(wallpaperType: WallpaperType, callback: AsyncCallback&lt;number&gt;): void
Obtains the ID of the wallpaper of the specified type. Obtains the ID of the wallpaper of the specified type. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -100,25 +99,26 @@ Obtains the ID of the wallpaper of the specified type. ...@@ -100,25 +99,26 @@ Obtains the ID of the wallpaper of the specified type.
**Example** **Example**
```js ```js
wallpaper.getId(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => { wallpaper.getId(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {
if (error) { if (error) {
console.error(`failed to getId because: ` + JSON.stringify(error)); console.error(`failed to getId because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to getId: ` + JSON.stringify(data)); console.log(`success to getId: ` + JSON.stringify(data));
}); });
``` ```
## wallpaper.getId ## wallpaper.getId
getId(wallpaperType: WallpaperType): Promise&lt;number&gt; getId(wallpaperType: WallpaperType): Promise&lt;number&gt;
Obtains the ID of the wallpaper of the specified type. Obtains the ID of the wallpaper of the specified type. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
...@@ -133,20 +133,20 @@ Obtains the ID of the wallpaper of the specified type. ...@@ -133,20 +133,20 @@ Obtains the ID of the wallpaper of the specified type.
**Example** **Example**
```js ```js
wallpaper.getId(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => { wallpaper.getId(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
console.log(`success to getId: ` + JSON.stringify(data)); console.log(`success to getId: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to getId because: ` + JSON.stringify(error)); console.error(`failed to getId because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.getMinHeight ## wallpaper.getMinHeight
getMinHeight(callback: AsyncCallback&lt;number&gt;): void getMinHeight(callback: AsyncCallback&lt;number&gt;): void
Obtains the minimum height of the wallpaper. Obtains the minimum height of this wallpaper. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -158,25 +158,26 @@ Obtains the minimum height of the wallpaper. ...@@ -158,25 +158,26 @@ Obtains the minimum height of the wallpaper.
**Example** **Example**
```js ```js
wallpaper.getMinHeight((error, data) => { wallpaper.getMinHeight((error, data) => {
if (error) { if (error) {
console.error(`failed to getMinHeight because: ` + JSON.stringify(error)); console.error(`failed to getMinHeight because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to getMinHeight: ` + JSON.stringify(data)); console.log(`success to getMinHeight: ` + JSON.stringify(data));
}); });
``` ```
## wallpaper.getMinHeight ## wallpaper.getMinHeight
getMinHeight(): Promise&lt;number&gt; getMinHeight(): Promise&lt;number&gt;
Obtains the minimum height of the wallpaper. Obtains the minimum height of this wallpaper. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
**Return value** **Return value**
| Type | Description | | Type | Description |
...@@ -185,20 +186,20 @@ Obtains the minimum height of the wallpaper. ...@@ -185,20 +186,20 @@ Obtains the minimum height of the wallpaper.
**Example** **Example**
```js ```js
wallpaper.getMinHeight().then((data) => { wallpaper.getMinHeight().then((data) => {
console.log(`success to getMinHeight: ` + JSON.stringify(data)); console.log(`success to getMinHeight: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to getMinHeight because: ` + JSON.stringify(error)); console.error(`failed to getMinHeight because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.getMinWidth ## wallpaper.getMinWidth
getMinWidth(callback: AsyncCallback&lt;number&gt;): void getMinWidth(callback: AsyncCallback&lt;number&gt;): void
Obtains the minimum width of the wallpaper. Obtains the minimum width of this wallpaper. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -210,22 +211,22 @@ Obtains the minimum width of the wallpaper. ...@@ -210,22 +211,22 @@ Obtains the minimum width of the wallpaper.
**Example** **Example**
```js ```js
wallpaper.getMinWidth((error, data) => { wallpaper.getMinWidth((error, data) => {
if (error) { if (error) {
console.error(`failed to getMinWidth because: ` + JSON.stringify(error)); console.error(`failed to getMinWidth because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to getMinWidth: ` + JSON.stringify(data)); console.log(`success to getMinWidth: ` + JSON.stringify(data));
}); });
``` ```
## wallpaper.getMinWidth ## wallpaper.getMinWidth
getMinWidth(): Promise&lt;number&gt; getMinWidth(): Promise&lt;number&gt;
Obtains the minimum width of the wallpaper. Obtains the minimum width of this wallpaper. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -237,20 +238,20 @@ Obtains the minimum width of the wallpaper. ...@@ -237,20 +238,20 @@ Obtains the minimum width of the wallpaper.
**Example** **Example**
```js ```js
wallpaper.getMinWidth().then((data) => { wallpaper.getMinWidth().then((data) => {
console.log(`success to getMinWidth: ` + JSON.stringify(data)); console.log(`success to getMinWidth: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to getMinWidth because: ` + JSON.stringify(error)); console.error(`failed to getMinWidth because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.isChangePermitted ## wallpaper.isChangePermitted
isChangePermitted(callback: AsyncCallback&lt;boolean&gt;): void isChangePermitted(callback: AsyncCallback&lt;boolean&gt;): void
Checks whether to allow the application to change the wallpaper for the current user. Checks whether to allow the application to change the wallpaper for the current user. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -258,26 +259,26 @@ Checks whether to allow the application to change the wallpaper for the current ...@@ -258,26 +259,26 @@ Checks whether to allow the application to change the wallpaper for the current
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;boolean&gt; | Yes | Callback used to return the queried result. Returns **true** if it is allowed; returns **false** otherwise. | | callback | AsyncCallback&lt;boolean&gt; | Yes | Returns **true** if the application is allowed to change the wallpaper for the current user; returns **false** otherwise. |
**Example** **Example**
```js ```js
wallpaper.isChangePermitted((error, data) => { wallpaper.isChangePermitted((error, data) => {
if (error) { if (error) {
console.error(`failed to isChangePermitted because: ` + JSON.stringify(error)); console.error(`failed to isChangePermitted because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to isChangePermitted: ` + JSON.stringify(data)); console.log(`success to isChangePermitted: ` + JSON.stringify(data));
}); });
``` ```
## wallpaper.isChangePermitted ## wallpaper.isChangePermitted
isChangePermitted(): Promise&lt;boolean&gt; isChangePermitted(): Promise&lt;boolean&gt;
Checks whether to allow the application to change the wallpaper for the current user. Checks whether to allow the application to change the wallpaper for the current user. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -285,24 +286,24 @@ Checks whether to allow the application to change the wallpaper for the current ...@@ -285,24 +286,24 @@ Checks whether to allow the application to change the wallpaper for the current
| Type | Description | | Type | Description |
| -------- | -------- | | -------- | -------- |
| Promise&lt;boolean&gt; | Promise used to return whether to allow the application to change the wallpaper for the current user. Returns **true** if it is allowed; returns **false** otherwise. | | Promise&lt;boolean&gt; | Returns **true** if the application is allowed to change the wallpaper for the current user; returns **false** otherwise. |
**Example** **Example**
```js ```js
wallpaper.isChangePermitted().then((data) => { wallpaper.isChangePermitted().then((data) => {
console.log(`success to isChangePermitted: ` + JSON.stringify(data)); console.log(`success to isChangePermitted: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to isChangePermitted because: ` + JSON.stringify(error)); console.error(`failed to isChangePermitted because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.isOperationAllowed ## wallpaper.isOperationAllowed
isOperationAllowed(callback: AsyncCallback&lt;boolean&gt;): void isOperationAllowed(callback: AsyncCallback&lt;boolean&gt;): void
Checks whether the user is allowed to set wallpapers. Checks whether the user is allowed to set wallpapers. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -310,26 +311,26 @@ Checks whether the user is allowed to set wallpapers. ...@@ -310,26 +311,26 @@ Checks whether the user is allowed to set wallpapers.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;boolean&gt; | Yes | Callback used to return whether the user is allowed to set wallpapers. Returns **true** if it is allowed; returns **false** otherwise. | | callback | AsyncCallback&lt;boolean&gt; | Yes | Returns **true** if the user is allowed to set wallpapers; returns **false** otherwise. |
**Example** **Example**
```js ```js
wallpaper.isOperationAllowed((error, data) => { wallpaper.isOperationAllowed((error, data) => {
if (error) { if (error) {
console.error(`failed to isOperationAllowed because: ` + JSON.stringify(error)); console.error(`failed to isOperationAllowed because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to isOperationAllowed: ` + JSON.stringify(data)); console.log(`success to isOperationAllowed: ` + JSON.stringify(data));
}); });
``` ```
## wallpaper.isOperationAllowed ## wallpaper.isOperationAllowed
isOperationAllowed(): Promise&lt;boolean&gt; isOperationAllowed(): Promise&lt;boolean&gt;
Checks whether the user is allowed to set wallpapers. Checks whether the user is allowed to set wallpapers. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -337,26 +338,26 @@ Checks whether the user is allowed to set wallpapers. ...@@ -337,26 +338,26 @@ Checks whether the user is allowed to set wallpapers.
| Type | Description | | Type | Description |
| -------- | -------- | | -------- | -------- |
| Promise&lt;boolean&gt; | Promise used to return whether the user is allowed to set wallpapers. Returns **true** if it is allowed; returns **false** otherwise. | | Promise&lt;boolean&gt; | Returns **true** if the user is allowed to set wallpapers; returns **false** otherwise. |
**Example** **Example**
```js ```js
wallpaper.isOperationAllowed().then((data) => { wallpaper.isOperationAllowed().then((data) => {
console.log(`success to isOperationAllowed: ` + JSON.stringify(data)); console.log(`success to isOperationAllowed: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to isOperationAllowed because: ` + JSON.stringify(error)); console.error(`failed to isOperationAllowed because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.reset ## wallpaper.reset
reset(wallpaperType: WallpaperType, callback: AsyncCallback&lt;void&gt;): void reset(wallpaperType: WallpaperType, callback: AsyncCallback&lt;void&gt;): void
Removes a wallpaper of the specified type and restores the default one. Resets the wallpaper of the specified type to the default wallpaper. This API uses an asynchronous callback to return the result.
**Required permission**: ohos.permission.SET_WALLPAPER **Required permissions**: ohos.permission.SET_WALLPAPER
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -365,28 +366,28 @@ Removes a wallpaper of the specified type and restores the default one. ...@@ -365,28 +366,28 @@ Removes a wallpaper of the specified type and restores the default one.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| wallpaperType | [WallpaperType](#wallpapertype) | Yes | Wallpaper type. | | wallpaperType | [WallpaperType](#wallpapertype) | Yes | Wallpaper type. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. If the operation is successful, the result of removal is returned. Otherwise, error information is returned. | | callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. If the operation is successful, the result is returned. Otherwise, error information is returned. |
**Example** **Example**
```js ```js
wallpaper.reset(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => { wallpaper.reset(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {
if (error) { if (error) {
console.error(`failed to reset because: ` + JSON.stringify(error)); console.error(`failed to reset because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to reset.`); console.log(`success to reset.`);
}); });
``` ```
## wallpaper.reset ## wallpaper.reset
reset(wallpaperType: WallpaperType): Promise&lt;void&gt; reset(wallpaperType: WallpaperType): Promise&lt;void&gt;
Removes a wallpaper of the specified type and restores the default one. Resets the wallpaper of the specified type to the default wallpaper. This API uses a promise to return the result.
**Required permission**: ohos.permission.SET_WALLPAPER **Required permissions**: ohos.permission.SET_WALLPAPER
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -400,26 +401,26 @@ Removes a wallpaper of the specified type and restores the default one. ...@@ -400,26 +401,26 @@ Removes a wallpaper of the specified type and restores the default one.
| Type | Description | | Type | Description |
| -------- | -------- | | -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result. If the operation is successful, the result of removal is returned. Otherwise, error information is returned. | | Promise&lt;void&gt; | Promise used to return the result. If the operation is successful, the result is returned. Otherwise, error information is returned. |
**Example** **Example**
```js ```js
wallpaper.reset(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => { wallpaper.reset(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
console.log(`success to reset.`); console.log(`success to reset.`);
}).catch((error) => { }).catch((error) => {
console.error(`failed to reset because: ` + JSON.stringify(error)); console.error(`failed to reset because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.setWallpaper ## wallpaper.setWallpaper
setWallpaper(source: string | image.PixelMap, wallpaperType: WallpaperType, callback: AsyncCallback&lt;void&gt;): void setWallpaper(source: string | image.PixelMap, wallpaperType: WallpaperType, callback: AsyncCallback&lt;void&gt;): void
Sets a specified source as the wallpaper of a specified type. Sets a specified source as the wallpaper of a specified type. This API uses an asynchronous callback to return the result.
**Required permission**: ohos.permission.SET_WALLPAPER **Required permissions**: ohos.permission.SET_WALLPAPER
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -427,7 +428,7 @@ Sets a specified source as the wallpaper of a specified type. ...@@ -427,7 +428,7 @@ Sets a specified source as the wallpaper of a specified type.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| source | string \| [PixelMap](js-apis-image.md#pixelmap7) | Yes | URI path of the JPEG or PNG file, or bitmap of the PNG file. | | source | string \| [PixelMap](js-apis-image.md#pixelmap7) | Yes | URI of a JPEG or PNG file, or bitmap of a PNG file. |
| wallpaperType | [WallpaperType](#wallpapertype) | Yes | Wallpaper type. | | wallpaperType | [WallpaperType](#wallpapertype) | Yes | Wallpaper type. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. If the operation is successful, the setting result is returned. Otherwise, error information is returned. | | callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. If the operation is successful, the setting result is returned. Otherwise, error information is returned. |
...@@ -435,45 +436,45 @@ Sets a specified source as the wallpaper of a specified type. ...@@ -435,45 +436,45 @@ Sets a specified source as the wallpaper of a specified type.
```js ```js
// The source type is string. // The source type is string.
let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg"; let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
wallpaper.setWallpaper(wallpaperPath, wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => { wallpaper.setWallpaper(wallpaperPath, wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {
if (error) { if (error) {
console.error(`failed to setWallpaper because: ` + JSON.stringify(error)); console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to setWallpaper.`); console.log(`success to setWallpaper.`);
}); });
// The source type is image.PixelMap. // The source type is image.PixelMap.
import image from '@ohos.multimedia.image'; import image from '@ohos.multimedia.image';
let imageSource = image.createImageSource("file://" + wallpaperPath); let imageSource = image.createImageSource("file://" + wallpaperPath);
let opts = { let opts = {
"desiredSize": { "desiredSize": {
"height": 3648, "height": 3648,
"width": 2736 "width": 2736
} }
}; };
imageSource.createPixelMap(opts).then((pixelMap) => { imageSource.createPixelMap(opts).then((pixelMap) => {
wallpaper.setWallpaper(pixelMap, wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => { wallpaper.setWallpaper(pixelMap, wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {
if (error) { if (error) {
console.error(`failed to setWallpaper because: ` + JSON.stringify(error)); console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to setWallpaper.`); console.log(`success to setWallpaper.`);
}); });
}).catch((error) => { }).catch((error) => {
console.error(`failed to createPixelMap because: ` + JSON.stringify(error)); console.error(`failed to createPixelMap because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.setWallpaper ## wallpaper.setWallpaper
setWallpaper(source: string | image.PixelMap, wallpaperType: WallpaperType): Promise&lt;void&gt; setWallpaper(source: string | image.PixelMap, wallpaperType: WallpaperType): Promise&lt;void&gt;
Sets a specified source as the wallpaper of a specified type. Sets a specified source as the wallpaper of a specified type. This API uses a promise to return the result.
**Required permission**: ohos.permission.SET_WALLPAPER **Required permissions**: ohos.permission.SET_WALLPAPER
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -494,38 +495,38 @@ Sets a specified source as the wallpaper of a specified type. ...@@ -494,38 +495,38 @@ Sets a specified source as the wallpaper of a specified type.
```js ```js
// The source type is string. // The source type is string.
let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg"; let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
wallpaper.setWallpaper(wallpaperPath, wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => { wallpaper.setWallpaper(wallpaperPath, wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
console.log(`success to setWallpaper.`); console.log(`success to setWallpaper.`);
}).catch((error) => { }).catch((error) => {
console.error(`failed to setWallpaper because: ` + JSON.stringify(error)); console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
}); });
// The source type is image.PixelMap. // The source type is image.PixelMap.
import image from '@ohos.multimedia.image'; import image from '@ohos.multimedia.image';
let imageSource = image.createImageSource("file://" + wallpaperPath); let imageSource = image.createImageSource("file://" + wallpaperPath);
let opts = { let opts = {
"desiredSize": { "desiredSize": {
"height": 3648, "height": 3648,
"width": 2736 "width": 2736
} }
}; };
imageSource.createPixelMap(opts).then((pixelMap) => { imageSource.createPixelMap(opts).then((pixelMap) => {
wallpaper.setWallpaper(pixelMap, wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => { wallpaper.setWallpaper(pixelMap, wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
console.log(`success to setWallpaper.`); console.log(`success to setWallpaper.`);
}).catch((error) => { }).catch((error) => {
console.error(`failed to setWallpaper because: ` + JSON.stringify(error)); console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
}); });
}).catch((error) => { }).catch((error) => {
console.error(`failed to createPixelMap because: ` + JSON.stringify(error)); console.error(`failed to createPixelMap because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.getFile<sup>8+</sup> ## wallpaper.getFile<sup>8+</sup>
getFile(wallpaperType: WallpaperType, callback: AsyncCallback&lt;number&gt;): void getFile(wallpaperType: WallpaperType, callback: AsyncCallback&lt;number&gt;): void
Obtains the wallpaper of the specified type. Obtains the wallpaper of the specified type. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.SET_WALLPAPER and ohos.permission.READ_USER_STORAGE **Required permissions**: ohos.permission.SET_WALLPAPER and ohos.permission.READ_USER_STORAGE
...@@ -540,23 +541,23 @@ Obtains the wallpaper of the specified type. ...@@ -540,23 +541,23 @@ Obtains the wallpaper of the specified type.
**Example** **Example**
```js ```js
wallpaper.getFile(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => { wallpaper.getFile(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {
if (error) { if (error) {
console.error(`failed to getFile because: ` + JSON.stringify(error)); console.error(`failed to getFile because: ` + JSON.stringify(error));
return; return;
} }
console.log(`success to getFile: ` + JSON.stringify(data)); console.log(`success to getFile: ` + JSON.stringify(data));
}); });
``` ```
## wallpaper.getFile<sup>8+</sup> ## wallpaper.getFile<sup>8+</sup>
getFile(wallpaperType: WallpaperType): Promise&lt;number&gt; getFile(wallpaperType: WallpaperType): Promise&lt;number&gt;
Obtains the wallpaper of the specified type. Obtains the wallpaper of the specified type. This API uses a promise to return the result.
**Required permissions**: ohos.permission.GET_WALLPAPER and ohos.permission.READ_USER_STORAGE **Required permissions**: ohos.permission.SET_WALLPAPER and ohos.permission.READ_USER_STORAGE
**System capability**: SystemCapability.MiscServices.Wallpaper **System capability**: SystemCapability.MiscServices.Wallpaper
...@@ -574,13 +575,75 @@ Obtains the wallpaper of the specified type. ...@@ -574,13 +575,75 @@ Obtains the wallpaper of the specified type.
**Example** **Example**
```js ```js
wallpaper.getFile(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => { wallpaper.getFile(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
console.log(`success to getFile: ` + JSON.stringify(data)); console.log(`success to getFile: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to getFile because: ` + JSON.stringify(error)); console.error(`failed to getFile because: ` + JSON.stringify(error));
}); });
``` ```
## wallpaper.getPixelMap
getPixelMap(wallpaperType: WallpaperType, callback: AsyncCallback&lt;image.PixelMap&gt;): void;
Obtains the pixel image for the wallpaper of the specified type. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.GET_WALLPAPER and ohos.permission.READ_USER_STORAGE
**System capability**: SystemCapability.MiscServices.Wallpaper
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| wallpaperType | [WallpaperType](#wallpapertype) | Yes| Wallpaper type.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to return the result. If the operation is successful, the result is returned. Otherwise, error information is returned.|
**Example**
```js
wallpaper.getPixelMap(wallpaper.WallpaperType.WALLPAPER_SYSTEM, function (err, data) {
console.info('wallpaperXTS ===> testGetPixelMapCallbackSystem err : ' + JSON.stringify(err));
console.info('wallpaperXTS ===> testGetPixelMapCallbackSystem data : ' + JSON.stringify(data));
});
```
## wallpaper.getPixelMap
getPixelMap(wallpaperType: WallpaperType): Promise&lt;image.PixelMap&gt;
Obtains the pixel image for the wallpaper of the specified type. This API uses a promise to return the result.
**Required permissions**: ohos.permission.GET_WALLPAPER and ohos.permission.READ_USER_STORAGE
**System capability**: SystemCapability.MiscServices.Wallpaper
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| wallpaperType | [WallpaperType](#wallpapertype) | Yes| Wallpaper type.|
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result. If the operation is successful, the result is returned. Otherwise, error information is returned.|
**Example**
```js
wallpaper.getPixelMap(WALLPAPER_SYSTEM).then((data) => {
console.info('wallpaperXTS ===> testGetPixelMapPromiseSystem data : ' + data);
console.info('wallpaperXTS ===> testGetPixelMapPromiseSystem data : ' + JSON.stringify(data));
}).catch((err) => {
console.info('wallpaperXTS ===> testGetPixelMapPromiseSystem err : ' + err);
console.info('wallpaperXTS ===> testGetPixelMapPromiseSystem err : ' + JSON.stringify(err));
});
```
## wallpaper.on('colorChange') ## wallpaper.on('colorChange')
...@@ -596,16 +659,16 @@ Subscribes to the wallpaper color change event. ...@@ -596,16 +659,16 @@ Subscribes to the wallpaper color change event.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| type | string | Yes | Type of the event to subscribe to. The value **colorChange** indicates subscribing to the wallpaper color change event. | | type | string | Yes | Type of the event to subscribe to. The value **colorChange** indicates subscribing to the wallpaper color change event. |
| callback | function | Yes | Callback triggered when the wallpaper color changes. The wallpaper type and main colors are returned.<br/>- colors<br/> Main color information of the wallpaper. For details, see [RgbaColor](#rgbacolor).<br/>- wallpaperType<br/> Wallpaper type. | | callback | function | Yes | Callback triggered when the wallpaper color changes. The wallpaper type and main colors are returned.<br>- colors<br> Main color information of the wallpaper. For details, see [RgbaColor](#rgbacolor).<br>- wallpaperType<br> Wallpaper type. |
**Example** **Example**
```js ```js
let listener = (colors, wallpaperType) => { let listener = (colors, wallpaperType) => {
console.log(`wallpaper color changed.`); console.log(`wallpaper color changed.`);
}; };
wallpaper.on('colorChange', listener); wallpaper.on('colorChange', listener);
``` ```
## wallpaper.off('colorChange') ## wallpaper.off('colorChange')
...@@ -621,15 +684,15 @@ Unsubscribes from the wallpaper color change event. ...@@ -621,15 +684,15 @@ Unsubscribes from the wallpaper color change event.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| type | string | Yes | Type of the event to unsubscribe from. The value **colorChange** indicates unsubscribing from the wallpaper color change event. | | type | string | Yes | Type of the event to unsubscribe from. The value **colorChange** indicates unsubscribing from the wallpaper color change event. |
| callback | function | No | Callback for the wallpaper color change event. If this parameter is not specified, all callbacks corresponding to the wallpaper color change event are invoked.<br/>- colors<br/> Main color information of the wallpaper. For details, see [RgbaColor](#rgbacolor).<br/>- wallpaperType<br/> Wallpaper type. | | callback | function | No | Callback for the wallpaper color change event. If this parameter is not specified, all callbacks corresponding to the wallpaper color change event are invoked.<br>- colors<br> Main color information of the wallpaper. For details, see [RgbaColor](#rgbacolor).<br>- wallpaperType<br> Wallpaper type. |
**Example** **Example**
```js ```js
let listener = (colors, wallpaperType) => { let listener = (colors, wallpaperType) => {
console.log(`wallpaper color changed.`); console.log(`wallpaper color changed.`);
}; };
wallpaper.on('colorChange', listener); wallpaper.on('colorChange', listener);
// Unsubscribe from the listener. // Unsubscribe from the listener.
wallpaper.off('colorChange', listener); wallpaper.off('colorChange', listener);
//Unsubscribe from all subscriptions of the colorChange type. //Unsubscribe from all subscriptions of the colorChange type.
......
en/application-dev/reference/arkui-js/js-components-media-video.md
浏览文件 @ 0bf53713
# video<a name="EN-US_TOPIC_0000001173164749"></a> # video
The **<video\>** component provides a video player.
>![](../../public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**<br>
>- Configure the following information in the **config.json** file: >
> ``` > - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
> "configChanges": ["orientation"] >
> ``` > - Set **configChanges** under **abilities** in the **config.json** file to **orientation**.
> ```
> "abilities": [
> {
> "configChanges": ["orientation"],
> ...
> }
> ]
> ```
## Required Permissions<a name="section11257113618419"></a> The **\<Video>** component provides a video player.
## Child Component<a name="sc18e8342b29747dbbd70887cc3c0a22d"></a>
## Child Components
Not supported Not supported
## Attributes<a name="s50d82bce96774b86846ab2739d7ce18d"></a>
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
<a name="table20633101642315"></a>
<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="aa872998ac2d84843a3c5161889afffef"><a name="aa872998ac2d84843a3c5161889afffef"></a><a name="aa872998ac2d84843a3c5161889afffef"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="ab2111648ee0e4f6d881be8954e7acaab"><a name="ab2111648ee0e4f6d881be8954e7acaab"></a><a name="ab2111648ee0e4f6d881be8954e7acaab"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="ab377d1c90900478ea4ecab51e9a058af"><a name="ab377d1c90900478ea4ecab51e9a058af"></a><a name="ab377d1c90900478ea4ecab51e9a058af"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="a1d574a0044ed42ec8a2603bc82734232"><a name="a1d574a0044ed42ec8a2603bc82734232"></a><a name="a1d574a0044ed42ec8a2603bc82734232"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row174491921121516"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p886612215154"><a name="p886612215154"></a><a name="p886612215154"></a>muted</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p2086602211514"><a name="p2086602211514"></a><a name="p2086602211514"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p17866222171514"><a name="p17866222171514"></a><a name="p17866222171514"></a>false</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p6866102231512"><a name="p6866102231512"></a><a name="p6866102231512"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p58668224150"><a name="p58668224150"></a><a name="p58668224150"></a>Whether a video is muted.</p>
</td>
</tr>
<tr id="row198031871157"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p886615229150"><a name="p886615229150"></a><a name="p886615229150"></a>src</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p18664223156"><a name="p18664223156"></a><a name="p18664223156"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p1786642214154"><a name="p1786642214154"></a><a name="p1786642214154"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p108661922191514"><a name="p108661922191514"></a><a name="p108661922191514"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p28661822121511"><a name="p28661822121511"></a><a name="p28661822121511"></a>Path of the video content to play.</p>
</td>
</tr>
<tr id="row84223141151"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p1486615224155"><a name="p1486615224155"></a><a name="p1486615224155"></a>autoplay</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p8866202219150"><a name="p8866202219150"></a><a name="p8866202219150"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p168661222171510"><a name="p168661222171510"></a><a name="p168661222171510"></a>false</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1786618220151"><a name="p1786618220151"></a><a name="p1786618220151"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p1386610221157"><a name="p1386610221157"></a><a name="p1386610221157"></a>Whether a video is played automatically after being rendered.</p>
</td>
</tr>
<tr id="row4862225151"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p4867112211519"><a name="p4867112211519"></a><a name="p4867112211519"></a>controls</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p486742231516"><a name="p486742231516"></a><a name="p486742231516"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p118671822171510"><a name="p118671822171510"></a><a name="p118671822171510"></a>true</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p148678225153"><a name="p148678225153"></a><a name="p148678225153"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p1286742213153"><a name="p1286742213153"></a><a name="p1286742213153"></a>Whether the control bar is displayed during video playback. If the value is set to <strong id="b6147532141612"><a name="b6147532141612"></a><a name="b6147532141612"></a>false</strong>, the control bar is not displayed. The default value is <strong id="b161341542112813"><a name="b161341542112813"></a><a name="b161341542112813"></a>true</strong>, indicating that the platform can either show or hide the control bar.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="sfbde25405aca4513a9c938f2f339b770"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<a name="table772815434205"></a>
<table><thead align="left"><tr id="row8728104352011"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="p8728104312012"><a name="p8728104312012"></a><a name="p8728104312012"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="p187282438206"><a name="p187282438206"></a><a name="p187282438206"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="p12729114318201"><a name="p12729114318201"></a><a name="p12729114318201"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="p17729104352013"><a name="p17729104352013"></a><a name="p17729104352013"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="p7729104317207"><a name="p7729104317207"></a><a name="p7729104317207"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row117291043172018"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p15729184311209"><a name="p15729184311209"></a><a name="p15729184311209"></a>object-fit</p>
</td>
<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="p117291543122015"><a name="p117291543122015"></a><a name="p117291543122015"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="p672911431201"><a name="p672911431201"></a><a name="p672911431201"></a>contain</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p207294433207"><a name="p207294433207"></a><a name="p207294433207"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p1729184392013"><a name="p1729184392013"></a><a name="p1729184392013"></a>Scaling type of the video source. If <strong id="b11860175319429"><a name="b11860175319429"></a><a name="b11860175319429"></a>poster</strong> has been assigned a value, this configuration will affect the scaling type of the video poster. For details about available values, see <a href="#t8eca568266d54af484fec0f84185e923">Table 1</a>.</p>
</td>
</tr>
</tbody>
</table>
**Table 1** object-fit description
<a name="t8eca568266d54af484fec0f84185e923"></a>
<table><thead align="left"><tr id="r9b22bdd1cd2d4050a840c205bd25f5f2"><th class="cellrowborder" valign="top" width="15.02%" id="mcps1.2.3.1.1"><p id="aaf9dd8d06c5b44b8a13e3c6e17e29493"><a name="aaf9dd8d06c5b44b8a13e3c6e17e29493"></a><a name="aaf9dd8d06c5b44b8a13e3c6e17e29493"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="84.98%" id="mcps1.2.3.1.2"><p id="a63d0fe8b723d4ddfa21fc1fbb3e48165"><a name="a63d0fe8b723d4ddfa21fc1fbb3e48165"></a><a name="a63d0fe8b723d4ddfa21fc1fbb3e48165"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="ref689a9f315e4ffea4cd2d1a19bd1773"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.2.3.1.1 "><p id="p11586163511379"><a name="p11586163511379"></a><a name="p11586163511379"></a>fill</p>
</td>
<td class="cellrowborder" valign="top" width="84.98%" headers="mcps1.2.3.1.2 "><p id="p958611356373"><a name="p958611356373"></a><a name="p958611356373"></a>The video content is resized to fill the display area and its aspect ratio is not retained.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section4181420161817"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<a name="table836435619510"></a>
<table><thead align="left"><tr id="row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="a426b8903842d48fa8012a24ff3c997eb"><a name="a426b8903842d48fa8012a24ff3c997eb"></a><a name="a426b8903842d48fa8012a24ff3c997eb"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="a53448ba47e5e4ae9bf7774c90820e970"><a name="a53448ba47e5e4ae9bf7774c90820e970"></a><a name="a53448ba47e5e4ae9bf7774c90820e970"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="add489ff50c444f24b759162c7f4bad9a"><a name="add489ff50c444f24b759162c7f4bad9a"></a><a name="add489ff50c444f24b759162c7f4bad9a"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row116621079194"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p14995128101920"><a name="p14995128101920"></a><a name="p14995128101920"></a>prepared</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p1499513871918"><a name="p1499513871918"></a><a name="p1499513871918"></a>{ duration: value }<sup id="sup29931815101312"><a name="sup29931815101312"></a><a name="sup29931815101312"></a>5+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p1399519841911"><a name="p1399519841911"></a><a name="p1399519841911"></a>Triggered when the video preparation is complete. The video duration (in seconds) is obtained from <strong id="b10248010272"><a name="b10248010272"></a><a name="b10248010272"></a>duration</strong>.</p>
</td>
</tr>
<tr id="row76639781919"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p1899514821910"><a name="p1899514821910"></a><a name="p1899514821910"></a>start</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p1899516816193"><a name="p1899516816193"></a><a name="p1899516816193"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p8995182197"><a name="p8995182197"></a><a name="p8995182197"></a>Triggered when a video is played.</p>
</td>
</tr>
<tr id="row1066387181915"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p1899616891919"><a name="p1899616891919"></a><a name="p1899616891919"></a>pause</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p109962861914"><a name="p109962861914"></a><a name="p109962861914"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p1699615891918"><a name="p1699615891918"></a><a name="p1699615891918"></a>Triggered when a video is paused.</p>
</td>
</tr>
<tr id="row1131820251916"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p59966831917"><a name="p59966831917"></a><a name="p59966831917"></a>finish</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p1799619831915"><a name="p1799619831915"></a><a name="p1799619831915"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p199688111910"><a name="p199688111910"></a><a name="p199688111910"></a>Triggered when the video playback is finished.</p>
</td>
</tr>
<tr id="row11318921194"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p09964811192"><a name="p09964811192"></a><a name="p09964811192"></a>error</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p999616871916"><a name="p999616871916"></a><a name="p999616871916"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p399615871913"><a name="p399615871913"></a><a name="p399615871913"></a>Triggered when the playback fails.</p>
</td>
</tr>
<tr id="row143184219194"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p109962812198"><a name="p109962812198"></a><a name="p109962812198"></a>seeking</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p6996118201915"><a name="p6996118201915"></a><a name="p6996118201915"></a>{ currenttime: value }</p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p1599615891917"><a name="p1599615891917"></a><a name="p1599615891917"></a>Triggered to report the time (in seconds) when the progress bar is being dragged.</p>
</td>
</tr>
<tr id="row1637115611818"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p149964831912"><a name="p149964831912"></a><a name="p149964831912"></a>seeked</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p19996182197"><a name="p19996182197"></a><a name="p19996182197"></a>{ currenttime: value }</p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p109961085199"><a name="p109961085199"></a><a name="p109961085199"></a>Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.</p>
</td>
</tr>
<tr id="row1766775361814"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p129965831916"><a name="p129965831916"></a><a name="p129965831916"></a>timeupdate</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p4996386196"><a name="p4996386196"></a><a name="p4996386196"></a>{ currenttime: value }</p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p179976820190"><a name="p179976820190"></a><a name="p179976820190"></a>Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="s557cc2f457ff42a193807500adae2f91"></a>
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following methods are supported.
<a name="t0b0d71e0664f479d9fbcfe2cf45b34a0"></a>
<table><thead align="left"><tr id="r80520812e64447b7a841590ba3d1ecf9"><th class="cellrowborder" valign="top" width="28.000000000000004%" id="mcps1.1.4.1.1"><p id="ab440f3031e7242d1a1ee00ba387b151f"><a name="ab440f3031e7242d1a1ee00ba387b151f"></a><a name="ab440f3031e7242d1a1ee00ba387b151f"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="42%" id="mcps1.1.4.1.2"><p id="a1e28b7e4cdc84e9eacc51b8ce51590df"><a name="a1e28b7e4cdc84e9eacc51b8ce51590df"></a><a name="a1e28b7e4cdc84e9eacc51b8ce51590df"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="30%" id="mcps1.1.4.1.3"><p id="ad91f1de026e24e60b0fe5078f4226f65"><a name="ad91f1de026e24e60b0fe5078f4226f65"></a><a name="ad91f1de026e24e60b0fe5078f4226f65"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="rab3c226807734a8d874bf83c939d52ad"><td class="cellrowborder" valign="top" width="28.000000000000004%" headers="mcps1.1.4.1.1 "><p id="ac317a80879064915a1a09cef7e3070d2"><a name="ac317a80879064915a1a09cef7e3070d2"></a><a name="ac317a80879064915a1a09cef7e3070d2"></a>start</p>
</td>
<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.4.1.2 "><p id="a1589994065b74673b39ff67b72e3ec82"><a name="a1589994065b74673b39ff67b72e3ec82"></a><a name="a1589994065b74673b39ff67b72e3ec82"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="30%" headers="mcps1.1.4.1.3 "><p id="ad610eacf0ae748a0bd0611c6bd10d49d"><a name="ad610eacf0ae748a0bd0611c6bd10d49d"></a><a name="ad610eacf0ae748a0bd0611c6bd10d49d"></a>Starts playing a video.</p>
</td>
</tr>
<tr id="r74d47c5360ae4f87936bde197795b0e5"><td class="cellrowborder" valign="top" width="28.000000000000004%" headers="mcps1.1.4.1.1 "><p id="a5488606f848644c1b250b35137b770f9"><a name="a5488606f848644c1b250b35137b770f9"></a><a name="a5488606f848644c1b250b35137b770f9"></a>pause</p>
</td>
<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.4.1.2 "><p id="a715471504ba24456b9c69a09898e8025"><a name="a715471504ba24456b9c69a09898e8025"></a><a name="a715471504ba24456b9c69a09898e8025"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="30%" headers="mcps1.1.4.1.3 "><p id="a4d7fc26ada3c4c9b86818e40259494e6"><a name="a4d7fc26ada3c4c9b86818e40259494e6"></a><a name="a4d7fc26ada3c4c9b86818e40259494e6"></a>Pauses a video.</p>
</td>
</tr>
<tr id="rc1629488abde4974938cc5c17937dbc6"><td class="cellrowborder" valign="top" width="28.000000000000004%" headers="mcps1.1.4.1.1 "><p id="a74f637bafd5348bb96414961031ca01d"><a name="a74f637bafd5348bb96414961031ca01d"></a><a name="a74f637bafd5348bb96414961031ca01d"></a>setCurrentTime</p>
</td>
<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.4.1.2 "><p id="a65bc7bf0576a4e47bff523bd15ca560c"><a name="a65bc7bf0576a4e47bff523bd15ca560c"></a><a name="a65bc7bf0576a4e47bff523bd15ca560c"></a>{ currenttime: value }</p>
</td>
<td class="cellrowborder" valign="top" width="30%" headers="mcps1.1.4.1.3 "><p id="a421ac9c67d5444338709bb7be34d06ec"><a name="a421ac9c67d5444338709bb7be34d06ec"></a><a name="a421ac9c67d5444338709bb7be34d06ec"></a>Sets the video playback position, in seconds.</p>
</td>
</tr>
</tbody>
</table>
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>The methods in the above table can be called after the **attached** callback is invoked.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| muted | boolean | false | No| Whether the video is muted.|
| src | string | - | No| Path of the video content to play.|
| autoplay | boolean | false | No| Whether the video is played automatically after being rendered.|
| controls | boolean | true | No| Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.|
## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| object-fit | string | contain | No| Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.|
**Table 1** object-fit enums
| Type| Description|
| -------- | -------- |
| fill | The image is resized to fill the display area, and its aspect ratio is not retained.|
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| prepared | {&nbsp;duration:&nbsp;value&nbsp;}<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
| start | - | Triggered when the video is played.|
| pause | - | Triggered when the video playback is paused.|
| finish | - | Triggered when the video playback is finished.|
| error | - | Triggered when the video playback fails.|
| seeking | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the time (in seconds) when the progress bar is being dragged.|
| seeked | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
| timeupdate | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| start | - | Starts playing a video.|
| pause | - | Pauses a video.|
| setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | Sets the video playback position, in seconds.|
> **NOTE**<br>
> The methods in the above table can be called after the **attached** callback is invoked.
## Example
```html
<!-- xxx.hml -->
<div class="container">
<video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false'
controls='true' onprepared='preparedCallback' onstart='startCallback'
onpaues='pauesCallback' onfinish='finishCallback' onerror='errorCallback'
onseeking='seekingCallback' onseeked='seekedCallback'
ontimeupdate='timeupdateCallback'
style="object-fit:fit; width:80%; height:400px;"
onclick="change_start_pause">
</video>
</div>
```
```css
/* xxx.css */
.container {
justify-content: center;
align-items: center;
}
```
```js
// xxx.js
export default {
data: {
event:'',
seekingtime:'',
timeupdatetime:'',
seekedtime:'',
isStart: true,
duration: '',
},
preparedCallback:function(e){ this.event = 'Video successfully connected'; this.duration = e.duration;},
startCallback:function(){this.event = 'Playback starts.';},
pauseCallback:function(){this.event = 'Playback pauses.';},
finishCallback:function(){this.event = 'Playback ends.';},
errorCallback:function(){this.event = 'Playback error.';},
seekingCallback:function(e){ this.seekingtime = e.currenttime; },
timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;},
change_start_pause: function() {
if(this.isStart) {
this.$element('videoId').pause();
this.isStart = false;
} else {
this.$element('videoId').start();
this.isStart = true;
}
},
}
```
en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
浏览文件 @ 0bf53713
# Toggle # Toggle
> **NOTE**<br>
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -12,7 +11,7 @@ None ...@@ -12,7 +11,7 @@ None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
...@@ -20,42 +19,43 @@ None ...@@ -20,42 +19,43 @@ None
Toggle(options: { type: ToggleType, isOn?: boolean }) Toggle(options: { type: ToggleType, isOn?: boolean })
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| type | ToggleType | Yes | - | Type of the toggle. | | type | ToggleType | Yes| - | Type of the toggle.|
| isOn | boolean | No | false | Initial state of the toggle.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> If **isOn** is not set during component creation, the selected state can be retained during component reuse. If **isOn** is set, the selected state needs to be retained during component reuse after the selected state is recorded using an event method. | | isOn | boolean | No| false | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.|
- ToggleType enums - ToggleType enums
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| Checkbox | A checkbox is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **&lt;Text&gt;** component and the current component in the layout component. | | Checkbox | A checkbox is provided, where the **\<Text>** settings can take effect only when it is placed with the current component in a layout component.<br>> **NOTE**<br><br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
| Button | A button is provided. If the text setting is available, the corresponding text content is displayed inside the button. | | Button | A button is provided. The set text string, if any, will be displayed inside the button.|
| Switch | A switch is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **&lt;Text&gt;** component and the current component in the layout component. | | Switch | A switch is provided, where the **\<Text>** settings can take effect only when it is placed with the current component in a layout component.<br>> **NOTE**<br><br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br>&nbsp;top: 12 vp,<br>&nbsp;right: 12 vp,<br>&nbsp;bottom: 12 vp,<br>&nbsp;left: 12 vp<br> } |
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Parameter| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selectedColor | Color | - | Background color of the toggle when it is enabled. | | selectedColor | Color | - | Background color of the component when it is turned on.|
| switchPointColor | Color | - | Color of the circular slider of the **Switch** type.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> This attribute is valid only when type is set to **ToggleType.Switch**. | | switchPointColor | Color | - | Color of the circular slider when the component is of the **Switch** type.<br>> **NOTE**<br>> This attribute is valid only when **type** is set to **ToggleType.Switch**. |
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onChange(callback: (isOn: boolean) =&gt; void) | Triggered when the switch status changes. | | onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | Triggered when the toggle status changes.|
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct ToggleExample { struct ToggleExample {
build() { build() {
Column({ space: 10 }) { Column({ space: 10 }) {
Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
......
en/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 0bf53713
# Web # Web
>![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
>This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. >This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<Web\>** component can be used to display web pages. The **<Web\>** component can be used to display web pages.
...@@ -10,144 +10,202 @@ ohos.permission.INTERNET, required only for accessing online web pages. ...@@ -10,144 +10,202 @@ ohos.permission.INTERNET, required only for accessing online web pages.
## Child Components ## Child Components
None Not supported
## APIs ## APIs
- Web\(options: { src: string, controller?: WebController }\) - Web\(options: { src: string, controller?: WebController }\)
Table 1 Parameters of options Table 1 options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | ------------------------------- | --------- | ------------- | ------------------------------- | | ---------- | ------------------------------- | ---- | ---- | ------- |
| src | string | Yes | - | Address of a web page resource. | | src | string | Yes | - | Address of a web page resource.|
| controller | [WebController](#webcontroller) | No | - | Controller. | | controller | [WebController](#webcontroller) | No | - | Controller. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
> >
> - Transition animation is not supported. > - Transition animation is not supported.
> - Multi-instance is not supported. > - Multi-instance is not supported.
> - Only local audio and video are supported for playback. > - Only local audio and video are supported for playback.
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ----------------- | ---------------------------------------- | -------------- | ---------------------------------------- | | ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
| domStorageAccess | boolean | false | Whether to enable the DOM Storage API permission. By default, the permission is disabled. | | domStorageAccess | boolean | false | Whether to enable the DOM Storage API permission. By default, the permission is disabled.|
| fileAccess | boolean | true | Whether to enable in-application rawfile access through [$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md). By default, this feature is enabled. | | fileAccess | boolean | false | Whether to enable in-application rawfile access through [$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#referencing-resources). By default, this feature is enabled.|
| imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. | | fileFromUrlAccess | boolean | true | Whether to allow JavaScript scripts on web pages to access the content in [$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#referencing-resources). By default, this feature is disabled.|
| javaScriptProxy | { <br> object: object, <br> name: string, <br> methodList: Array\<string\>, <br> controller: WebController <br>} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.<br> **object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.<br> **name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.<br> **methodList** indicates the methods of the JavaScript object to be registered at the application side.<br> **controller** indicates the controller. | | imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. |
| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. | | javaScriptProxy | { <br> object: object, <br> name: string, <br> methodList: Array\<string\>, <br> controller: WebController <br>} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.<br> **object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.<br> **name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.<br> **methodList** indicates the methods of the JavaScript object to be registered at the application side.<br> **controller** indicates the controller.|
| mixedMode | MixedMode | MixedMode.None | Whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled. | | javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. |
| onlineImageAccess | boolean | true | Whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled. | | mixedMode | [MixedMode](#mixedmode) | MixedMode.None | Whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled.|
| zoomAccess | boolean | true | Whether to enable zoom gestures. By default, zoom gestures are enabled. | | onlineImageAccess | boolean | true | Whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled.|
| zoomAccess | boolean | true | Whether to enable zoom gestures. By default, zoom gestures are enabled. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** | overviewModeAccess | boolean | true | Whether to use the overview mode to load web pages. By default, this mode is used. |
| databaseAccess | boolean | false | Whether to enable database access. By default, this feature is disabled. |
| cacheMode | [CacheMode](#cachemode) | CacheMode.Default | Cache mode. |
| textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. |
| userAgent | string | - | User agent. |
> **NOTE**<br>
> >
> Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#Attributes), [height](ts-universal-attributes-size.md#Attributes), [padding](ts-universal-attributes-size.md#Attributes), [margin](ts-universal-attributes-size.md#Attributes), and [border](ts-universal-attributes-border.md#Attributes). > Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#Attributes), [height](ts-universal-attributes-size.md#Attributes), [padding](ts-universal-attributes-size.md#Attributes), [margin](ts-universal-attributes-size.md#Attributes), and [border](ts-universal-attributes-border.md#Attributes).
- <span id="MixedMode">MixedMode</span>
| Name | Description |
| ---------- | ---------------------------------------- |
| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded. |
| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
| None | HTTP and HTTPS hybrid content cannot be loaded. |
## Events ## Events
Universal events are not supported. The universal events are not supported.
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **alert()** is invoked to display an alert dialog box on the web page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows only the confirm operation) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: notifies the **\<Web>** component of the user's operation.</p> | | onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **alert()** is invoked to display an alert dialog box on the web page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows only the confirm operation) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when the current page is about to exit after the user refreshes or closes the page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: notifies the **\<Web>** component of the user's operation.</p> | | onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when the current page is about to exit after the user refreshes or closes the page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **confirm()** is invoked to display a confirmation dialog box on the web page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: notifies the **\<Web>** component of the user's operation.</p> | | onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **confirm()** is invoked by the web page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
| onConsole(callback: (event?: { message: [ConsoleMessage](#consolemessage) }) => boolean) | <p>Triggered when the host application is notified of a JavaScript console message.<br>**message**: console message.</p> | | onConsole(callback: (event?: { message: [ConsoleMessage](#consolemessage) }) => boolean) | <p>Triggered when the host application is notified of a JavaScript console message.<br>**message**: console message.</p> |
| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | <p>Triggered when a download task starts on the web page.<br>**url**: URL for the download task.<br>**userAgent**: name of the user agent (UA) for the download task.<br>**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.<br>**mimetype**: content media type (MIME) returned by the server.<br>**contentLength**: length of the file returned by the server.</p> | | onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | <p>Triggered when a download task starts on the web page.<br>**url**: URL for the download task.<br>**userAgent**: name of the user agent (UA) for the download task.<br>**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.<br>**mimetype**: content media type (MIME) returned by the server.<br>**contentLength**: length of the file returned by the server.</p> |
| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) | <p>Triggered when an error occurs during web page loading.<br>For better results, simplify the implementation logic in the callback.<br>**request**: encapsulation of a web page request.<br>**error**: encapsulation of a web page resource loading error.</p> | | onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) | <p>Triggered when an error occurs during web page loading.<br>For better results, simplify the implementation logic in the callback.<br>**request**: encapsulation of a web page request.<br>**error**: encapsulation of a web page resource loading error.</p> |
| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) | <p>Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.<br>**request**: encapsulation of a web page request.<br>**response**: encapsulation of a web page response.</p> | | onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) | <p>Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.<br>**request**: encapsulation of a web page request.<br>**response**: encapsulation of a web page response.</p> |
| onPageBegin(callback: (event?: { url: string }) => void) | <p>Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.<br>**url**: URL of the page.</p> | | onPageBegin(callback: (event?: { url: string }) => void) | <p>Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.<br>**url**: URL of the page.</p> |
| onPageEnd(callback: (event?: { url: string }) => void) | <p>Triggered when the web page loading is complete. This API is triggered only for the main frame content.<br>**url**: URL of the page.</p> | | onPageEnd(callback: (event?: { url: string }) => void) | <p>Triggered when the web page loading is complete. This API is triggered only for the main frame content.<br>**url**: URL of the page.</p> |
| onProgressChange(callback: (event?: { newProgress: number }) => void) | <p>Triggered when the web page loading progress changes.<br>**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.</p> | | onProgressChange(callback: (event?: { newProgress: number }) => void) | <p>Triggered when the web page loading progress changes.<br>**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.</p> |
| onTitleReceive(callback: (event?: { title: string }) => void) | <p>Triggered when the document title of the web page is changed.<br>**title**: document title.</p> | | onTitleReceive(callback: (event?: { title: string }) => void) | <p>Triggered when the document title of the web page is changed.<br>**title**: document title.</p> |
| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | <p>Triggered when loading of the web page is complete. This callback function is used by an application to update the historical link it accessed.<br>**url**: URL to be accessed.<br>**isRefreshed**: whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.</p> |
| onRenderExited(callback: (event?: { renderExitReason: [RenderExitReason](#renderexitreason) }) => void) | <p>Triggered when the rendering process exits abnormally.<br>**renderExitReason**: cause for the abnormal exit of the rendering process.</p> |
| onShowFileSelector(callback: (event?: { result: [FileSelectorResult](#fileselectorresult), fileSelector: [FileSelectorParam](#fileselectorparam) }) => void) | <p>Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.<br>**result**: file selection result to be sent to the web component.<br>**fileSelector**: information about the file selector.</p> |
| onUrlLoadIntercept(callback: (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean) | <p>Triggered before the **\<Web>** component loads the URL to determine whether to block the access. The callback returns **true** if the access is blocked, and **false** otherwise.<br>**data**: URL information.</p> |
### ConsoleMessage ### ConsoleMessage
- APIs - APIs
| Name | Description | | Name | Description |
| ------------------------------- | ---------------------------------------- | | ------------------------------- | ---------------------- |
| getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. | | getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
| getMessage(): string | Obtains the log information of the **ConsoleMessage**. | | getMessage(): string | Obtains the log information of the **ConsoleMessage**.|
| getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**. | | getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**.|
| getSourceId(): string | Obtains the path and name of the web page source file. | | getSourceId(): string | Obtains the path and name of the web page source file. |
- MessageLevel enums - MessageLevel enums
| Name | Description | | Name | Description |
| ----- | :----------------- | | ----- | :---- |
| Debug | Debug level. | | Debug | Debug level.|
| Error | Error level. | | Error | Error level.|
| Info | Information level. | | Info | Information level.|
| Log | Log level. | | Log | Log level.|
| Warn | Warning level. | | Warn | Warning level. |
### JsResult ### JsResult
Represents the result returned to the **\<Web>** component to indicate the operation performed in the dialog box. Provides the result returned to the **\<Web>** component to indicate the user operation performed in the dialog box.
- APIs - APIs
| Name | Description | | Name | Description |
| --------------------- | ---------------------------------------- | | --------------------- | ----------------------- |
| handleCancel(): void | <p>Notifies the **\<Web>** component that the user touches the Cancel button in the dialog box.</p> | | handleCancel(): void | <p>The user's cancel operation in the dialog box.</p> |
| handleConfirm(): void | <p>Notifies the **\<Web>** component that the user touches the Confirm button in the dialog box.</p> | | handleConfirm(): void | <p>The user's confirm operation in the dialog box.</p> |
### WebResourceError ### WebResourceError
- APIs - APIs
| Name | Description | | Name | Description |
| ---------------------- | ---------------------------------------- | | ---------------------- | ------------ |
| getErrorCode(): number | Obtains the error code for resource loading. | | getErrorCode(): number | Obtains the error code for resource loading. |
| getErrorInfo(): string | Obtains error information about resource loading. | | getErrorInfo(): string | Obtains error information about resource loading.|
### WebResourceRequest ### WebResourceRequest
- APIs - APIs
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ---------------------------------------- | -------------------- |
| getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. | | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
| getRequestUrl(): string | Obtains the URL of the resource request. | | getRequestUrl(): string | Obtains the URL of the resource request. |
| isMainFrame(): boolean | Checks whether the resource request is in the main frame. | | isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
| isRedirect(): boolean | Checks whether the resource request is redirected by the server. | | isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
| isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap). | | isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).|
### Header ### Header
Describes the request/response header object returned by the **\<Web>** component. Describes the request/response header returned by the **\<Web>** component.
- Parameters - Parameters
| Name | Type | Description | | Name | Type | Description |
| ----------- | ------ | ------------------------------------- | | ----------- | ------ | ------------- |
| headerKey | string | Key of the request/response header. | | headerKey | string | Key of the request/response header. |
| headerValue | string | Value of the request/response header. | | headerValue | string | Value of the request/response header.|
### WebResourceResponse ### WebResourceResponse
- APIs - APIs
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ---------------------------------------- | ------------------ |
| getReasonMessage(): string | Obtains the status code description of the resource response. | | getReasonMessage(): string | Obtains the status code description of the resource response. |
| getResponseCode(): number | Obtains the status code of the resource response. | | getResponseCode(): number | Obtains the status code of the resource response. |
| getResponseData(): string | Obtains the data in the resource response. | | getResponseData(): string | Obtains the data in the resource response. |
| getResponseEncoding(): string | Obtains the encoding of the resource response. | | getResponseEncoding(): string | Obtains the encoding of the resource response. |
| getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. | | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
| getResponseMimeType(): string | Obtains the media (MIME) type of the resource response. | | getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.|
### RenderExitReason
Explains why the rendering process exits.
| Name | Description |
| -------------------------- | ----------------- |
| ProcessAbnormalTermination | The rendering process exits abnormally. |
| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.|
| ProcessCrashed | The rendering process crashes due to a segmentation error or other errors. |
| ProcessOom | The program memory is running low. |
| ProcessExitUnknown | Other reason. |
### MixedMode
| Name | Description |
| ---------- | ---------------------------------- |
| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.|
| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
| None | HTTP and HTTPS hybrid content cannot be loaded. |
### CacheMode
| Name | Description |
| ------- | ------------------------------------ |
| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.|
| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. |
| Online | The cache is not used to load the resources. All resources are obtained from the Internet. |
| Only | The cache alone is used to load the resources. |
### FileSelectorResult
Notifies the **\<Web>** component of the file selection result.
- APIs
| Name | Description |
| ---------------------------------------------- | ------------------------------------------------------------ |
| handleFileList(fileList: Array\<string>): void | Instructs the **\<Web>** component to select a file.<br>**fileList**: list of files to operate. |
### FileSelectorParam
- APIs
| Name | Description |
| -------------------------------- | ------------ |
| getTitle(): string | Obtains the title of the file selector. |
| getMode(): FileSelectorMode | Obtains the mode of the file selector. |
| getAcceptType(): Array\<string\> | Obtains the file filtering type. |
| isCapture(): boolean | Checks whether multimedia capabilities are invoked.|
### FileSelectorMode
| Name | Description |
| -------------------- | ---------- |
| FileOpenMode | Open and upload a file. |
| FileOpenMultipleMode | Open and upload multiple files. |
| FileOpenFolderMode | Open and upload a folder.|
| FileSaveMode | Save a file. |
## WebController ## WebController
...@@ -179,15 +237,15 @@ Indicates whether a specific number of steps forward or backward can be performe ...@@ -179,15 +237,15 @@ Indicates whether a specific number of steps forward or backward can be performe
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | --------- | ------------- | ---------------------------------------- | | ---- | ------ | ---- | ---- | --------------------- |
| step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward. | | step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward.|
- Return value - Return value
| Type | Description | | Type | Description |
| ------- | ---------------------------------------- | | ------- | --------- |
| boolean | Whether to go forward or backward from the current page. | | boolean | Whether to go forward or backward from the current page.|
### backward ### backward
...@@ -203,9 +261,9 @@ Deletes a specific application JavaScript object that is registered with the win ...@@ -203,9 +261,9 @@ Deletes a specific application JavaScript object that is registered with the win
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | --------- | ------------- | ---------------------------------------- | | ---- | ------ | ---- | ---- | ---------------------------------------- |
| name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side. | | name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side.|
### forward ### forward
...@@ -221,16 +279,15 @@ Obtains the element type of the area being clicked. ...@@ -221,16 +279,15 @@ Obtains the element type of the area being clicked.
- HitTestType enums - HitTestType enums
| Name | Description | | Name | Description |
| ------------- | ---------------------------------------- | | ------------- | ------------------------ |
| EditText | Editable area. | | EditText | Editable area. |
| Email | Email address. | | Email | Email address. |
| HttpAnchor | Hyperlink where **src** is **http**. | | HttpAnchor | Hyperlink where **src** is **http**. |
| HttpAnchorImg | Image with a hyperlink, where **src** is **http**. | | HttpAnchorImg | Image with a hyperlink, where **src** is **http**.|
| Img | HTML::img tag. | | Img | HTML::img tag. |
| Map | Geographical address. | | Map | Geographical address. |
| PhoneNumber | Phone number. | | Unknown | Unknown content. |
| Unknown | Unknown content. |
### loadData ### loadData
...@@ -244,13 +301,13 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces ...@@ -244,13 +301,13 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces
- options - options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | ------ | --------- | ------------- | ---------------------------------------- | | ---------- | ------ | ---- | ---- | ---------------------------------------- |
| data | string | Yes | - | Character string obtained after being Base64 or URL encoded. | | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
| mimeType | string | Yes | - | Media type (MIME). | | mimeType | string | Yes | - | Media type (MIME). |
| encoding | string | Yes | - | Encoding type, which can be Base64 or URL. | | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
| baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\<Web>** component to **window.origin**. | | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\<Web>** component to **window.origin**.|
| historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty. | | historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty.|
### loadUrl ### loadUrl
...@@ -260,14 +317,14 @@ Loads a URL using the specified HTTP header. ...@@ -260,14 +317,14 @@ Loads a URL using the specified HTTP header.
The object injected through **loadUrl** is valid only in the current document. It will be invalid on a new page navigated to through **loadUrl**. The object injected through **loadUrl** is valid only in the current document. It will be invalid on a new page navigated to through **loadUrl**.
Objects injected through **registerJavaScriptProxy** are still valid on a new page navigated to through **loadUrl**. The object injected through **registerJavaScriptProxy** is still valid on a new page navigated to through **loadUrl**.
- options - options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------- | -------------------------- | --------- | ------------- | ---------------------------------------- | | ------- | ------------------------------ | ---- | ---- | -------------- |
| url | string | Yes | - | URL to load. | | url | string | Yes | - | URL to load. |
| headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL. | | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL.|
### onActive ### onActive
...@@ -295,24 +352,24 @@ Injects a JavaScript object into the window and invokes the methods of the objec ...@@ -295,24 +352,24 @@ Injects a JavaScript object into the window and invokes the methods of the objec
- options - options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | --------------- | --------- | ------------- | ---------------------------------------- | | ---------- | --------------- | ---- | ---- | ---------------------------------------- |
| object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type. | | object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.|
| name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side. | | name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.|
| methodList | Array\<string\> | Yes | - | Methods of the JavaScript object to be registered at the application side. | | methodList | Array\<string\> | Yes | - | Methods of the JavaScript object to be registered at the application side. |
### runJavaScript ### runJavaScript
runJavaScript(options: { script: string, callback?: (result: string) => void }): void runJavaScript(options: { script: string, callback?: (result: string) => void }): void
Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result.**runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be executed in **onPageEnd**. Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be executed in **onPageEnd**.
- options - options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | ------------------------ | --------- | ------------- | ---------------------------------------- | | -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
| script | string | Yes | - | JavaScript script. | | script | string | Yes | - | JavaScript script. |
| callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned. | | callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned.|
### stop ### stop
...@@ -320,9 +377,50 @@ stop(): void ...@@ -320,9 +377,50 @@ stop(): void
Stops page loading. Stops page loading.
### clearHistory
clearHistory(): void
Clears the browsing history.
### getCookieManager
getCookieManager(): WebCookie
Obtains the cookie management object of the **\<Web>** component.
- Return value
| Type | Description |
| --------- | ---------------------------------------- |
| WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).|
## WebCookie
Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
### setCookie
setCookie(url: string, value: string): boolean
Sets the cookie. This API is synchronous.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | ----------------- |
| url | string | Yes | - | URL of the cookie to set.|
| value | string | Yes | - | Value of the cookie to set. |
- Return value
| Type | Description |
| ------- | ------------- |
| boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
### saveCookieSync
saveCookieSync(): boolean
Saves this cookie in the memory to the disk. This API is synchronous.
- Return value
| Type | Description |
| ------- | -------------------- |
| boolean | Returns the operation result.|
## Example ## Example
``` ```ts
// webComponent.ets // webComponent.ets
@Entry @Entry
@Component @Component
...@@ -344,7 +442,7 @@ struct WebComponent { ...@@ -344,7 +442,7 @@ struct WebComponent {
} }
} }
``` ```
``` ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
......
en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ 0bf53713
# XComponent # XComponent
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<XComponent>** can accept and display the EGL/OpenGLES and media data input. The **\<XComponent>** can accept and display the EGL/OpenGLES and media data input.
...@@ -19,20 +19,20 @@ ...@@ -19,20 +19,20 @@
- Name - Name
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | | ----------- | --------------------------------------- | --------- | ------------------------------------------------------------ |
| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. | | id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. |
| type | string | Yes | Type of the component. The options are as follows:<br>-**surface**: The content of this component is displayed individually, without being combined with that of other components.<br>-**component**: The content of this component is displayed after having been combined with that of other components.<br>This API is defined but not implemented in OpenHarmony 3.1 Release. It will be available for use in OpenHarmony 3.1 MR.| | type | string | Yes | Type of the component. The options are as follows:<br>- **surface**: The content of this component is displayed individually, without being combined with that of other components.<br>- **component**: The content of this component is displayed after having been combined with that of other components. |
| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. | | libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. |
| controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. | | controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. |
## Events ## Events
| Name | Description | | Name | Description |
| ------------------------------- | ------------------------ | | ------------------------------- | ------------------------ |
| onLoad(context?: object) => void | Triggered when the plug-in is loaded.| | onLoad(context?: object) => void | Triggered when the plug-in is loaded. |
| onDestroy() => void | Triggered when the plug-in is destroyed.| | onDestroy() => void | Triggered when the plug-in is destroyed. |
## XComponentController ## XComponentController
...@@ -52,9 +52,9 @@ Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used ...@@ -52,9 +52,9 @@ Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used
- Return value - Return value
| Type | Description | | Type | Description |
| ------ | --------------------------- | | ------ | --------------------------- |
| string | ID of the surface held by the **\<XComponent>**.| | string | ID of the surface held by the **\<XComponent>**. |
### setXComponentSurfaceSize ### setXComponentSurfaceSize
...@@ -64,10 +64,10 @@ Sets the width and height of the surface held by the **\<XComponent>**. ...@@ -64,10 +64,10 @@ Sets the width and height of the surface held by the **\<XComponent>**.
- Parameters - Parameters
| Name | Type| Mandatory| Default Value| Description | | Name | Type | Mandatory | Default Value | Description |
| ------------- | -------- | ---- | ------ | ----------------------------- | | ------------- | -------- | ---- | ------ | ----------------------------- |
| surfaceWidth | number | Yes | - | Width of the surface held by the **\<XComponent>**.| | surfaceWidth | number | Yes | - | Width of the surface held by the **\<XComponent>**. |
| surfaceHeight | number | Yes | - | Height of the surface held by the **\<XComponent>**.| | surfaceHeight | number | Yes | - | Height of the surface held by the **\<XComponent>**. |
### getXComponentContext ### getXComponentContext
...@@ -85,7 +85,8 @@ Obtains the context of an **\<XComponent>** object. ...@@ -85,7 +85,8 @@ Obtains the context of an **\<XComponent>** object.
Provide a surface-type **\<XComponent>** to support capabilities such as camera preview. Provide a surface-type **\<XComponent>** to support capabilities such as camera preview.
``` ```ts
// xxx.ets
import camera from '@ohos.multimedia.camera'; import camera from '@ohos.multimedia.camera';
@Entry @Entry
@Component @Component
......
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 0bf53713
# CanvasRenderingContext2D # CanvasRenderingContext2D
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
Use **RenderingContext** to draw rectangles, text, images, and other objects on a canvas. The **\<RenderingContext>** component is used to draw rectangles, text, images, and other objects on a canvas.
## APIs ## APIs
...@@ -15,7 +15,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) ...@@ -15,7 +15,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | --------- | ------------- | ----------------------------- | | ------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See RenderingContextSettings. | | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See [RenderingContextSettings](#renderingcontextsettings). |
### RenderingContextSettings ### RenderingContextSettings
...@@ -34,15 +34,15 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet ...@@ -34,15 +34,15 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- | | ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | | [fillStyle](#fillstyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.<br>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
| [lineWidth](#linewidth) | number | - | Line width. | | [lineWidth](#linewidth) | number | - | Line width. |
| [strokeStyle](#strokestyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | | [strokeStyle](#strokestyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.<br>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:<br/>- **'butt'**: The endpoints of the line are squared off.<br/>- **'round'**: The endpoints of the line are rounded.<br/>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. | | [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:<br/>- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.<br/>- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.<br/>- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. | | [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. | | [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.<br/>Syntax: ctx.font='font-size font-family'<br/>- (Optional) **font-size**: font size and row height. The unit can only be px.<br/>- (Optional) **font-family**: font family.<br/>Syntax: ctx.font='font-style font-weight font-size font-family'<br/>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br/>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**<br/>- (Optional) **font-size**: font size and row height. The unit can only be px.<br/>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. | | [font](#font) | string | 'normal normal 14px sans-serif' | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be px.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**<br>- (Optional) **font-size**: font size and row height. The unit can only be px.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:<br/>- **'left'**: The text is left-aligned.<br/>- **'right'**: The text is right-aligned.<br/>- **'center'**: The text is center-aligned.<br/>- **'start'**: The text is aligned with the start bound.<br/>- **'end'**: The text is aligned with the end bound.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. | | [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>**NOTE**<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. |
| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:<br/>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br/>- **'top'**: The text baseline is on the top of the text bounding box.<br/>- **'hanging'**: The text baseline is a hanging baseline over the text.<br/>- **'middle'**: The text baseline is in the middle of the text bounding box.<br/>- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br/>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. | | [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
| [globalAlpha](#globalalpha) | number | - | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. | | [globalAlpha](#globalalpha) | number | - | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. | | [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. | | [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
...@@ -53,14 +53,14 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet ...@@ -53,14 +53,14 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. | | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
| imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. | | imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
> The value of the **&lt;color&gt;** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format. > The value of the **&lt;color&gt;** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
### fillStyle ### fillStyle
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct FillStyleExample { struct FillStyleExample {
...@@ -89,8 +89,8 @@ struct FillStyleExample { ...@@ -89,8 +89,8 @@ struct FillStyleExample {
### lineWidth ### lineWidth
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct LineWidthExample { struct LineWidthExample {
...@@ -119,8 +119,8 @@ struct LineWidthExample { ...@@ -119,8 +119,8 @@ struct LineWidthExample {
### strokeStyle ### strokeStyle
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct StrokeStyleExample { struct StrokeStyleExample {
...@@ -151,8 +151,8 @@ struct StrokeStyleExample { ...@@ -151,8 +151,8 @@ struct StrokeStyleExample {
### lineCap ### lineCap
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct LineCapExample { struct LineCapExample {
...@@ -185,8 +185,8 @@ struct LineCapExample { ...@@ -185,8 +185,8 @@ struct LineCapExample {
### lineJoin ### lineJoin
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct LineJoinExample { struct LineJoinExample {
...@@ -220,8 +220,8 @@ struct LineJoinExample { ...@@ -220,8 +220,8 @@ struct LineJoinExample {
### miterLimit ### miterLimit
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct MiterLimit { struct MiterLimit {
...@@ -255,8 +255,8 @@ struct MiterLimit { ...@@ -255,8 +255,8 @@ struct MiterLimit {
### font ### font
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct Font { struct Font {
...@@ -285,8 +285,8 @@ struct Font { ...@@ -285,8 +285,8 @@ struct Font {
### textAlign ### textAlign
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -330,8 +330,8 @@ struct CanvasExample { ...@@ -330,8 +330,8 @@ struct CanvasExample {
### textBaseline ### textBaseline
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct TextBaseline { struct TextBaseline {
...@@ -375,8 +375,8 @@ struct TextBaseline { ...@@ -375,8 +375,8 @@ struct TextBaseline {
### globalAlpha ### globalAlpha
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct GlobalAlpha { struct GlobalAlpha {
...@@ -408,8 +408,8 @@ struct GlobalAlpha { ...@@ -408,8 +408,8 @@ struct GlobalAlpha {
### lineDashOffset ### lineDashOffset
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct LineDashOffset { struct LineDashOffset {
...@@ -453,8 +453,8 @@ struct LineDashOffset { ...@@ -453,8 +453,8 @@ struct LineDashOffset {
| copy | Displays the new drawing and neglects the existing drawing. | | copy | Displays the new drawing and neglects the existing drawing. |
| xor | Combines the new drawing and existing drawing using the XOR operation. | | xor | Combines the new drawing and existing drawing using the XOR operation. |
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct GlobalCompositeOperation { struct GlobalCompositeOperation {
...@@ -491,8 +491,8 @@ struct GlobalCompositeOperation { ...@@ -491,8 +491,8 @@ struct GlobalCompositeOperation {
### shadowBlur ### shadowBlur
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
...@@ -523,8 +523,8 @@ struct ShadowBlur { ...@@ -523,8 +523,8 @@ struct ShadowBlur {
### shadowColor ### shadowColor
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct ShadowColor { struct ShadowColor {
...@@ -555,8 +555,8 @@ struct ShadowColor { ...@@ -555,8 +555,8 @@ struct ShadowColor {
### shadowOffsetX ### shadowOffsetX
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct ShadowOffsetX { struct ShadowOffsetX {
...@@ -588,8 +588,8 @@ struct ShadowOffsetX { ...@@ -588,8 +588,8 @@ struct ShadowOffsetX {
### shadowOffsetY ### shadowOffsetY
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct ShadowOffsetY { struct ShadowOffsetY {
...@@ -620,8 +620,8 @@ struct ShadowOffsetY { ...@@ -620,8 +620,8 @@ struct ShadowOffsetY {
### imageSmoothingEnabled ### imageSmoothingEnabled
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct ImageSmoothingEnabled { struct ImageSmoothingEnabled {
...@@ -668,7 +668,8 @@ Fills a rectangle on the canvas. ...@@ -668,7 +668,8 @@ Fills a rectangle on the canvas.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
...@@ -710,7 +711,8 @@ Draws an outlined rectangle on the canvas. ...@@ -710,7 +711,8 @@ Draws an outlined rectangle on the canvas.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
...@@ -751,7 +753,8 @@ Clears the content in a rectangle on the canvas. ...@@ -751,7 +753,8 @@ Clears the content in a rectangle on the canvas.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
...@@ -793,7 +796,8 @@ Draws filled text on the canvas. ...@@ -793,7 +796,8 @@ Draws filled text on the canvas.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
...@@ -834,7 +838,8 @@ Draws a text stroke on the canvas. ...@@ -834,7 +838,8 @@ Draws a text stroke on the canvas.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
...@@ -883,7 +888,8 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -883,7 +888,8 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MeasureText { struct MeasureText {
...@@ -923,7 +929,8 @@ Strokes a path. ...@@ -923,7 +929,8 @@ Strokes a path.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Stroke { struct Stroke {
...@@ -960,7 +967,8 @@ Creates a drawing path. ...@@ -960,7 +967,8 @@ Creates a drawing path.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BeginPath { struct BeginPath {
...@@ -1005,7 +1013,8 @@ Moves a drawing path to a target position on the canvas. ...@@ -1005,7 +1013,8 @@ Moves a drawing path to a target position on the canvas.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
...@@ -1048,7 +1057,8 @@ Connects the current point to a target position using a straight line. ...@@ -1048,7 +1057,8 @@ Connects the current point to a target position using a straight line.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
...@@ -1085,7 +1095,8 @@ Draws a closed path. ...@@ -1085,7 +1095,8 @@ Draws a closed path.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
...@@ -1130,7 +1141,8 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1130,7 +1141,8 @@ Creates a pattern for image filling based on a specified source image and repeti
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
...@@ -1177,7 +1189,8 @@ Draws a cubic bezier curve on the canvas. ...@@ -1177,7 +1189,8 @@ Draws a cubic bezier curve on the canvas.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
...@@ -1222,7 +1235,8 @@ Draws a quadratic curve on the canvas. ...@@ -1222,7 +1235,8 @@ Draws a quadratic curve on the canvas.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
...@@ -1313,7 +1327,8 @@ Draws an arc based on the radius and points on the arc. ...@@ -1313,7 +1327,8 @@ Draws an arc based on the radius and points on the arc.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
...@@ -1362,7 +1377,8 @@ Draws an ellipse in the specified rectangular region. ...@@ -1362,7 +1377,8 @@ Draws an ellipse in the specified rectangular region.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1406,7 +1422,8 @@ Creates a rectangle. ...@@ -1406,7 +1422,8 @@ Creates a rectangle.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1441,7 +1458,8 @@ Fills the area inside a closed path. ...@@ -1441,7 +1458,8 @@ Fills the area inside a closed path.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Fill { struct Fill {
...@@ -1476,7 +1494,8 @@ Sets the current path to a clipping path. ...@@ -1476,7 +1494,8 @@ Sets the current path to a clipping path.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
...@@ -1519,7 +1538,8 @@ Rotates a canvas clockwise around its coordinate axes. ...@@ -1519,7 +1538,8 @@ Rotates a canvas clockwise around its coordinate axes.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Rotate { struct Rotate {
...@@ -1560,7 +1580,8 @@ Scales a canvas based on scale factors. ...@@ -1560,7 +1580,8 @@ Scales a canvas based on scale factors.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Scale { struct Scale {
...@@ -1594,7 +1615,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat ...@@ -1594,7 +1615,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects. Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
> >
> - x' = scaleX \* x + skewY \* y + translateX > - x' = scaleX \* x + skewY \* y + translateX
...@@ -1613,7 +1634,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1613,7 +1634,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Transform { struct Transform {
...@@ -1664,7 +1686,8 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -1664,7 +1686,8 @@ Resets the existing transformation matrix and creates a new transformation matri
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SetTransform { struct SetTransform {
...@@ -1708,7 +1731,8 @@ Moves the origin of the coordinate system. ...@@ -1708,7 +1731,8 @@ Moves the origin of the coordinate system.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
...@@ -1738,18 +1762,18 @@ Moves the origin of the coordinate system. ...@@ -1738,18 +1762,18 @@ Moves the origin of the coordinate system.
### drawImage ### drawImage
drawImage(image: ImageBitmap, dx: number, dy: number): void drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void
drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void
drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
Draws an image. Draws an image.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- | | ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Image resource. For details, see ImageBitmap | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | null | Image resource. For details, see ImageBitmap or PixelMap. |
| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. | | sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sWidth | number | No | 0 | Target width to crop the source image. | | sWidth | number | No | 0 | Target width to crop the source image. |
...@@ -1762,7 +1786,8 @@ Draws an image. ...@@ -1762,7 +1786,8 @@ Draws an image.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
...@@ -1812,12 +1837,24 @@ Creates an **ImageData** object. For details, see [ImageData](ts-components-canv ...@@ -1812,12 +1837,24 @@ Creates an **ImageData** object. For details, see [ImageData](ts-components-canv
| --------- | ------ | --------- | ------------- | ---------------------------------------- | | --------- | ------ | --------- | ------------- | ---------------------------------------- |
| imagedata | Object | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object. | | imagedata | Object | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object. |
### getPixelMap
getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.|
| sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.|
| sw | number | Yes | 0 | Width of the output area. |
| sh | number | Yes | 0 | Height of the output area. |
### getImageData ### getImageData
getImageData(sx: number, sy: number, sw: number, sh: number): Object getImageData(sx: number, sy: number, sw: number, sh: number): Object
Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas. Creates an **[ImageData](ts-components-canvas-imagebitmap.md)** object with pixels in the specified area on the canvas.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | --------- | ------------- | ---------------------------------------- | | ---- | ------ | --------- | ------------- | ---------------------------------------- |
...@@ -1831,7 +1868,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1831,7 +1868,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void
Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular area on the canvas. Puts the **[ImageData](ts-components-canvas-imagebitmap.md)** onto a rectangular area on the canvas.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
...@@ -1846,7 +1883,8 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are ...@@ -1846,7 +1883,8 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PutImageData { struct PutImageData {
...@@ -1887,7 +1925,8 @@ Restores the saved drawing context. ...@@ -1887,7 +1925,8 @@ Restores the saved drawing context.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1919,7 +1958,8 @@ Saves the current drawing context. ...@@ -1919,7 +1958,8 @@ Saves the current drawing context.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1959,7 +1999,8 @@ Creates a linear gradient. ...@@ -1959,7 +1999,8 @@ Creates a linear gradient.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
...@@ -2008,7 +2049,8 @@ Creates a linear gradient. ...@@ -2008,7 +2049,8 @@ Creates a linear gradient.
- Example - Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 0bf53713
# Image Effect Configuration # Image Effect Configuration
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -25,7 +25,7 @@ None ...@@ -25,7 +25,7 @@ None
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. | | invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
| colorBlend <sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. | | colorBlend <sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. | | sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
| hueRotate | Angle | 0deg | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated one ore more circles. | | hueRotate | number \| string | '0deg' |Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
## Example ## Example
......
en/device-dev/quick-start/Readme-EN.md
浏览文件 @ 0bf53713
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
- Running a Hello World Program - Running a Hello World Program
- Hi3861 Development Board - Hi3861 Development Board
- [Setting Up the Hi3861 Development Board Environment](quickstart-lite-steps-hi3861-setting.md) - [Setting Up the Hi3861 Development Board Environment](quickstart-lite-steps-hi3861-setting.md)
- [Writing a Hello World Program](quickstart-lite-steps-hi3861-application-framework.md) - [Writing a Hello World Program](quickstart-lite-steps-hi3861-helloworld.md)
- [Building](quickstart-lite-steps-hi3861-building.md) - [Building](quickstart-lite-steps-hi3861-building.md)
- [Burning](quickstart-lite-steps-hi3861-burn.md) - [Burning](quickstart-lite-steps-hi3861-burn.md)
- [Networking](quickstart-lite-steps-hi3861-netconfig.md) - [Networking](quickstart-lite-steps-hi3861-netconfig.md)
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
- [Running](quickstart-lite-steps-hi3861-running.md) - [Running](quickstart-lite-steps-hi3861-running.md)
- Hi3516 Development Board - Hi3516 Development Board
- [Setting Up the Hi3516 Development Board Environment](quickstart-lite-steps-hi3516-setting.md) - [Setting Up the Hi3516 Development Board Environment](quickstart-lite-steps-hi3516-setting.md)
- [Writing a Hello World Program](quickstart-lite-steps-hi3516-application-framework.md) - [Writing a Hello World Program](quickstart-lite-steps-hi3516-helloworld.md)
- [Building](quickstart-lite-steps-hi3516-building.md) - [Building](quickstart-lite-steps-hi3516-building.md)
- [Burning](quickstart-lite-steps-hi3516-burn.md) - [Burning](quickstart-lite-steps-hi3516-burn.md)
- [Running](quickstart-lite-steps-hi3516-running.md) - [Running](quickstart-lite-steps-hi3516-running.md)
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
- [Setting Up Environments for Standard System](quickstart-standard-env-setup.md) - [Setting Up Environments for Standard System](quickstart-standard-env-setup.md)
- Running a Hello World Program - Running a Hello World Program
- Hi3516 Development Board - Hi3516 Development Board
- [Writing a Hello World Program](quickstart-standard-running-hi3516-create.md) - [Writing a Hello World Program](quickstart-std-3516-create.md)
- [Building](quickstart-standard-running-hi3516-build.md) - [Building](quickstart-standard-running-hi3516-build.md)
- [Burning](quickstart-standard-running-hi3516-burning.md) - [Burning](quickstart-standard-running-hi3516-burning.md)
- [Running](quickstart-standard-running-hi3516-running.md) - [Running](quickstart-standard-running-hi3516-running.md)
......
en/device-dev/quick-start/quickstart-docker-lite.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Getting Started with Mini and Small Systems (Installation Package Mode)
- **[Mini and Small System Overview](quickstart-lite-overview.md)**
- **[Setting Up Environments for the Mini and Small Systems](quickstart-lite-env-setup.md)**
- **[Running a Hello World Program](quickstart-lite-steps.md)**
- **[FAQs](quickstart-lite-env-setup-faqs.md)**
- **[Appendix](quickstart-lite-appendix.md)**
en/device-dev/quick-start/quickstart-ide-lite-appendix.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Appendix
- **[Introduction to Development Boards](quickstart-ide-lite-board-introduction.md)**
en/device-dev/quick-start/quickstart-ide-lite-board-introduction.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Introduction to Development Boards
- **[Introduction to the Hi3861 Development Board](quickstart-ide-lite-introduction-hi3861.md)**
- **[Introduction to the Hi3516 Development Board](quickstart-ide-lite-introduction-hi3516.md)**
en/device-dev/quick-start/quickstart-ide-lite-create-project.md
浏览文件 @ 0bf53713
# Creating a Source Code Project # Importing a Source Code Project
After [setting up the Windows+Ubuntu hybrid development environment](../quick-start/quickstart-ide-lite-env-setup-win-ubuntu.md) and [obtaining source code](../quick-start/quickstart-ide-lite-sourcecode-acquire.md), perform the following steps to create a source code project in Windows: After [setting up the Windows+Ubuntu hybrid development environment](../quick-start/quickstart-ide-lite-env-setup-win-ubuntu.md) and [obtaining source code](../quick-start/quickstart-ide-lite-sourcecode-acquire.md), perform the following steps to create a source code project in Windows:
...@@ -15,7 +15,7 @@ After [setting up the Windows+Ubuntu hybrid development environment](../quick-st ...@@ -15,7 +15,7 @@ After [setting up the Windows+Ubuntu hybrid development environment](../quick-st
![en-us_image_0000001271477045](figures/en-us_image_0000001271477045.png) ![en-us_image_0000001271477045](figures/en-us_image_0000001271477045.png)
3. If you select to open the OpenHarmony source code, a message will be displayed indicating that the project is not a DevEco Device Tool project. Click **Import** to continue. 3. If this is the first time you import a project, a message will be displayed indicating that the project is not a DevEco Device Tool project. Click **Import** to continue.
![en-us_image_0000001135394334](figures/en-us_image_0000001135394334.png) ![en-us_image_0000001135394334](figures/en-us_image_0000001135394334.png)
......
en/device-dev/quick-start/quickstart-ide-lite-env-setup-win-ubuntu.md
浏览文件 @ 0bf53713
...@@ -11,15 +11,18 @@ In the Windows+Ubuntu hybrid development environment, you can enjoy the benefits ...@@ -11,15 +11,18 @@ In the Windows+Ubuntu hybrid development environment, you can enjoy the benefits
- Windows: Windows 10 (64-bit) - Windows: Windows 10 (64-bit)
- Ubuntu: Ubuntu 20.04 or later; recommended memory: 16 GB or higher. - Ubuntu: Ubuntu 20.04 or later; recommended memory: 16 GB or higher
- User name: cannot contain Chinese characters - User name (Ubuntu): cannot contain Chinese characters
- DevEco Device Tool: 3.0 Release - DevEco Device Tool: 3.0 Release
## Setting Up the Ubuntu Development Environment ## Setting Up the Ubuntu Development Environment
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> If the Ubuntu system has not been set up yet, set it up on a virtual machine running Windows. Then, configure the Ubuntu basic environment.
1. Make sure the Ubuntu shell environment is **bash**. 1. Make sure the Ubuntu shell environment is **bash**.
1. Run the following command and check whether the command output is **bash**. If the command output is not **bash**, go to step 2. 1. Run the following command and check whether the command output is **bash**. If the command output is not **bash**, go to step 2.
...@@ -55,14 +58,15 @@ In the Windows+Ubuntu hybrid development environment, you can enjoy the benefits ...@@ -55,14 +58,15 @@ In the Windows+Ubuntu hybrid development environment, you can enjoy the benefits
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.401.sh** indicates the installation file name. 4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.401.sh** indicates the installation file name.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
``` ```
sudo ./devicetool-linux-tool-3.0.0.401.sh sudo ./devicetool-linux-tool-3.0.0.401.sh
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
>
> During the installation, the page for agreeing to the user agreement and privacy statement is displayed. Read and agree to the user agreement and privacy statement.
>
> If this page is not displayed and the installation exits, run the apt-get install whiptail command, then the installation command.
Wait until the "Deveco Device Tool successfully installed." message is displayed. Wait until the "Deveco Device Tool successfully installed." message is displayed.
![en-us_image_0000001198722374](figures/en-us_image_0000001198722374.png) ![en-us_image_0000001198722374](figures/en-us_image_0000001198722374.png)
...@@ -76,7 +80,7 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits ...@@ -76,7 +80,7 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits
2. Decompress the DevEco Device Tool package, double-click the installer, and then click **Next**. 2. Decompress the DevEco Device Tool package, double-click the installer, and then click **Next**.
3. Set the installation path of DevEco Device Tool and click **Next**. You are advised to install DevEco Device Tool in a non-system drive. 3. Set the installation path of DevEco Device Tool to a path that does not contain any Chinese characters, and then click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version. > If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version.
...@@ -101,11 +105,14 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits ...@@ -101,11 +105,14 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits
![en-us_image_0000001193983334](figures/en-us_image_0000001193983334.png) ![en-us_image_0000001193983334](figures/en-us_image_0000001193983334.png)
5. In the dialog box shown below, click **Next** to download and install the tools.. 5. In the dialog box shown below, click **Next**.
![en-us_image_0000001239634067](figures/en-us_image_0000001239634067.png) ![en-us_image_0000001239634067](figures/en-us_image_0000001239634067.png)
6. Wait for the DevEco Device Tool setup wizard to automatically install DevEco Device Tool. After the installation is complete, click **Finish** to close the setup wizard. 6. Read the user agreement and privacy statement carefully, select I accept the licenses, and click **Next**.
![en-us_image_0000001307019009](figures/en-us_image_0000001307019009.png)
7. Wait for the DevEco Device Tool setup wizard to automatically install DevEco Device Tool. After the installation is complete, click **Finish** to close the setup wizard.
![en-us_image_0000001239650137](figures/en-us_image_0000001239650137.png) ![en-us_image_0000001239650137](figures/en-us_image_0000001239650137.png)
...@@ -174,29 +181,9 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits ...@@ -174,29 +181,9 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits
![en-us_image_0000001215720398](figures/en-us_image_0000001215720398.png) ![en-us_image_0000001215720398](figures/en-us_image_0000001215720398.png)
5. In the displayed dialog box, select **Linux**, select **Continue**, and enter the password for logging in to the remote computer. 5. In the displayed dialog box, select **Linux**, select **Continue**, and enter the password for logging in to the remote computer.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> To eliminate the need for frequently entering the password for logging in to the remote computer, set an SSH public key.
![en-us_image_0000001215897530](figures/en-us_image_0000001215897530.png) ![en-us_image_0000001215897530](figures/en-us_image_0000001215897530.png)
After the connection is successful, the plug-in is automatically installed in the .vscode-server folder on the remote computer. After the installation is complete, reload Visual Studio Code in Windows as prompted. Then you can develop, compile, and burn source code in DevEco Device Tool on Windows. After the connection is successful, the plug-in is automatically installed in the .vscode-server folder on the remote computer. After the installation is complete, reload Visual Studio Code in Windows as prompted. Then you can develop, compile, and burn source code in DevEco Device Tool on Windows.
### Registering the Public Key for Accessing the Ubuntu Environment
After the preceding operations are complete, you can remotely connect to the Ubuntu environment through Windows for development. However, you need to frequently enter the remote connection password. To eliminate this need, you can use the SSH public key.
1. Open the Git bash CLI and run the following command to generate an SSH public key. During command execution, perform operations as prompted. Set **username** and **ip** to the user name and IP address you use for connecting to the Ubuntu system.
```
ssh-keygen -t rsa
ssh-copy-id -i ~/.ssh/id_rsa.pub username@ip
```
![en-us_image_0000001271532317](figures/en-us_image_0000001271532317.png)
2. In Visual Studio Code, click the remote connection setting button and open the **config** file.
![en-us_image_0000001226034634](figures/en-us_image_0000001226034634.png)
3. In the **config** file, add the SSK key file information, as shown below. Then save the file.
![en-us_image_0000001270356233](figures/en-us_image_0000001270356233.png)
en/device-dev/quick-start/quickstart-ide-lite-env-setup.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Environment Preparation
- **[Setting Up the Windows+Ubuntu Hybrid Development Environment](quickstart-ide-lite-env-setup-win-ubuntu.md)**
- **[Obtaining Source Code](quickstart-ide-lite-sourcecode-acquire.md)**
en/device-dev/quick-start/quickstart-ide-lite-introduction-hi3861.md
浏览文件 @ 0bf53713
...@@ -7,7 +7,7 @@ Hi3861 is a 2 x 5 cm development board. It is a 2.4 GHz WLAN SoC chip that highl ...@@ -7,7 +7,7 @@ Hi3861 is a 2 x 5 cm development board. It is a 2.4 GHz WLAN SoC chip that highl
**Figure 1** Hi3861 development board **Figure 1** Hi3861 development board
![en-us_image_0000001226634692](figures/en-us_image_0000001226634692.png) ![en-us_image_0000001226634692](figures/en-us_image_0000001226634692.png)
The Hi3861 development board can also be connected to the Hi3861 mother board to expand its peripheral capabilities. The following figure shows the Hi3861 mother board. The Hi3861 development board can also be connected to the Hi3861 mother board to expand its peripheral capabilities. The following figure shows the Hi3861 mother board.
......
en/device-dev/quick-start/quickstart-ide-lite-overview.md
浏览文件 @ 0bf53713
...@@ -10,7 +10,7 @@ To accommodate different developer habits, OpenHarmony provides two modes for ge ...@@ -10,7 +10,7 @@ To accommodate different developer habits, OpenHarmony provides two modes for ge
- IDE mode: DevEco Device Tool is used for one-stop development, covering dependency installation, building, burning, and running. - IDE mode: DevEco Device Tool is used for one-stop development, covering dependency installation, building, burning, and running.
- Installation package mode: Dependency download and installation as well as building operations are performed using commands. Burning and running are performed in DevEco Device Tool. - Installation package mode: Dependency download and installation as well as building operations are performed using commands. Burning and running are performed in DevEco Device Tool.
OpenHarmony also provides the [Docker environment](../get-code/gettools-acquire.md), which can significantly simplify the environment configuration before compilation. You can build your source code in the Docker environment if you are more accustomed to using the installation package mode. OpenHarmony also provides the [Docker environment](https://gitee.com/openharmony/docs/blob/master/en/device-dev/get-code/gettools-acquire.md), which can significantly simplify the environment configuration before compilation. You can build your source code in the Docker environment if you are more accustomed to using the installation package mode.
This document exemplifies how to use the IDE mode. For details about the installation package mode, see [Getting Started with Mini and Small Systems (Installation Package Mode)](../quick-start/quickstart-lite-overview.md). This document exemplifies how to use the IDE mode. For details about the installation package mode, see [Getting Started with Mini and Small Systems (Installation Package Mode)](../quick-start/quickstart-lite-overview.md).
......
en/device-dev/quick-start/quickstart-ide-lite-sourcecode-acquire.md
浏览文件 @ 0bf53713
...@@ -10,7 +10,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony ...@@ -10,7 +10,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
2. Register an SSH public key for access to Gitee. 2. Register an SSH public key for access to Gitee.
3. Install the git client and git-lfs. 3. Install the git client and git-lfs if they are unavailable.
Update the software source: Update the software source:
...@@ -18,14 +18,14 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony ...@@ -18,14 +18,14 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
sudo apt-get update sudo apt-get update
``` ```
Run the following command to install the tools: Run the following command to install the tools:
``` ```
sudo apt-get install git git-lfs sudo apt-get install git git-lfs
``` ```
4. Configure user information. 4. Configure user information.
``` ```
git config --global user.name "yourname" git config --global user.name "yourname"
git config --global user.email "your-email-address" git config --global user.email "your-email-address"
...@@ -33,7 +33,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony ...@@ -33,7 +33,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
``` ```
5. Run the following commands to install the **repo** tool: 5. Run the following commands to install the **repo** tool:
``` ```
curl https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 -o /usr/local/bin/repo # If you do not have the access permission to this directory, download the tool to any other accessible directory and configure the directory to the environment variable. curl https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 -o /usr/local/bin/repo # If you do not have the access permission to this directory, download the tool to any other accessible directory and configure the directory to the environment variable.
chmod a+x /usr/local/bin/repo chmod a+x /usr/local/bin/repo
...@@ -58,7 +58,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony ...@@ -58,7 +58,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
Method 2: Use the **repo** tool to download the source code over HTTPS. Method 2: Use the **repo** tool to download the source code over HTTPS.
``` ```
repo init -u https://gitee.com/openharmony/manifest.git -b master --no-repo-verify repo init -u https://gitee.com/openharmony/manifest.git -b master --no-repo-verify
repo sync -c repo sync -c
...@@ -70,10 +70,10 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony ...@@ -70,10 +70,10 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
For details about how to obtain the source code of an OpenHarmony release, see the [Release-Notes](../../release-notes/Readme.md). For details about how to obtain the source code of an OpenHarmony release, see the [Release-Notes](../../release-notes/Readme.md).
## Running prebuilts ### Running prebuilts
Go to the root directory of the source code and run the following script to install the compiler and binary tool:
Go to the root directory of the source code and run the following script to install the compiler and binary tool:
``` ```
bash build/prebuilts_download.sh bash build/prebuilts_download.sh
``` ```
en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-burn.md
浏览文件 @ 0bf53713
# Burning # Burning
Burning is the process of downloading compiled program files to a development board to provide a basis for subsequent debugging. With the one-click burning function of DevEco Device Tool, you can burn images on development boards quickly and efficiently.
Hi3516D V300 supports burning through the USB port, network port, and serial port. This document describes how to burn source code through the USB port. The operations are performed in Windows. Hi3516D V300 supports burning through the USB port, network port, and serial port. This document describes how to burn source code through the USB port. The operations are performed in Windows.
1. Connect the computer and the target development board through the serial port and USB port. For details, see [Introduction to the Hi3516D V300 Development Board](https://gitee.com/openharmony/docs/blob/master/en/device-dev/quick-start/quickstart-lite-introduction-hi3516.md). 1. Connect the computer and the target development board through the serial port and USB port. For details, see [Introduction to the Hi3516D V300 Development Board](https://gitee.com/openharmony/docs/blob/master/en/device-dev/quick-start/quickstart-lite-introduction-hi3516.md).
> ![icon-note.gif](../public_sys-resources/icon-note.gif) **NOTE**
> If you are using the remote access mode (Windows + Ubuntu on the local VM), disable the USB control of the VM as follows to ensure that the development board is connected to the USB port of the host:
>
> - VMware: Configure the device to connect to the host under **Preferences** > **USB** and remove the USB controller from the VM settings.
>
> - VirtualBox: Deselect **Enable USB Controller** in the USB device options under Ubuntu settings.
2. In DevEco Device Tool, choose **REMOTE DEVELOPMENT** > **Local PC** to check the connection status between the remote computer (Ubuntu development environment) and the local computer (Windows development environment). 2. If your computer does not have the USB port driver or USB-to-serial driver, install it by following the instructions in [Installing the USB Port Driver on the Hi3516D V300 or Hi3518E V300 Development Board](Installing the USB Port Driver on the Hi3516D V300 or Hi3518E V300 Development Board) or [Installing the Serial Port Driver on the Hi3516D V300 or Hi3518E V300 Development Board](https://device.harmonyos.com/en/docs/documentation/guide/hi3516_hi3518-drivers-0000001050743695), depending on the missing driver.
3. In DevEco Device Tool, choose **REMOTE DEVELOPMENT** > **Local PC** to check the connection status between the remote computer (Ubuntu build environment) and the local computer (Windows build environment).
- If ![en-us_image_0000001261315939](figures/en-us_image_0000001261315939.png) is displayed on the right of **Local PC**, the remote computer is connected to the local computer. In this case, no further action is required. - If ![en-us_image_0000001261315939](figures/en-us_image_0000001261315939.png) is displayed on the right of **Local PC**, the remote computer is connected to the local computer. In this case, no further action is required.
- If ![en-us_image_0000001261515989](figures/en-us_image_0000001261515989.png) is displayed, click the connect icon. - If ![en-us_image_0000001261515989](figures/en-us_image_0000001261515989.png) is displayed, click the connect icon.
![en-us_image_0000001261395999](figures/en-us_image_0000001261395999.png) ![en-us_image_0000001261395999](figures/en-us_image_0000001261395999.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/> > ![icon-note.gif](../public_sys-resources/icon-note.gif) **NOTE**
> This operation is required only in remote access mode (in the Windows+Ubuntu hybrid development environment). If the local access mode (Windows or Ubuntu development environment) is used, skip this step. > This operation is required only in remote access mode (in the Windows+Ubuntu hybrid build environment). If the local access mode (Windows or Ubuntu build environment) is used, skip this step.
3. Check the serial port number in **QUICK ACCESS** > **DevEco Home** > **Device** in DevEco Device Tool. 4. Check the serial port number in **QUICK ACCESS** > **DevEco Home** > **Device** in DevEco Device Tool.
![en-us_image_0000001216516128](figures/en-us_image_0000001216516128.png) ![en-us_image_0000001216516128](figures/en-us_image_0000001216516128.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** 5. Choose **QUICK ACCESS** > **DevEco Home** > **Projects**, and then click **Settings**.
> If the serial port number is not displayed correctly, follow the steps described in [Installing the Serial Port Driver on the Hi3516 or Hi3518 Series Development Boards](https://device.harmonyos.com/en/docs/documentation/guide/hi3516_hi3518-drivers-0000001050743695).
4. Choose **QUICK ACCESS** > **DevEco Home** > **Projects**, and then click **Settings**.
![en-us_image_0000001198566364](figures/en-us_image_0000001198566364.png) ![en-us_image_0000001198566364](figures/en-us_image_0000001198566364.png)
5. On the **hi3516dv300** tab page, set the burning options. 6. On the **hi3516dv300** tab page, set the burning options.
- **upload_partitions**: Select the file to be burnt. By default, the **fastboot**, **kernel**, **rootfs**, and **userfs** files are burnt at the same time. - **upload_partitions**: Select the file to be burnt. By default, the **fastboot**, **kernel**, **rootfs**, and **userfs** files are burnt at the same time.
- **upload_port**: Select the serial port number obtained. - **upload_port**: Select the serial port number obtained.
- **upload_protocol**: Select the burning protocol **hiburn-usb**. - **upload_protocol**: Select the burning protocol **hiburn-usb**.
![en-us_image_0000001223190441](figures/en-us_image_0000001223190441.png) ![en-us_image_0000001223190441](figures/en-us_image_0000001223190441.png)
6. Check the preset information of the files to be burnt and modify them when necessary. The files to be burnt include **fastboot**, **kernel**, **rootfs**, and **userfs**. 7. In **Partitions**, check the preset burning settings of the files to be burnt.
1. On the **hi3516dv300_fastboot** tab, select the items to be modified in **New Option**, such as **partition_bin**, **partition_addr**, and **partition_length**.
![en-us_image_0000001198889702](figures/en-us_image_0000001198889702.png)
2. In **Partition Options**, modify the items selected in the preceding step.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> Set the start address and length of the partition based on the size of the files to be burnt. Make sure the size of the partition is greater than that of the files to be burnt and the partition addresses of the files to be burnt do not overlap.
![en-us_image_0000001243290907](figures/en-us_image_0000001243290907.png) ![en-us_image_0000001312778829](figures/en-us_image_0000001312778829.png)
3. Follow the same procedure to modify the information about the **kernel**, **rootfs**, and **userfs** files. To modify the burning settings for a specific file, click ![en-us_image_0000001312898911](figures/en-us_image_0000001312898911.png) next to the file.
> ![icon-note.gif](../public_sys-resources/icon-note.gif) **NOTE**
> Set the start address and length of the partition based on the size of the files to be burnt. Make sure the size of the partition is greater than that of the files to be burnt and the partition addresses of the files to be burnt do not overlap.
7. When you finish modifying, click **Save** on the top. ![en-us_image_0000001312780249](figures/en-us_image_0000001312780249.png)
8. Go to **hi3516dv300** > **Upload** to start burning. 8. When you finish modifying, click **Save** on the top.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** 9. Go to **hi3516dv300** > **Upload** to transfer the files to be burnt from Ubuntu to Windows. When the "Operation paused, Please press Enter key to continue" message is displayed, which indicates that the transfer is complete, press **Enter** to start burning.
> If this is the first time you burn source code to the Hi3516D V300 or Hi3518E V300 board, the message "not find the Devices" may be displayed. In this case, follow the steps in [Installing the USB Port Driver on the Hi3516D V300 or Hi3518E V300 Development Board](https://device.harmonyos.com/en/docs/documentation/guide/usb_driver-0000001058690393) and start burning again.
![en-us_image_0000001267231481](figures/en-us_image_0000001267231481.png) ![en-us_image_0000001266887264](figures/en-us_image_0000001266887264.png)
9. When the following information is displayed in the Terminal window, press and hold the reset button, remove and insert the USB cable, and release the reset button to start burning. 10. When the following information is displayed in the **TERMINAL** window, press and hold the reset button within 15 seconds, remove and insert the USB cable, and release the reset button to start burning.
![en-us_image_0000001114129426](figures/en-us_image_0000001114129426.png) ![en-us_image_0000001114129426](figures/en-us_image_0000001114129426.png)
If the following message is displayed, it indicates that the burning is successful. If the following message is displayed, it indicates that the burning is successful.
![en-us_image_0000001160649343](figures/en-us_image_0000001160649343.png) ![en-us_image_0000001160649343](figures/en-us_image_0000001160649343.png)
10. When the burning is successful, perform the operations in Running an Image to start the system. 11. When the burning is successful, perform the operations in Running to start the system.
en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516-running.md
浏览文件 @ 0bf53713
...@@ -30,13 +30,13 @@ After burning is completed, you need to configure the bootloader to run the Open ...@@ -30,13 +30,13 @@ After burning is completed, you need to configure the bootloader to run the Open
After the system is started, perform the following steps to run the Hello World program: After the system is started, perform the following steps to run the Hello World program:
1. Go to the **bin** directory on the startup page. 1. Go to the **bin** directory on the startup page.
``` ```
cd bin cd bin
``` ```
2. Run the following command to run the **helloworld** program: 2. Run the following command to run the **helloworld** program:
``` ```
./helloworld ./helloworld
``` ```
...@@ -48,4 +48,4 @@ After the system is started, perform the following steps to run the Hello World ...@@ -48,4 +48,4 @@ After the system is started, perform the following steps to run the Hello World
## Next ## Next
Congratulations! You have finished all steps! Proceed to [develop a sample camera with a screen](https://gitee.com/openharmony/docs/blob/master/en/device-dev/guide/device-camera.md) to better familiarize yourself with OpenHarmony development. Congratulations! You have finished all steps! Proceed to [develop a sample camera with a screen](../guide/device-camera-control-overview.md) to better familiarize yourself with OpenHarmony development.
en/device-dev/quick-start/quickstart-ide-lite-steps-hi3516.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Hi3516 Development Board
- **[Writing a Hello World Program](quickstart-ide-lite-steps-hi3516-application-framework.md)**
- **[Building](quickstart-ide-lite-steps-hi3516-building.md)**
- **[Burning](quickstart-ide-lite-steps-hi3516-burn.md)**
- **[Running](quickstart-ide-lite-steps-hi3516-running.md)**
en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861-burn.md
浏览文件 @ 0bf53713
# Burning # Burning
Burning is the process of downloading compiled program files to a development board to provide a basis for subsequent debugging. With the one-click burning function of DevEco Device Tool, you can burn images on development boards quickly and efficiently.
Hi3861 V100 supports burning through the serial port. To burn source code through the serial port in Windows, perform the following steps: Hi3861 V100 supports burning through the serial port. To burn source code through the serial port in Windows, perform the following steps:
1. Connect the computer and the target development board through the serial port and USB port. For details, see [Introduction to the Hi3861 V100 Development Board](https://gitee.com/openharmony/docs/blob/master/en/device-dev/quick-start/quickstart-lite-introduction-hi3861.md). 1. Connect the computer and the target development board through the serial port and USB port. For details, see [Introduction to the Hi3861 V100 Development Board](https://gitee.com/openharmony/docs/blob/master/en/device-dev/quick-start/quickstart-lite-introduction-hi3861.md).
2. In DevEco Device Tool, choose **REMOTE DEVELOPMENT** > **Local PC** to check the connection status between the remote computer (Ubuntu development environment) and the local computer (Windows development environment). 2. If your computer does not have the USB-to-serial driver, install it by following the instructions in [Installing the Serial Port Driver on Hi3861 V100](https://device.harmonyos.com/en/docs/documentation/guide/hi3861-drivers-0000001058153433).
3. In DevEco Device Tool, choose **REMOTE DEVELOPMENT** > **Local PC** to check the connection status between the remote computer (Ubuntu development environment) and the local computer (Windows development environment).
- If ![en-us_image_0000001261315939](figures/en-us_image_0000001261315939.png) is displayed on the right of **Local PC**, the remote computer is connected to the local computer. In this case, no further action is required. - If ![en-us_image_0000001261315939](figures/en-us_image_0000001261315939.png) is displayed on the right of **Local PC**, the remote computer is connected to the local computer. In this case, no further action is required.
- If ![en-us_image_0000001261515989](figures/en-us_image_0000001261515989.png) is displayed, click the connect icon. - If ![en-us_image_0000001261515989](figures/en-us_image_0000001261515989.png) is displayed, click the connect icon.
...@@ -16,18 +19,17 @@ Hi3861 V100 supports burning through the serial port. To burn source code throug ...@@ -16,18 +19,17 @@ Hi3861 V100 supports burning through the serial port. To burn source code throug
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This operation is required only in remote access mode (in the Windows+Ubuntu hybrid development environment). If the local access mode (Windows or Ubuntu development environment) is used, skip this step. > This operation is required only in remote access mode (in the Windows+Ubuntu hybrid development environment). If the local access mode (Windows or Ubuntu development environment) is used, skip this step.
3. Check the serial port number in **QUICK ACCESS** > **DevEco Home** > **Device** in DevEco Device Tool. 4. Check the serial port number in **QUICK ACCESS** > **DevEco Home** > **Device** in DevEco Device Tool.
![en-us_image_0000001216274840](figures/en-us_image_0000001216274840.png) ![en-us_image_0000001216274840](figures/en-us_image_0000001216274840.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> If the serial port number is not displayed correctly, follow the steps described in [Installing the Serial Port Driver on Hi3861 V100](https://device.harmonyos.com/en/docs/documentation/guide/hi3861-drivers-0000001058153433).
4. Choose **QUICK ACCESS** > **DevEco Home** > **Projects**, and then click **Settings**. 5. Choose **QUICK ACCESS** > **DevEco Home** > **Projects**, and then click **Settings**.
![en-us_image_0000001198943768](figures/en-us_image_0000001198943768.png) ![en-us_image_0000001198943768](figures/en-us_image_0000001198943768.png)
5. On the **hi3861** tab page, set the burning options. 6. On the **hi3861** tab page, set the burning options.
- **upload_port**: Select the serial port number obtained. - **upload_port**: Select the serial port number obtained.
- **upload_protocol**: Select the burning protocol **hiburn-serial**. - **upload_protocol**: Select the burning protocol **hiburn-serial**.
...@@ -35,22 +37,24 @@ Hi3861 V100 supports burning through the serial port. To burn source code throug ...@@ -35,22 +37,24 @@ Hi3861 V100 supports burning through the serial port. To burn source code throug
![en-us_image_0000001243704061](figures/en-us_image_0000001243704061.png) ![en-us_image_0000001243704061](figures/en-us_image_0000001243704061.png)
6. Check the preset information of the files to be burnt and modify them when necessary. 7. In **Partitions**, check the preset burning settings of the files to be burnt.
![en-us_image_000000131299335](figures/en-us_image_000000131299335.png)
On the **hi3861_app** tab page, select **partition_bin** from **New Option**, and set the path of the file to be burnt. To modify the burning settings for a specific file, click ![en-us_image_0000001312898911](figures/en-us_image_0000001312898911.png) next to the file.
![en-us_image_0000001260919759](figures/en-us_image_0000001260919759.png) ![en-us_image_0000001312912501](figures/en-us_image_0000001312912501.png)
7. When you finish modifying, click **Save** on the top. 8. When you finish modifying, click **Save** on the top.
8. Click **Open** to open the project file. Then, choose **PROJECT TASKS** > **hi3861** > **Upload** to start burning. 9. Click **Open** to open the project file. Then, choose **PROJECT TASKS** > **hi3861** > **Upload** to start burning.
![en-us_image_0000001216440138](figures/en-us_image_0000001216440138.png) ![en-us_image_0000001216440138](figures/en-us_image_0000001216440138.png)
9. When the following information is displayed, press the RST button on the development board to restart it. 10. When the following information is displayed, press the RST button on the development board within 15 seconds to restart it.
![en-us_image_0000001198466090](figures/en-us_image_0000001198466090.png) ![en-us_image_0000001198466090](figures/en-us_image_0000001198466090.png)
10. Wait until the burning is complete. When the following message is displayed, the burning is successful. When the following message is displayed, the burning is successful.
![en-us_image_0000001216761476](figures/en-us_image_0000001216761476.png) ![en-us_image_0000001216761476](figures/en-us_image_0000001216761476.png)
\ No newline at end of file \ No newline at end of file
en/device-dev/quick-start/quickstart-ide-lite-steps-hi3861.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Hi3861 Development Board
- **[Writing a Hello World Program](quickstart-ide-lite-steps-hi3861-application-framework.md)**
- **[Building](quickstart-ide-lite-steps-hi3861-building.md)**
- **[Burning](quickstart-ide-lite-steps-hi3861-burn.md)**
- **[Networking](quickstart-ide-lite-steps-hi3861-netconfig.md)**
- **[Debugging and Verification](quickstart-ide-lite-steps-hi3861-debug.md)**
- **[Running](quickstart-ide-lite-steps-hi3861-running.md)**
en/device-dev/quick-start/quickstart-ide-lite-steps.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Running a Hello World Program
- **[Hi3861 Development Board](quickstart-ide-lite-steps-hi3861.md)**
- **[Hi3516 Development Board](quickstart-ide-lite-steps-hi3516.md)**
en/device-dev/quick-start/quickstart-ide-lite.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Getting Started with Mini and Small Systems (IDE Mode)
- **[Mini and Small System Overview](quickstart-ide-lite-overview.md)**
- **[Environment Preparation](quickstart-ide-lite-env-setup.md)**
- **[Creating a Source Code Project](quickstart-ide-lite-create-project.md)**
- **[Running a Hello World Program](quickstart-ide-lite-steps.md)**
- **[Appendix](quickstart-ide-lite-appendix.md)**
en/device-dev/quick-start/quickstart-ide-standard-appendix.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Appendix
- **[Introduction to Development Boards](quickstart-ide-standard-board-introduction.md)**
en/device-dev/quick-start/quickstart-ide-standard-board-introduction.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Introduction to Development Boards
- **[Introduction to the Hi3516 Development Board](quickstart-ide-standard-board-introduction-hi3516.md)**
- **[Introduction to the RK3568 Development Board](quickstart-ide-standard-board-introduction-rk3568.md)**
en/device-dev/quick-start/quickstart-ide-standard-create-project.md
浏览文件 @ 0bf53713
# Creating a Source Code Project # Importing a Source Code Project
After [setting up the Windows+Ubuntu hybrid development environment](../quick-start/quickstart-ide-standard-env-setup-win-ubuntu.md) and [obtaining source code](../quick-start/quickstart-ide-standard-sourcecode-acquire.md), perform the following steps to create a source code project in Windows: After [setting up the Windows+Ubuntu hybrid development environment](../quick-start/quickstart-ide-standard-env-setup-win-ubuntu.md) and [obtaining source code](../quick-start/quickstart-ide-standard-sourcecode-acquire.md), perform the following steps to create a source code project in Windows:
......
en/device-dev/quick-start/quickstart-ide-standard-env-setup.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Environment Preparation
- **[Setting Up the Windows+Ubuntu Hybrid Development Environment](quickstart-ide-standard-env-setup-win-ubuntu.md)**
- **[Obtaining Source Code](quickstart-ide-standard-sourcecode-acquire.md)**
en/device-dev/quick-start/quickstart-ide-standard-running-hi3516.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Hi3516 Development Board
- **[Writing a Hello World Program](quickstart-ide-standard-running-hi3516-create.md)**
- **[Building](quickstart-ide-standard-running-hi3516-build.md)**
- **[Burning](quickstart-ide-standard-running-hi3516-burning.md)**
- **[Running](quickstart-ide-standard-running-hi3516-running.md)**
en/device-dev/quick-start/quickstart-ide-standard-running-rk3568.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# RK3568 Development Board
- **[Writing a Hello World Program](quickstart-ide-standard-running-rk3568-create.md)**
- **[Building](quickstart-ide-standard-running-rk3568-build.md)**
- **[Burning](quickstart-ide-standard-running-rk3568-burning.md)**
- **[Running](quickstart-ide-standard-running-rk3568-running.md)**
en/device-dev/quick-start/quickstart-ide-standard-running.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Running a Hello World Program
- **[Hi3516 Development Board](quickstart-ide-standard-running-hi3516.md)**
- **[RK3568 Development Board](quickstart-ide-standard-running-rk3568.md)**
en/device-dev/quick-start/quickstart-lite-appendix.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Appendix
- **[Introduction to Development Boards](quickstart-lite-board-introduction.md)**
- **[Reference](quickstart-lite-reference.md)**
en/device-dev/quick-start/quickstart-lite-board-introduction.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Introduction to Development Boards
- **[Introduction to the Hi3861 Development Board](quickstart-lite-introduction-hi3861.md)**
- **[Introduction to the Hi3516 Development Board](quickstart-lite-introduction-hi3516.md)**
en/device-dev/quick-start/quickstart-lite-env-setup-faqs.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# FAQs
- **[Fixing hb Installation Issues](quickstart-lite-faq-hb.md)**
- **[Fixing Compilation Issues](quickstart-lite-faq-compose.md)**
- **[Fixing Burning Issues](quickstart-lite-faq-burning.md)**
en/device-dev/quick-start/quickstart-lite-steps-hi3516-burn.md
浏览文件 @ 0bf53713
# Burning # Burning
Hi3516D V300 supports burning through the USB port, network port, and serial port. This document describes how to burn source code through the USB port. The operations are performed in Windows. Burning is the process of downloading compiled program files to a development board to provide a basis for subsequent debugging. With the one-click burning function of DevEco Device Tool, you can burn images on development boards quickly and efficiently.
### Importing Source Code ### Importing Source Code
......
en/device-dev/quick-start/quickstart-lite-steps-hi3516.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Hi3516 Development Board
- **[Setting Up the Hi3516 Development Board Environment](quickstart-lite-steps-hi3516-setting.md)**
- **[Writing a Hello World Program](quickstart-lite-steps-hi3516-application-framework.md)**
- **[Building](quickstart-lite-steps-hi3516-building.md)**
- **[Burning](quickstart-lite-steps-hi3516-burn.md)**
- **[Running](quickstart-lite-steps-hi3516-running.md)**
en/device-dev/quick-start/quickstart-lite-steps-hi3861.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Hi3861 Development Board
- **[Setting Up the Hi3861 Development Board Environment](quickstart-lite-steps-hi3861-setting.md)**
- **[Writing a Hello World Program](quickstart-lite-steps-hi3861-application-framework.md)**
- **[Building](quickstart-lite-steps-hi3861-building.md)**
- **[Burning](quickstart-lite-steps-hi3861-burn.md)**
- **[Networking](quickstart-lite-steps-hi3861-netconfig.md)**
- **[Debugging and Verification](quickstart-lite-steps-hi3861-debug.md)**
- **[Running](quickstart-lite-steps-hi3861-running.md)**
en/device-dev/quick-start/quickstart-lite-steps.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Running a Hello World Program
- **[Hi3861 Development Board](quickstart-lite-steps-hi3861.md)**
- **[Hi3516 Development Board](quickstart-lite-steps-hi3516.md)**
en/device-dev/quick-start/quickstart-standard-appendix.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Appendix
- **[Introduction to Development Boards](quickstart-standard-board-introduction.md)**
- **[Reference](quickstart-standard-reference.md)**
en/device-dev/quick-start/quickstart-standard-board-introduction.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Introduction to Development Boards
- **[Introduction to the Hi3516 Development Board](quickstart-standard-board-introduction-hi3516.md)**
- **[Introduction to the RK3568 Development Board](quickstart-standard-board-introduction-rk3568.md)**
en/device-dev/quick-start/quickstart-standard-docker.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Getting Started with Standard System (Using the Installation Package)
- **[Standard System Overview](quickstart-standard-overview.md)**
- **[Setting Up Environments for Standard System](quickstart-standard-env-setup.md)**
- **[Running a Hello World Project](quickstart-standard-running.md)**
- **[FAQs](quickstart-standard-faqs.md)**
- **[Appendix](quickstart-standard-appendix.md)**
en/device-dev/quick-start/quickstart-standard-faqs.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# FAQs
- **[Fixing hb Installation Issues](quickstart-standard-faq-hb.md)**
- **[Fixing Compilation Issues](quickstart-standard-faq-compose.md)**
- **[Fixing Burning Issues](quickstart-standard-faq-burning.md)**
en/device-dev/quick-start/quickstart-standard-ide.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Getting Started with Standard System (IDE Mode)
- **[Standard System Overview](quickstart-ide-standard-overview.md)**
- **[Environment Preparation](quickstart-ide-standard-env-setup.md)**
- **[Creating a Source Code Project](quickstart-ide-standard-create-project.md)**
- **[Running a Hello World Program](quickstart-ide-standard-running.md)**
- **[Appendix](quickstart-ide-standard-appendix.md)**
en/device-dev/quick-start/quickstart-standard-running-hi3516.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Hi3516 Development Board
- **[Writing a Hello World Program](quickstart-standard-running-hi3516-create.md)**
- **[Building](quickstart-standard-running-hi3516-build.md)**
- **[Burning](quickstart-standard-running-hi3516-burning.md)**
- **[Running](quickstart-standard-running-hi3516-running.md)**
en/device-dev/quick-start/quickstart-standard-running-rk3568.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# RK3568 Development Board
- **[Writing a Hello World Program](quickstart-standard-running-rk3568-create.md)**
- **[Building](quickstart-standard-running-rk3568-build.md)**
- **[Burning](quickstart-standard-running-rk3568-burning.md)**
- **[Running](quickstart-standard-running-rk3568-running.md)**
en/device-dev/quick-start/quickstart-standard-running.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Running a Hello World Program
- **[Hi3516 Development Board](quickstart-standard-running-hi3516.md)**
- **[RK3568 Development Board](quickstart-standard-running-rk3568.md)**
en/device-dev/quick-start/quickstart.md 已删除 100644 → 0
浏览文件 @ 3edd0a77
# Getting Started
- **[Getting Started with Mini and Small Systems](quickstart-lite.md)**
- **[Getting Started with Standard System](quickstart-standard.md)**
en/device-dev/website.md
浏览文件 @ 0bf53713
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
- [Obtaining Source Code](quick-start/quickstart-ide-lite-sourcecode-acquire.md) - [Obtaining Source Code](quick-start/quickstart-ide-lite-sourcecode-acquire.md)
- [Creating a Source Code Project](quick-start/quickstart-ide-lite-create-project.md) - [Importing a Source Code Project](quick-start/quickstart-ide-lite-create-project.md)
- Running a Hello World Program - Running a Hello World Program
- Hi3861 Development Board - Hi3861 Development Board
- [Writing a Hello World Program](quick-start/quickstart-ide-lite-steps-hi3861-application-framework.md) - [Writing a Hello World Program](quick-start/quickstart-ide-lite-steps-hi3861-helloworld.md)
- [Building](quick-start/quickstart-ide-lite-steps-hi3861-building.md) - [Building](quick-start/quickstart-ide-lite-steps-hi3861-building.md)
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
- Hi3516 Development Board - Hi3516 Development Board
- [Writing a Hello World Program](quick-start/quickstart-ide-lite-steps-hi3516-application-framework.md) - [Writing a Hello World Program](quick-start/quickstart-ide-lite-steps-hi3516-helloworld.md)
- [Building](quick-start/quickstart-ide-lite-steps-hi3516-building.md) - [Building](quick-start/quickstart-ide-lite-steps-hi3516-building.md)
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
- [Setting Up the Hi3861 Development Board Environment](quick-start/quickstart-lite-steps-hi3861-setting.md) - [Setting Up the Hi3861 Development Board Environment](quick-start/quickstart-lite-steps-hi3861-setting.md)
- [Writing a Hello World Program](quick-start/quickstart-lite-steps-hi3861-application-framework.md) - [Writing a Hello World Program](quick-start/quickstart-lite-steps-hi3861-helloworld.md)
- [Building](quick-start/quickstart-lite-steps-hi3861-building.md) - [Building](quick-start/quickstart-lite-steps-hi3861-building.md)
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
- [Setting Up the Hi3516 Development Board Environment](quick-start/quickstart-lite-steps-hi3516-setting.md) - [Setting Up the Hi3516 Development Board Environment](quick-start/quickstart-lite-steps-hi3516-setting.md)
- [Writing a Hello World Program](quick-start/quickstart-lite-steps-hi3516-application-framework.md) - [Writing a Hello World Program](quick-start/quickstart-lite-steps-hi3516-helloworld.md)
- [Building](quick-start/quickstart-lite-steps-hi3516-building.md) - [Building](quick-start/quickstart-lite-steps-hi3516-building.md)
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
- [Obtaining Source Code](quick-start/quickstart-ide-standard-sourcecode-acquire.md) - [Obtaining Source Code](quick-start/quickstart-ide-standard-sourcecode-acquire.md)
- [Creating a Source Code Project](quick-start/quickstart-ide-standard-create-project.md) - [Importing a Source Code Project](quick-start/quickstart-ide-standard-create-project.md)
- Running a Hello World Program - Running a Hello World Program
...@@ -723,28 +723,24 @@ ...@@ -723,28 +723,24 @@
- Peripheral Driver Usage - Peripheral Driver Usage
- [Audio](driver/driver-peripherals-audio-des.md)
- [Camera](driver/driver-peripherals-camera-des.md)
- [Face_auth](driver/driver-peripherals-face_auth-des.md)
- [LCD](driver/driver-peripherals-lcd-des.md) - [LCD](driver/driver-peripherals-lcd-des.md)
- [Light](driver/driver-peripherals-light-des.md)
- [Touchscreen](driver/driver-peripherals-touch-des.md) - [Pin_auth](driver/driver-peripherals-pinauth-des.md)
- [Sensor](driver/driver-peripherals-sensor-des.md) - [Sensor](driver/driver-peripherals-sensor-des.md)
- [Touchscreen](driver/driver-peripherals-touch-des.md)
- [WLAN](driver/driver-peripherals-external-des.md)
- [Audio](driver/driver-peripherals-audio-des.md)
- [USB](driver/driver-peripherals-usb-des.md) - [USB](driver/driver-peripherals-usb-des.md)
- [User_auth](driver/driver-peripherals-user-auth-des.md)
- [Camera](driver/driver-peripherals-camera-des.md)
- [Vibrator](driver/driver-peripherals-vibrator-des.md) - [Vibrator](driver/driver-peripherals-vibrator-des.md)
- [WLAN](driver/driver-peripherals-external-des.md)
- [Light](driver/driver-peripherals-light-des.md)
- Compilation and Building - Compilation and Building
- [Building Mini and Small Systems](subsystems/subsys-build-mini-lite.md) - [Building Mini and Small Systems](subsystems/subsys-build-mini-lite.md)
- [Building the Standard System](subsystems/subsys-build-standard-large.md) - [Building the Standard System](subsystems/subsys-build-standard-large.md)
- [Build System Coding Specifications and Best Practices](subsystems/subsys-build-gn-coding-style-and-best-practice.md) - [Build System Coding Specifications and Best Practices](subsystems/subsys-build-gn-coding-style-and-best-practice.md)
- [Building the Kconfig Visual Configuration](subsystems/subsys-build-gn-kconfig-visual-config-guide.md) - [Building the Kconfig Visual Configuration](subsystems/subsys-build-gn-kconfig-visual-config-guide.md)
- [HAP Build Guide](subsystems/subsys-build-gn-hap-compilation-guide.md)
- [Distributed Remote Startup](subsystems/subsys-remote-start.md) - [Distributed Remote Startup](subsystems/subsys-remote-start.md)
- Graphics - Graphics
- [Graphics Overview](subsystems/subsys-graphics-overview.md) - [Graphics Overview](subsystems/subsys-graphics-overview.md)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或