鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Web)中篇
onBeforeUnload
onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
刷新或关闭场景下,在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点,才会触发此回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 当前显示弹窗所在网页的URL。 |
| message | string | 弹窗中显示的信息。 |
| result | JsResult | 通知Web组件用户操作行为。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时,函数中绘制的自定义弹窗无效。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: $rawfile("index.html"), controller: this.controller }).onBeforeUnload((event) => {if (event) {console.log("event.url:" + event.url)console.log("event.message:" + event.message)AlertDialog.show({title: 'onBeforeUnload',message: 'text',primaryButton: {value: 'cancel',action: () => {event.result.handleCancel()}},secondaryButton: {value: 'ok',action: () => {event.result.handleConfirm()}},cancel: () => {event.result.handleCancel()}})}return true})}}
}
加载的html文件。
<!--index.html-->
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body onbeforeunload="return myFunction()"><h1>WebView onBeforeUnload Demo</h1><a href="https://www.example.com">Click here</a><script>function myFunction() {return "onBeforeUnload Event";}</script>
</body>
</html>
onConfirm
onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
网页调用confirm()告警时触发此回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 当前显示弹窗所在网页的URL。 |
| message | string | 弹窗中显示的信息。 |
| result | JsResult | 通知Web组件用户操作行为。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时,函数中绘制的自定义弹窗无效。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: $rawfile("index.html"), controller: this.controller }).onConfirm((event) => {if (event) {console.log("event.url:" + event.url)console.log("event.message:" + event.message)AlertDialog.show({title: 'onConfirm',message: 'text',primaryButton: {value: 'cancel',action: () => {event.result.handleCancel()}},secondaryButton: {value: 'ok',action: () => {event.result.handleConfirm()}},cancel: () => {event.result.handleCancel()}})}return true})}}
}
加载的html文件。
<!--index.html-->
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head><body><h1>WebView onConfirm Demo</h1><button onclick="myFunction()">Click here</button><p id="demo"></p><script>function myFunction() {let x;let r = confirm("click button!");if (r == true) {x = "ok";} else {x = "cancel";}document.getElementById("demo").innerHTML = x;}</script>
</body>
</html>
onPrompt9+
onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)
网页调用prompt()告警时触发此回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 当前显示弹窗所在网页的URL。 |
| message | string | 弹窗中显示的信息。 |
| result | JsResult | 通知Web组件用户操作行为。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时,函数中绘制的自定义弹窗无效。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: $rawfile("index.html"), controller: this.controller }).onPrompt((event) => {if (event) {console.log("url:" + event.url)console.log("message:" + event.message)console.log("value:" + event.value)AlertDialog.show({title: 'onPrompt',message: 'text',primaryButton: {value: 'cancel',action: () => {event.result.handleCancel()}},secondaryButton: {value: 'ok',action: () => {event.result.handlePromptConfirm(event.value)}},cancel: () => {event.result.handleCancel()}})}return true})}}
}
加载的html文件。
<!--index.html-->
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head><body><h1>WebView onPrompt Demo</h1><button onclick="myFunction()">Click here</button><p id="demo"></p><script>function myFunction() {let message = prompt("Message info", "Hello World");if (message != null && message != "") {document.getElementById("demo").innerHTML = message;}}</script>
</body>
</html>
onConsole
onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
通知宿主应用JavaScript console消息。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| message | ConsoleMessage | 触发的控制台信息。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 当返回true时,该条消息将不会再打印至控制台,反之仍会打印至控制台。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onConsole((event) => {if (event) {console.log('getMessage:' + event.message.getMessage())console.log('getSourceId:' + event.message.getSourceId())console.log('getLineNumber:' + event.message.getLineNumber())console.log('getMessageLevel:' + event.message.getMessageLevel())}return false})}}
}
onDownloadStart
onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)
通知主应用开始下载一个文件。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 文件下载的URL。 |
| userAgent | string | 用于下载的用户代理。 |
| contentDisposition | string | 服务器返回的 Content-Disposition响应头,可能为空。 |
| mimetype | string | 服务器返回内容媒体类型(MIME)信息。 |
| contentLength | number | 服务器返回文件的长度。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onDownloadStart((event) => {if (event) {console.log('url:' + event.url)console.log('userAgent:' + event.userAgent)console.log('contentDisposition:' + event.contentDisposition)console.log('contentLength:' + event.contentLength)console.log('mimetype:' + event.mimetype)}})}}
}
onErrorReceive
onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void)
网页加载遇到错误时触发该回调。出于性能考虑,建议此回调中尽量执行简单逻辑。在无网络的情况下,触发此回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| request | WebResourceRequest | 网页请求的封装信息。 |
| error | WebResourceError | 网页加载资源错误的封装信息 。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onErrorReceive((event) => {if (event) {console.log('getErrorInfo:' + event.error.getErrorInfo())console.log('getErrorCode:' + event.error.getErrorCode())console.log('url:' + event.request.getRequestUrl())console.log('isMainFrame:' + event.request.isMainFrame())console.log('isRedirect:' + event.request.isRedirect())console.log('isRequestGesture:' + event.request.isRequestGesture())console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString())let result = event.request.getRequestHeader()console.log('The request header result size is ' + result.length)for (let i of result) {console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)}}})}}
}
onHttpErrorReceive
onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void)
网页加载资源遇到的HTTP错误(响应码>=400)时触发该回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| request | WebResourceRequest | 网页请求的封装信息。 |
| response | WebResourceResponse | 资源响应的封装信息。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onHttpErrorReceive((event) => {if (event) {console.log('url:' + event.request.getRequestUrl())console.log('isMainFrame:' + event.request.isMainFrame())console.log('isRedirect:' + event.request.isRedirect())console.log('isRequestGesture:' + event.request.isRequestGesture())console.log('getResponseData:' + event.response.getResponseData())console.log('getResponseEncoding:' + event.response.getResponseEncoding())console.log('getResponseMimeType:' + event.response.getResponseMimeType())console.log('getResponseCode:' + event.response.getResponseCode())console.log('getReasonMessage:' + event.response.getReasonMessage())let result = event.request.getRequestHeader()console.log('The request header result size is ' + result.length)for (let i of result) {console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)}let resph = event.response.getResponseHeader()console.log('The response header result size is ' + resph.length)for (let i of resph) {console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)}}})}}
}
onPageBegin
onPageBegin(callback: (event?: { url: string }) => void)
网页开始加载时触发该回调,且只在主frame触发,iframe或者frameset的内容加载时不会触发此回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 页面的URL地址。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onPageBegin((event) => {if (event) {console.log('url:' + event.url)}})}}
}
onPageEnd
onPageEnd(callback: (event?: { url: string }) => void)
网页加载完成时触发该回调,且只在主frame触发。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 页面的URL地址。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onPageEnd((event) => {if (event) {console.log('url:' + event.url)}})}}
}
onProgressChange
onProgressChange(callback: (event?: { newProgress: number }) => void)
网页加载进度变化时触发该回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| newProgress | number | 新的加载进度,取值范围为0到100的整数。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onProgressChange((event) => {if (event) {console.log('newProgress:' + event.newProgress)}})}}
}
onTitleReceive
onTitleReceive(callback: (event?: { title: string }) => void)
网页document标题更改时触发该回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| title | string | document标题内容。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onTitleReceive((event) => {if (event) {console.log('title:' + event.title)}})}}
}
onRefreshAccessedHistory
onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void)
加载网页页面完成时触发该回调,用于应用更新其访问的历史链接。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 访问的url。 |
| isRefreshed | boolean | true表示该页面是被重新加载的(调用refresh9+接口),false表示该页面是新加载的。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onRefreshAccessedHistory((event) => {if (event) {console.log('url:' + event.url + ' isReload:' + event.isRefreshed)}})}}
}
onSslErrorReceive(deprecated)
onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)
通知用户加载资源时发生SSL错误。
说明:
从API version 8开始支持,从API version 9开始废弃。建议使用onSslErrorEventReceive9+替代。
onFileSelectorShow(deprecated)
onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)
调用此函数以处理具有“文件”输入类型的HTML表单,以响应用户按下的“选择文件”按钮。
说明:
从API version 8开始支持,从API version 9开始废弃。建议使用onShowFileSelector9+替代。
onRenderExited9+
onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)
应用渲染进程异常退出时触发该回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| renderExitReason | RenderExitReason | 渲染进程异常退出的具体原因。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'chrome://crash/', controller: this.controller }).onRenderExited((event) => {if (event) {console.log('reason:' + event.renderExitReason)}})}}
}
onShowFileSelector9+
onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)
调用此函数以处理具有“文件”输入类型的HTML表单,以响应用户按下的“选择文件”按钮。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| result | FileSelectorResult | 用于通知Web组件文件选择的结果。 |
| fileSelector | FileSelectorParam | 文件选择器的相关信息。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 当返回值为true时,用户可以调用系统提供的弹窗能力。当回调返回false时,函数中绘制的自定义弹窗无效。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: $rawfile('index.html'), controller: this.controller }).onShowFileSelector((event) => {console.log('MyFileUploader onShowFileSelector invoked')const documentSelectOptions = new picker.DocumentSelectOptions();let uri: string | null = null;const documentViewPicker = new picker.DocumentViewPicker();documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {uri = documentSelectResult[0];console.info('documentViewPicker.select to file succeed and uri is:' + uri);if (event) {event.result.handleFileList([uri]);}}).catch((err: BusinessError) => {console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);})return true})}}
}
加载的html文件。
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body><form id="upload-form" enctype="multipart/form-data"><input type="file" id="upload" name="upload"/></form>
</body>
</html>
onResourceLoad9+
onResourceLoad(callback: (event: {url: string}) => void)
通知Web组件所加载的资源文件url信息。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 所加载的资源文件url信息。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onResourceLoad((event) => {console.log('onResourceLoad: ' + event.url)})}}
}
onScaleChange9+
onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void)
当前页面显示比例的变化时触发该回调。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| oldScale | number | 变化前的显示比例百分比。 |
| newScale | number | 变化后的显示比例百分比。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onScaleChange((event) => {console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale)})}}
}
onUrlLoadIntercept(deprecated)
onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean)
当Web组件加载url之前触发该回调,用于判断是否阻止此次访问。默认允许加载。 从API version 10开始不再维护,建议使用onLoadIntercept10+代替。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| data | string | WebResourceRequest | url的相关信息。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 返回true表示阻止此次加载,否则允许此次加载。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onUrlLoadIntercept((event) => {if (event) {console.log('onUrlLoadIntercept ' + event.data.toString())}return true})}}
}
onInterceptRequest9+
onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)
当Web组件加载url之前触发该回调,用于拦截url并返回响应数据。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| request | WebResourceRequest | url请求的相关信息。 |
返回值:
| 类型 | 说明 |
|---|---|
| WebResourceResponse | 返回响应数据则按照响应数据加载,无响应数据则返回null表示按照原来的方式加载。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()responseweb: WebResourceResponse = new WebResourceResponse()heads:Header[] = new Array()@State webdata: string = "<!DOCTYPE html>\n" +"<html>\n"+"<head>\n"+"<title>intercept test</title>\n"+"</head>\n"+"<body>\n"+"<h1>intercept test</h1>\n"+"</body>\n"+"</html>"build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onInterceptRequest((event) => {if (event) {console.log('url:' + event.request.getRequestUrl())}let head1:Header = {headerKey:"Connection",headerValue:"keep-alive"}let head2:Header = {headerKey:"Cache-Control",headerValue:"no-cache"}let length = this.heads.push(head1)length = this.heads.push(head2)this.responseweb.setResponseHeader(this.heads)this.responseweb.setResponseData(this.webdata)this.responseweb.setResponseEncoding('utf-8')this.responseweb.setResponseMimeType('text/html')this.responseweb.setResponseCode(200)this.responseweb.setReasonMessage('OK')return this.responseweb})}}
}
onHttpAuthRequest9+
onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean)
通知收到http auth认证请求。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| handler | HttpAuthHandler | 通知Web组件用户操作行为。 |
| host | string | HTTP身份验证凭据应用的主机。 |
| realm | string | HTTP身份验证凭据应用的域。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 返回false表示此次认证失败,否则成功。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()httpAuth: boolean = falsebuild() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onHttpAuthRequest((event) => {if (event) {AlertDialog.show({title: 'onHttpAuthRequest',message: 'text',primaryButton: {value: 'cancel',action: () => {event.handler.cancel()}},secondaryButton: {value: 'ok',action: () => {this.httpAuth = event.handler.isHttpAuthInfoSaved()if (this.httpAuth == false) {web_webview.WebDataBase.saveHttpAuthCredentials(event.host,event.realm,"2222","2222")event.handler.cancel()}}},cancel: () => {event.handler.cancel()}})}return true})}}
}
onSslErrorEventReceive9+
onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslError }) => void)
通知用户加载资源时发生SSL错误。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| handler | SslErrorHandler | 通知Web组件用户操作行为。 |
| error | SslError | 错误码。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()httpAuth: boolean = falsebuild() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onHttpAuthRequest((event) => {if (event) {AlertDialog.show({title: 'onHttpAuthRequest',message: 'text',primaryButton: {value: 'cancel',action: () => {event.handler.cancel()}},secondaryButton: {value: 'ok',action: () => {this.httpAuth = event.handler.isHttpAuthInfoSaved()if (this.httpAuth == false) {web_webview.WebDataBase.saveHttpAuthCredentials(event.host,event.realm,"2222","2222")event.handler.cancel()}}},cancel: () => {event.handler.cancel()}})}return true})}}
}
onClientAuthenticationRequest9+
onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array<string>, issuers : Array<string>}) => void)
通知用户收到SSL客户端证书请求事件。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| handler | ClientAuthenticationHandler | 通知Web组件用户操作行为。 |
| host | string | 请求证书服务器的主机名。 |
| port | number | 请求证书服务器的端口号。 |
| keyTypes | Array<string> | 可接受的非对称秘钥类型。 |
| issuers | Array<string> | 与私钥匹配的证书可接受颁发者。 |
示例:
未对接证书管理的双向认证。
// xxx.ets API9
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onClientAuthenticationRequest((event) => {AlertDialog.show({title: 'onClientAuthenticationRequest',message: 'text',primaryButton: {value: 'confirm',action: () => {event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")}},secondaryButton: {value: 'cancel',action: () => {event.handler.cancel()}},cancel: () => {event.handler.ignore()}})})}}
}
对接证书管理的双向认证。
-
构造单例对象GlobalContext。
// GlobalContext.ts export class GlobalContext {private constructor() {}private static instance: GlobalContext;private _objects = new Map<string, Object>();public static getContext(): GlobalContext {if (!GlobalContext.instance) {GlobalContext.instance = new GlobalContext();}return GlobalContext.instance;}getObject(value: string): Object | undefined {return this._objects.get(value);}setObject(key: string, objectClass: Object): void {this._objects.set(key, objectClass);} } -
实现双向认证。
// xxx.ets API10 import common from '@ohos.app.ability.common'; import Want from '@ohos.app.ability.Want'; import web_webview from '@ohos.web.webview' import { BusinessError } from '@ohos.base'; import bundleManager from '@ohos.bundle.bundleManager' import { GlobalContext } from '../GlobalContext'let uri = "";export default class CertManagerService {private static sInstance: CertManagerService;private authUri = "";private appUid = "";public static getInstance(): CertManagerService {if (CertManagerService.sInstance == null) {CertManagerService.sInstance = new CertManagerService();}return CertManagerService.sInstance;}async grantAppPm(callback: (message: string) => void) {let message = '';let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;//注:com.example.myapplication需要写实际应用名称try {bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {console.info('getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data));this.appUid = data.appInfo.uid.toString();}).catch((err: BusinessError) => {console.error('getBundleInfoForSelf failed. Cause: %{public}s', err.message);});} catch (err) {let message = (err as BusinessError).message;console.error('getBundleInfoForSelf failed: %{public}s', message);}//注:需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context)let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContextawait abilityContext.startAbilityForResult({bundleName: "com.ohos.certmanager",abilityName: "MainAbility",uri: "requestAuthorize",parameters: {appUid: this.appUid, //传入申请应用的appUid}} as Want).then((data: common.AbilityResult) => {if (!data.resultCode && data.want) {if (data.want.parameters) {this.authUri = data.want.parameters.authUri as string; //授权成功后获取返回的authUri}}})message += "after grantAppPm authUri: " + this.authUri;uri = this.authUri;callback(message)}}@Entry@Componentstruct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController();@State message: string = 'Hello World' //message主要是调试观察使用certManager = CertManagerService.getInstance();build() {Row() {Column() {Row() {//第一步:需要先进行授权,获取到uriButton('GrantApp').onClick(() => {this.certManager.grantAppPm((data) => {this.message = data;});})//第二步:授权后,双向认证会通过onClientAuthenticationRequest回调将uri传给web进行认证Button("ClientCertAuth").onClick(() => {this.controller.loadUrl('https://www.example2.com'); //支持双向认证的服务器网站})}Web({ src: 'https://www.example1.com', controller: this.controller }).fileAccess(true).javaScriptAccess(true).domStorageAccess(true).onlineImageAccess(true).onClientAuthenticationRequest((event) => {AlertDialog.show({title: 'ClientAuth',message: 'Text',confirm: {value: 'Confirm',action: () => {event.handler.confirm(uri);}},cancel: () => {event.handler.cancel();}})})}}.width('100%').height('100%')}}
onPermissionRequest9+
onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
通知收到获取权限请求。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| request | PermissionRequest | 通知Web组件用户操作行为。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: $rawfile('index.html'), controller: this.controller }).onPermissionRequest((event) => {if (event) {AlertDialog.show({title: 'title',message: 'text',primaryButton: {value: 'deny',action: () => {event.request.deny()}},secondaryButton: {value: 'onConfirm',action: () => {event.request.grant(event.request.getAccessibleResource())}},cancel: () => {event.request.deny()}})}})}}
}
加载的html文件。
<!-- index.html --><!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><video id="video" width="500px" height="500px" autoplay="autoplay"></video><canvas id="canvas" width="500px" height="500px"></canvas><br><input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/><script>function getMedia(){let constraints = {video: {width: 500, height: 500},audio: true};//获取video摄像头区域let video = document.getElementByld("video");//返回的Promise对象let promise = navigator.mediaDevices.getUserMedia(constraints);//then()异步,调用MediaStream对象作为参数promise.then(function (MediaStream) {video.srcObject = MediaStream;video.play();});}</script></body></html>
onContextMenuShow9+
onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)
长按特定元素(例如图片,链接)或鼠标右键,跳出菜单。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| param | WebContextMenuParam | 菜单相关参数。 |
| result | WebContextMenuResult | 菜单相应事件传入内核。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 自定义菜单返回true,触发的自定义菜单无效返回false。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
import pasteboard from '@ohos.pasteboard'
const TAG = 'ContextMenu';@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()private result: WebContextMenuResult | undefined = undefined;@State linkUrl: string = '';@State offsetX: number = 0;@State offsetY: number = 0;@State showMenu: boolean = false;@Builder//构建自定义菜单及触发功能接口MenuBuilder(){//以垂直列表形式显示的菜单。Menu(){//展示菜单Menu中具体的item菜单项。MenuItem({content: '复制图片',}).width(100).height(50).onClick(() => {this.result?.copyImage();this.showMenu = false;})MenuItem({content: '剪切',}).width(100).height(50).onClick(() => {this.result?.cut();this.showMenu = false;})MenuItem({content: '复制',}).width(100).height(50).onClick(() => {this.result?.copy();this.showMenu = false;})MenuItem({content: '粘贴',}).width(100).height(50).onClick(() => {this.result?.paste();this.showMenu = false;})MenuItem({content: '复制链接',}).width(100).height(50).onClick(() => {let pasteData = pasteboard.createData('text/plain', this.linkUrl);pasteboard.getSystemPasteboard().setData(pasteData, (error)=>{if(error){return;}})this.showMenu = false;})MenuItem({content: '全选',}).width(100).height(50).onClick(() => {this.result?.selectAll();this.showMenu = false;})}.width(150).height(300)}build() {Column() {Web({ src: $rawfile("index.html"), controller: this.controller })//触发自定义弹窗.onContextMenuShow((event) => {if (event) {this.result = event.resultconsole.info("x coord = " + event.param.x())console.info("link url = " + event.param.getLinkUrl())this.linkUrl = event.param.getLinkUrl()}console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`);this.showMenu = true;this.offsetX = 250;this.offsetY = Math.max(px2vp(event?.param.y() ?? 0) - 0, 0);return true}).bindPopup(this.showMenu,{builder: this.MenuBuilder(),enableArrow: false,placement: Placement.LeftTop,offset: { x: this.offsetX, y: this.offsetY},mask: false,onStateChange: (e) => {if(!e.isVisible){this.showMenu = false;this.result!.closeContextMenu();}}})}}
}
加载的html文件。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<body><h1>onContextMenuShow</h1><a href="http://www.example.com" style="font-size:27px">链接www.example.com</a>//rawfile下放任意一张图片命名为example.png<div><img src="example.png"></div><p>选中文字鼠标右键弹出菜单</p>
</body>
</html>
onContextMenuHide11+
onContextMenuHide(callback: OnContextMenuHideCallback)
长按特定元素(例如图片,链接)或鼠标右键,隐藏菜单。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| callback | OnContextMenuHideCallback | 菜单相关参数。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onContextMenuHide(() => {console.log("onContextMenuHide callback")})}}
}
onScroll9+
onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
通知网页滚动条滚动位置。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| xOffset | number | 以网页最左端为基准,水平滚动条滚动所在位置。 |
| yOffset | number | 以网页最上端为基准,竖直滚动条滚动所在位置。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onScroll((event) => {console.info("x = " + event.xOffset)console.info("y = " + event.yOffset)})}}
}
onGeolocationShow
onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void)
通知用户收到地理位置信息获取请求。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| origin | string | 指定源的字符串索引。 |
| geolocation | JsGeolocation | 通知Web组件用户操作行为。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src:$rawfile('index.html'), controller:this.controller }).geolocationAccess(true).onGeolocationShow((event) => {if (event) {AlertDialog.show({title: 'title',message: 'text',confirm: {value: 'onConfirm',action: () => {event.geolocation.invoke(event.origin, true, true)}},cancel: () => {event.geolocation.invoke(event.origin, false, true)}})}})}}
}
加载的html文件。
<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){if (navigator.geolocation) {<!-- 前端页面访问设备地理位置 -->navigator.geolocation.getCurrentPosition(showPosition);}
}
function showPosition(position){locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
onGeolocationHide
onGeolocationHide(callback: () => void)
通知用户先前被调用onGeolocationShow时收到地理位置信息获取请求已被取消。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| callback | () => void | 地理位置信息获取请求已被取消的回调函数。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src:'www.example.com', controller:this.controller }).geolocationAccess(true).onGeolocationHide(() => {console.log("onGeolocationHide...")})}}
}
onFullScreenEnter9+
onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)
通知开发者web组件进入全屏模式。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| handler | FullScreenExitHandler | 用于退出全屏模式的函数句柄。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()handler: FullScreenExitHandler | null = nullbuild() {Column() {Web({ src:'www.example.com', controller:this.controller }).onFullScreenEnter((event) => {console.log("onFullScreenEnter...")this.handler = event.handler})}}
}
onFullScreenExit9+
onFullScreenExit(callback: () => void)
通知开发者web组件退出全屏模式。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| callback | () => void | 退出全屏模式时的回调函数。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()handler: FullScreenExitHandler | null = nullbuild() {Column() {Web({ src:'www.example.com', controller:this.controller }).onFullScreenExit(() => {console.log("onFullScreenExit...")if (this.handler) {this.handler.exitFullScreen()}}).onFullScreenEnter((event) => {this.handler = event.handler})}}
}
onWindowNew9+
onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetUrl: string, handler: ControllerHandler}) => void)
使能multiWindowAccess情况下,通知用户新建窗口请求。 若不调用event.handler.setWebController接口,会造成render进程阻塞。 如果不需要打开新窗口,在调用event.handler.setWebController接口时须设置成null。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| isAlert | boolean | true代表请求创建对话框,false代表新标签页。 |
| isUserTrigger | boolean | true代表用户触发,false代表非用户触发。 |
| targetUrl | string | 目标url。 |
| handler | ControllerHandler | 用于设置新建窗口的WebviewController实例。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'//在同一page页有两个web组件。在WebComponent新开窗口时,会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {Column() {Web({ src: "", controller: this.webviewController1 }).javaScriptAccess(true).multiWindowAccess(false).onWindowExit(()=> {console.info("NewWebViewComp onWindowExit")if (this.controller) {this.controller.close()}})}}
}@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()dialogController: CustomDialogController | null = nullbuild() {Column() {Web({ src: 'www.example.com', controller: this.controller }).javaScriptAccess(true)//需要使能multiWindowAccess.multiWindowAccess(true).allowWindowOpenMethod(true).onWindowNew((event) => {if (this.dialogController) {this.dialogController.close()}let popController:web_webview.WebviewController = new web_webview.WebviewController()this.dialogController = new CustomDialogController({builder: NewWebViewComp({webviewController1: popController})})this.dialogController.open()//将新窗口对应WebviewController返回给Web内核。//如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。//若不调用event.handler.setWebController接口,会造成render进程阻塞。event.handler.setWebController(popController)})}}
}
onWindowExit9+
onWindowExit(callback: () => void)
通知用户窗口关闭请求。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| callback | () => void | 窗口请求关闭的回调函数。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src:'www.example.com', controller: this.controller }).onWindowExit(() => {console.log("onWindowExit...")})}}
}
onSearchResultReceive9+
onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMatches: number, isDoneCounting: boolean}) => void): WebAttribute
回调通知调用方网页页内查找的结果。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| activeMatchOrdinal | number | 当前匹配的查找项的序号(从0开始)。 |
| numberOfMatches | number | 所有匹配到的关键词的个数。 |
| isDoneCounting | boolean | 当次页内查找操作是否结束。该方法可能会回调多次,直到isDoneCounting为true为止。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onSearchResultReceive(ret => {if (ret) {console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +"[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)}})}}
}
onDataResubmitted9+
onDataResubmitted(callback: (event: {handler: DataResubmissionHandler}) => void)
设置网页表单可以重新提交时触发的回调函数。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| handler | DataResubmissionHandler | 表单数据重新提交句柄。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
import business_error from '@ohos.base';
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {//在网页中点击提交之后,点击refresh按钮可以重新提交时的触发函数。Button('refresh').onClick(() => {try {this.controller.refresh();} catch (error) {let e: business_error.BusinessError = error as business_error.BusinessError;console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);}})Web({ src:$rawfile('index.html'), controller: this.controller }).onDataResubmitted((event) => {console.log('onDataResubmitted')event.handler.resend();})}}
}
加载的html文件。
<!-- index.html --><!DOCTYPE html><html><head><meta charset="utf-8"></head><body><form action="http://httpbin.org/post" method="post"><input type="text" name="username"><input type="submit" name="提交"></form></body></html>
onPageVisible9+
onPageVisible(callback: (event: {url: string}) => void)
设置旧页面不再呈现,新页面即将可见时触发的回调函数。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 旧页面不再呈现,新页面即将可见时新页面的url地址。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src:'www.example.com', controller: this.controller }).onPageVisible((event) => {console.log('onPageVisible url:' + event.url)})}}
}
onInterceptKeyEvent9+
onInterceptKeyEvent(callback: (event: KeyEvent) => boolean)
设置键盘事件的回调函数,该回调在被Webview使用前触发。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| event | KeyEvent | 触发的KeyEvent事件。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入Webview内核。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src:'www.example.com', controller: this.controller }).onInterceptKeyEvent((event) => {if (event.keyCode == 2017 || event.keyCode == 2018) {console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`)return true;}return false;})}}
}
onTouchIconUrlReceived9+
onTouchIconUrlReceived(callback: (event: {url: string, precomposed: boolean}) => void)
设置接收到apple-touch-icon url地址时的回调函数。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 接收到的apple-touch-icon url地址。 |
| precomposed | boolean | 对应apple-touch-icon是否为预合成。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src:'www.baidu.com', controller: this.controller }).onTouchIconUrlReceived((event) => {console.log('onTouchIconUrlReceived:' + JSON.stringify(event))})}}
}
onFaviconReceived9+
onFaviconReceived(callback: (event: { favicon: PixelMap }) => void)
设置应用为当前页面接收到新的favicon时的回调函数。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| favicon | PixelMap | 接收到的favicon图标的PixelMap对象。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
import image from "@ohos.multimedia.image"
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()@State icon: image.PixelMap | undefined = undefined;build() {Column() {Web({ src:'www.example.com', controller: this.controller }).onFaviconReceived((event) => {console.log('onFaviconReceived');this.icon = event.favicon;})}}
}
onAudioStateChanged10+
onAudioStateChanged(callback: (event: { playing: boolean }) => void)
设置网页上的音频播放状态发生改变时的回调函数。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| playing | boolean | 当前页面的音频播放状态,true表示正在播放,false表示未播放。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()@State playing: boolean = falsebuild() {Column() {Web({ src:'www.example.com', controller: this.controller }).onAudioStateChanged(event => {this.playing = event.playingconsole.debug('onAudioStateChanged playing: ' + this.playing)})}}
}
onFirstContentfulPaint10+
onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstContentfulPaintMs: number }) => void)
设置网页首次内容绘制回调函数。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| navigationStartTick | number | navigation开始的时间,单位以微秒表示。 |
| firstContentfulPaintMs | number | 从navigation开始第一次绘制内容的时间,单位是以毫秒表示。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src:'www.example.com', controller: this.controller }).onFirstContentfulPaint(event => {if (event) {console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +event.navigationStartTick + ", [firstContentfulPaintMs]:" +event.firstContentfulPaintMs)}})}}
}
onLoadIntercept10+
onLoadIntercept(callback: (event: { data: WebResourceRequest }) => boolean)
当Web组件加载url之前触发该回调,用于判断是否阻止此次访问。默认允许加载。
参数:
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| data | WebResourceRequest | url请求的相关信息。 |
返回值:
| 类型 | 说明 |
|---|---|
| boolean | 返回true表示阻止此次加载,否则允许此次加载。 |
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onLoadIntercept((event) => {console.log('url:' + event.data.getRequestUrl())console.log('isMainFrame:' + event.data.isMainFrame())console.log('isRedirect:' + event.data.isRedirect())console.log('isRequestGesture:' + event.data.isRequestGesture())return true})}}
}
最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。
这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。
希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!
获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙(Harmony NEXT)最新学习路线

-
HarmonOS基础技能

- HarmonOS就业必备技能

- HarmonOS多媒体技术

- 鸿蒙NaPi组件进阶

- HarmonOS高级技能

- 初识HarmonOS内核

- 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》
- ArkTS语言
- 安装DevEco Studio
- 运用你的第一个ArkTS应用
- ArkUI声明式UI开发
- .……

《鸿蒙开发进阶》
- Stage模型入门
- 网络管理
- 数据管理
- 电话服务
- 分布式应用开发
- 通知与窗口管理
- 多媒体技术
- 安全技能
- 任务管理
- WebGL
- 国际化开发
- 应用测试
- DFX面向未来设计
- 鸿蒙系统移植和裁剪定制
- ……

《鸿蒙进阶实战》
- ArkTS实践
- UIAbility应用
- 网络案例
- ……

获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。

相关文章:
鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Web)中篇
onBeforeUnload onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) > boolean) 刷新或关闭场景下,在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点,才会触发此回调。 参数…...
静默安装OGG21.3微服务版本FOR ORACLE版本
静默安装OGG21.3微服务版本FOR ORACLE版本 silent install ogg21.3 for oracle 某度找来找去都没有找到一份可靠的静默安装OGG21.3微服务版本的案例,特别难受,为此将自己静默安装的步骤一步步贴出来分享给大家,请指点,谢谢。 至…...
[二分查找]LeetCode2040:两个有序数组的第 K 小乘积
本文涉及的基础知识点 二分查找算法合集 题目 给你两个 从小到大排好序 且下标从 0 开始的整数数组 nums1 和 nums2 以及一个整数 k ,请你返回第 k (从 1 开始编号)小的 nums1[i] * nums2[j] 的乘积,其中 0 < i < nums1.…...
【Godot4.2】颜色完全使用手册
概述 本篇简单汇总Godot中的颜色的构造和使用,内容包括了: RGB、RGBA,HSV以及HTML16进制颜色值、颜色常量等形式构造颜色颜色的运算以及取反、插值用类型化数组、紧缩数组或PNG图片形式存储多个颜色 构造颜色 因为颜色是一种视觉元素&…...
Blocks —— 《Objective-C高级编程 iOS与OS X多线程和内存管理》
目录 Blocks概要什么是BlocksOC转C方法关于几种变量的特点 Blocks模式Block语法Block类型 变量截获局部变量值__block说明符截获的局部变量 Blocks的实现Block的实质 Blocks概要 什么是Blocks Blocks是C语言的扩充功能,即带有局部变量的匿名函数。 顾名思义&#x…...
Python零基础---爬虫技术相关
python 爬虫技术,关于数据相关的拆解: 1.对页面结构的拆解 2.数据包的分析(是否加密了参数)(Md5 aes)难易程度,价格 3.对接客户(433,334) # 数据库 CSV 4.结单(发一部分数据&a…...
利用 STM32 TIMER 触发 ADC 实现分组转换
1、问题描述 使用 STM32G4 系列芯片开发产品,用到其中一个 ADC 模块的多个通道,他希望使 用 TIMER 来定时触发这几个通道的转换。不过他有两点疑惑。第一,他期望定时器触发这几个 通道是每触发一次则只转换一个通道,这样依次触发…...
2024 年(第 12 届)“泰迪杯”数据挖掘挑战赛——B 题:基于多模态特征融合的图像文本检索完整思路与源代码分享
一、问题背景 随着近年来智能终端设备和多媒体社交网络平台的飞速发展,多媒体数据呈现海量增长 的趋势,使当今主流的社交网络平台充斥着海量的文本、图像等多模态媒体数据,也使得人 们对不同模态数据之间互相检索的需求不断增加。有效的信…...
Java12~14 switch语法
JDK8以后的语法没学习了,现在时代发展这么快,所以得加紧时间学习了。JDK12只有一个特性就是switch语法,算是比较容易学习的一个版本吧。总体来说就是三部分内容。具体内容可以看JEP-325的内容。 箭头语法 每个case可以放箭头了。以下是一个例…...
小狐狸ChatGPT智能聊天系统源码v2.7.6全开源Vue前后端+后端PHP
测试环境包括Linux系统的CentOS 7.6,宝塔面板,PHP 7.4和MySQL 5.6。网站的根目录是public, 使用thinkPHP进行伪静态处理,并已开启SSL证书。 该系统具有多种功能,包括文章改写、广告营销文案创作、编程助手、办公达人…...
The Rise and Potential of Large Language Model Based Agents: A Survey
OpenAI AI的应用研究主管Lilian Weng发布了关于AI Agents的《大语言模型(LLM)支持的自主代理》,在文章中她定义了基于LLM构建AI Agents的应用框架:AgentLLM(大型语言模型)记忆(Memory࿰…...
【GPT-SOVITS-06】特征工程-HuBert原理
说明:该系列文章从本人知乎账号迁入,主要原因是知乎图片附件过于模糊。 知乎专栏地址: 语音生成专栏 系列文章地址: 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…...
ros小问题之差速轮式机器人轮子不显示(rviz gazebo)
在rviz及gazebo练习差速轮式机器人时,很奇怪,只有个机器人的底板及底部的两个万向轮,如下图, 后来查看相关.xacro文件,里面是引用包含了轮子的xacro文件,只需传入不同的参数即可调用生成不同位置的轮子&…...
网络安全实训Day5
写在前面 昨天忘更新了......讲的内容不多,就一个NAT。 之前记的NAT的内容:blog.csdn.net/Yisitelz/article/details/131840119 网络安全实训-网络工程 NAT 公网地址与私网地址 公网地址 可以在互联网上被寻址,由运营商统一分配全球唯一的I…...
【Unity入门】详解Unity中的射线与射线检测
目录 前言一、射线的创建方法二、射线检测1、Raycast()Raycast()不使用射线RayRaycast()使用射线Ray 2、RaycastAll()使用射线RayRaycastAll() 不使用射线Ray 3、射线的碰撞信息 三、示例四、具体使用场景射线的调试方法1、Debug.DrawLine()2、Debug.DrawRay利用Gizmos 前言 碰…...
实验11-2-5 链表拼接(PTA)
题目: 本题要求实现一个合并两个有序链表的简单函数。链表结点定义如下: struct ListNode {int data;struct ListNode *next; }; 函数接口定义: struct ListNode *mergelists(struct ListNode *list1, struct ListNode *list2); 其中lis…...
Mybatis Plus + Spring 分包配置 ClickHouse 和 Mysql 双数据源
目录 一、背景 二、各个配置文件总览(文件位置因人而异) 2.1 DataSourceConfig 2.2 MybatisClickHouseConfig (ClickHouse 配置类) 2.3 MybatisMysqlConfig(Mysql 配置类) 2.4 application.propertie…...
27-3 文件上传漏洞 - 文件类型绕过(后端绕过)
环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 导语 后端校验由开发决定是检测文件后缀,还是文件内容。 文件类型绕过(Content-Type) 1)MIME 类型 定义:MIME(Multipurpose Internet Mail Extensions)类型是一种标准,…...
widget一些控件的使用
QRadioButton使用 先使用ui界面拖拽创建radio button #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->male->setChecked(true);//选中按钮ui->o…...
Python基础(七)之数值类型集合
Python基础(七)之数值类型集合 1、简介 集合,英文set。 集合(set)是由一个或多个元素组成,是一个无序且不可重复的序列。 集合(set)只存储不可变的数据类型,如Number、…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
Monorepo架构: Nx Cloud 扩展能力与缓存加速
借助 Nx Cloud 实现项目协同与加速构建 1 ) 缓存工作原理分析 在了解了本地缓存和远程缓存之后,我们来探究缓存是如何工作的。以计算文件的哈希串为例,若后续运行任务时文件哈希串未变,系统会直接使用对应的输出和制品文件。 2 …...
