Huawei Hongmeng development lesson 4

Learning video ： Qianfeng education Hongmeng system development tutorial ,HarmonyOS 2.0 Practical course of Hongmeng application development （ Develop your first Hongmeng APP）_ Bili, Bili _bilibili

  Learning documents ：

General properties - Universal - Components - be based on JS Extended classes Web Development paradigm - mobile phone 、 Flat 、 Smart screen and smart wear development -JS API Reference resources -HarmonyOS application development

  One 、web Components

A component that displays the contents of a web page

web- Basic components - Components - be based on JS Extended classes Web Development paradigm - mobile phone 、 Flat 、 Smart screen and smart wear development -JS API Reference resources -HarmonyOS application development

constraint

A page only supports one web Components , It will be displayed in full screen , If there are other components in the page , Will be web Component overlay ,web Components do not follow transition animation

Child components

I won't support it .

attribute

Only the following properties are supported ：

name	type	The default value is	Required	describe
src	string	-	no	Set the address of the web page to be displayed , The domain name of the web address must be https The agreement has been made and passed through ICP Keep on record .
id	string	-	no	Unique identification of the component .

style

Generic style settings are not supported .

event

Only the following events are supported ：

name	Parameters	describe
pagestart	{url: string}	Triggered when a web page is loaded
pagefinish	{url: string}	Triggered at the end of web page loading
error	{url: string, errorCode: number, description: string}	Triggered when there is an error loading a web page or when there is an error opening a web page

Method

Only the following methods are supported ：

name	Parameters	describe
reload	-	Reload page

Example  

<!-- xxx.hml -->
<div class="container">
  <button onclick="reloadWeb">click to reload</button>
  <web src = "https://www.example.com" onpagestart="pagestart" onpagefinish="pagefinish" onerror="error"></web>
</div>

// xxx.js
import router from '@system.router'
export default {
  reloadWeb() {
    this.$element('web').reload()
  },
  pagestart: function (e) {
    console.info('pagestart: ' + e.url);
  },
  pagefinish: function (e) {
    console.info('pagefinish: ' + e.url);
  },
  error: function (e) {
    console.info('pageError url:' + e.url);
    console.info('pageError errorCode:' + e.errorCode);
    console.info('pageError description:' + e.description);
  }
}

// xxx.js
import router from '@system.router'
export default {
  reloadWeb() {
    this.$element('web').reload()
  },
  pagestart: function (e) {
    console.info('pagestart: ' + e.url);
  },
  pagefinish: function (e) {
    console.info('pagefinish: ' + e.url);
  },
  error: function (e) {
    console.info('pageError url:' + e.url);
    console.info('pageError errorCode:' + e.errorCode);
    console.info('pageError description:' + e.description);
  }
}

Two 、carmera Components

camera- Media components - Components - be based on JS Extended classes Web Development paradigm - mobile phone 、 Flat 、 Smart screen and smart wear development -JS API Reference resources -HarmonyOS application development

Camera assembly , Provide preview 、 Photo function . 

Child components

I won't support it .

attribute

Except support General properties Outside , The following styles are also supported ：

name	type	The default value is	Required	describe
flash	string	off	no	The flash , The value is on、off、torch（ Flashlight always on mode ）
deviceposition	string	back	no	Before or after , The value is front、back.

explain

Rendering properties are not currently supported if、show and for.

style

Only the following styles are supported ：

name	type	The default value is	Required	describe
width	<length> | <percentage>	-	no	Set the width of the component itself . By default, the width required for the content of the element itself is used . explain camera Dynamic modification of component width and height is not supported .
height	<length> | <percentage>	-	no	Set the height of the component itself . By default, the height required for the content of the element itself is used .
[left|top]	<length>	-	no	left|top Need to cooperate with position Patterns use , To determine the offset position of the element . left Attribute specifies the left edge of the element . This attribute defines the offset between the left outer margin boundary of the positioning element and the left boundary of its containing block . top Attribute specifies the top edge of the element . This attribute defines the offset between the top margin boundary of an anchor element and the top boundary of its containing block .

event

Except support General events Outside , The following events are also supported ：

name	Parameters	describe
error	-	Trigger when the user is not allowed to use the camera .

Method

Only the following methods are supported ：

name	Parameters	describe
takePhoto	CameraTakePhotoOptions	Take photos , Support to set picture quality .

surface 1 CameraTakePhotoOptions

Parameters	type	Required	The default value is	describe
quality	string	yes	normal	Picture quality , Possible values are ：high、normal、low.
success	Function	no	-	Interface calls the successful callback function . Return to picture uri.
fail	Function	no	-	Interface call failed callback function .
complete	Function	no	-	The callback function at the end of the interface call .

Example

<!-- xxx.hml-->
<div class="container">
  <camera flash="on" deviceposition="back" @error="cameraError">
  </camera>
</div>

/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
camera{
  width: 300px;
  height: 300px;
}

//xxx.js
import prompt from '@system.prompt';
export default {
  data: {
    title: 'World'
  },
  cameraError(){
    prompt.showToast({
      message: " privilege grant failed ！"
    });
  }
}