From 021b606dc8cf19ac209072e9004f0f27de78e4a7 Mon Sep 17 00:00:00 2001 From: liuliu Date: Tue, 5 Sep 2023 16:20:25 +0800 Subject: [PATCH] arkui-ts Signed-off-by: liuliu Change-Id: I1d0fcc2a1771fd115bf22064b1204cd709b0b0e6 --- .../arkui-ts/ts-basic-components-web.md | 614 ++++++++++-------- .../ts-basic-gestures-longpressgesture.md | 4 +- .../arkui-ts/ts-basic-gestures-pangesture.md | 10 +- .../ts-basic-gestures-pinchgesture.md | 12 +- .../ts-basic-gestures-rotationgesture.md | 8 +- .../ts-basic-gestures-swipegesture.md | 8 +- .../arkui-ts/ts-basic-gestures-tapgesture.md | 6 +- .../arkui-ts/ts-canvasrenderingcontext2d.md | 26 +- .../arkui-ts/ts-combined-gestures.md | 12 +- .../ts-components-canvas-canvasgradient.md | 2 +- .../ts-components-canvas-canvaspattern.md | 12 +- .../ts-components-canvas-imagedata.md | 2 +- .../arkui-ts/ts-components-canvas-matrix2d.md | 54 +- .../arkui-ts/ts-components-offscreencanvas.md | 16 +- .../arkui-ts/ts-container-alphabet-indexer.md | 16 +- 15 files changed, 463 insertions(+), 339 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md index 3886c73bb4..54fc2b8181 100755 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -86,11 +86,37 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) 加载沙箱路径下的本地资源文件 - 1.通过[globalthis](../../application-models/uiability-data-sync-with-ui.md#uiability和page之间使用globalthis)获取沙箱路径。 + 1.通过构造的单例对象GlobalContext获取沙箱路径。 + ```ts + // GlobalContext.ts + export class GlobalContext { + private constructor() {} + private static instance: GlobalContext; + private _objects = new Map(); + + 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); + } + } + ``` + ```ts // xxx.ets import web_webview from '@ohos.web.webview' - let url = 'file://' + globalThis.filesDir + '/index.html' + import { GlobalContext } from '../GlobalContext' + + let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html' @Entry @Component @@ -110,13 +136,16 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ```ts // xxx.ts import UIAbility from '@ohos.app.ability.UIAbility'; + import AbilityConstant from '@ohos.app.ability.AbilityConstant'; + import Want from '@ohos.app.ability.Want'; import web_webview from '@ohos.web.webview'; + import { GlobalContext } from '../GlobalContext' export default class EntryAbility extends UIAbility { - onCreate(want, launchParam) { - // 通过在globalThis对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。 - globalThis.filesDir = this.context.filesDir - console.log("Sandbox path is " + globalThis.filesDir) + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { + // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。 + GlobalContext.getContext().setObject("filesDir", this.context.filesDir); + console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir")) } } ``` @@ -250,21 +279,27 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr // xxx.ets import web_webview from '@ohos.web.webview' + class TestObj { + constructor() { + } + + test(data1: string, data2: string, data3: string): string { + console.log("data1:" + data1) + console.log("data2:" + data2) + console.log("data3:" + data3) + return "AceString" + } + + toString(): void { + console.log('toString' + "interface instead.") + } + } + @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() - testObj = { - test: (data1, data2, data3) => { - console.log("data1:" + data1) - console.log("data2:" + data2) - console.log("data3:" + data3) - return "AceString" - }, - toString: () => { - console.log('toString' + "interface instead.") - } - } + testObj = new TestObj(); build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1332,8 +1367,8 @@ allowWindowOpenMethod(flag: boolean) //在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。 @CustomDialog struct NewWebViewComp { - controller: CustomDialogController - webviewController1: web_webview.WebviewController + controller?: CustomDialogController + webviewController1: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: "", controller: this.webviewController1 }) @@ -1341,7 +1376,9 @@ allowWindowOpenMethod(flag: boolean) .multiWindowAccess(false) .onWindowExit(()=> { console.info("NewWebViewComp onWindowExit") - this.controller.close() + if (this.controller) { + this.controller.close() + } }) } } @@ -1351,7 +1388,7 @@ allowWindowOpenMethod(flag: boolean) @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() - dialogController: CustomDialogController = null + dialogController: CustomDialogController | null = null build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1454,27 +1491,29 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) = Column() { Web({ src: $rawfile("index.html"), controller: this.controller }) .onAlert((event) => { - console.log("event.url:" + event.url) - console.log("event.message:" + event.message) - AlertDialog.show({ - title: 'onAlert', - message: 'text', - primaryButton: { - value: 'cancel', - action: () => { + if (event) { + console.log("event.url:" + event.url) + console.log("event.message:" + event.message) + AlertDialog.show({ + title: 'onAlert', + message: 'text', + primaryButton: { + value: 'cancel', + action: () => { + event.result.handleCancel() + } + }, + secondaryButton: { + value: 'ok', + action: () => { + event.result.handleConfirm() + } + }, + cancel: () => { event.result.handleCancel() } - }, - secondaryButton: { - value: 'ok', - action: () => { - event.result.handleConfirm() - } - }, - cancel: () => { - event.result.handleCancel() - } - }) + }) + } return true }) } @@ -1537,27 +1576,29 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu Column() { Web({ src: $rawfile("index.html"), controller: this.controller }) .onBeforeUnload((event) => { - console.log("event.url:" + event.url) - console.log("event.message:" + event.message) - AlertDialog.show({ - title: 'onBeforeUnload', - message: 'text', - primaryButton: { - value: 'cancel', - action: () => { + 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() } - }, - secondaryButton: { - value: 'ok', - action: () => { - event.result.handleConfirm() - } - }, - cancel: () => { - event.result.handleCancel() - } - }) + }) + } return true }) } @@ -1620,27 +1661,29 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) Column() { Web({ src: $rawfile("index.html"), controller: this.controller }) .onConfirm((event) => { - console.log("event.url:" + event.url) - console.log("event.message:" + event.message) - AlertDialog.show({ - title: 'onConfirm', - message: 'text', - primaryButton: { - value: 'cancel', - action: () => { + 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() } - }, - secondaryButton: { - value: 'ok', - action: () => { - event.result.handleConfirm() - } - }, - cancel: () => { - event.result.handleCancel() - } - }) + }) + } return true }) } @@ -1710,28 +1753,30 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul Column() { Web({ src: $rawfile("index.html"), controller: this.controller }) .onPrompt((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: () => { + 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() } - }, - secondaryButton: { - value: 'ok', - action: () => { - event.result.handlePromptConfirm(event.value) - } - }, - cancel: () => { - event.result.handleCancel() - } - }) + }) + } return true }) } @@ -1797,10 +1842,12 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean) Column() { Web({ src: 'www.example.com', controller: this.controller }) .onConsole((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()) + 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 }) } @@ -1839,11 +1886,13 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp Column() { Web({ src: 'www.example.com', controller: this.controller }) .onDownloadStart((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) + 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) + } }) } } @@ -1878,17 +1927,19 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou Column() { Web({ src: 'www.example.com', controller: this.controller }) .onErrorReceive((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) + 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) + } } }) } @@ -1924,24 +1975,26 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W Column() { Web({ src: 'www.example.com', controller: this.controller }) .onHttpErrorReceive((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) + 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) + } } }) } @@ -1976,7 +2029,9 @@ onPageBegin(callback: (event?: { url: string }) => void) Column() { Web({ src: 'www.example.com', controller: this.controller }) .onPageBegin((event) => { - console.log('url:' + event.url) + if (event) { + console.log('url:' + event.url) + } }) } } @@ -2010,7 +2065,9 @@ onPageEnd(callback: (event?: { url: string }) => void) Column() { Web({ src: 'www.example.com', controller: this.controller }) .onPageEnd((event) => { - console.log('url:' + event.url) + if (event) { + console.log('url:' + event.url) + } }) } } @@ -2044,7 +2101,9 @@ onProgressChange(callback: (event?: { newProgress: number }) => void) Column() { Web({ src: 'www.example.com', controller: this.controller }) .onProgressChange((event) => { - console.log('newProgress:' + event.newProgress) + if (event) { + console.log('newProgress:' + event.newProgress) + } }) } } @@ -2078,7 +2137,9 @@ onTitleReceive(callback: (event?: { title: string }) => void) Column() { Web({ src: 'www.example.com', controller: this.controller }) .onTitleReceive((event) => { - console.log('title:' + event.title) + if (event) { + console.log('title:' + event.title) + } }) } } @@ -2113,7 +2174,9 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean Column() { Web({ src: 'www.example.com', controller: this.controller }) .onRefreshAccessedHistory((event) => { - console.log('url:' + event.url + ' isReload:' + event.isRefreshed) + if (event) { + console.log('url:' + event.url + ' isReload:' + event.isRefreshed) + } }) } } @@ -2167,7 +2230,9 @@ onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => voi Column() { Web({ src: 'chrome://crash/', controller: this.controller }) .onRenderExited((event) => { - console.log('reason:' + event.renderExitReason) + if (event) { + console.log('reason:' + event.renderExitReason) + } }) } } @@ -2199,6 +2264,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector // xxx.ets import web_webview from '@ohos.web.webview'; import picker from '@ohos.file.picker'; + import { BusinessError } from '@ohos.base'; @Entry @Component @@ -2211,13 +2277,15 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector .onShowFileSelector((event) => { console.log('MyFileUploader onShowFileSelector invoked') const documentSelectOptions = new picker.DocumentSelectOptions(); - let uri = null; + 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); - event.result.handleFileList([uri]); - }).catch((err) => { + 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 @@ -2343,7 +2411,9 @@ onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => b Column() { Web({ src: 'www.example.com', controller: this.controller }) .onUrlLoadIntercept((event) => { - console.log('onUrlLoadIntercept ' + event.data.toString()) + if (event) { + console.log('onUrlLoadIntercept ' + event.data.toString()) + } return true }) } @@ -2394,16 +2464,18 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso Column() { Web({ src: 'www.example.com', controller: this.controller }) .onInterceptRequest((event) => { - console.log('url:' + event.request.getRequestUrl()) - var head1:Header = { + if (event) { + console.log('url:' + event.request.getRequestUrl()) + } + let head1:Header = { headerKey:"Connection", headerValue:"keep-alive" } - var head2:Header = { + let head2:Header = { headerKey:"Cache-Control", headerValue:"no-cache" } - var length = this.heads.push(head1) + let length = this.heads.push(head1) length = this.heads.push(head2) this.responseweb.setResponseHeader(this.heads) this.responseweb.setResponseData(this.webdata) @@ -2453,34 +2525,36 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r Column() { Web({ src: 'www.example.com', controller: this.controller }) .onHttpAuthRequest((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" - ) + 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() } - }, - cancel: () => { - event.handler.cancel() - } - }) + }) + } return true }) } @@ -2595,8 +2669,11 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH ```ts // 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 bundle from '@ohos.bundle' + import { GlobalContext } from '../GlobalContext' let uri = ""; @@ -2611,15 +2688,15 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH return CertManagerService.sInstance; } - async grantAppPm(callback) { + async grantAppPm(callback: (message: string) => void) { let message = ''; //注：com.example.myapplication需要写实际应用名称 let bundleInfo = await bundle.getBundleInfo("com.example.myapplication", bundle.BundleFlag.GET_BUNDLE_DEFAULT) let clientAppUid = bundleInfo.uid let appUid = clientAppUid.toString() - //注：globalThis.AbilityContext需要在MainAbility.ts文件的onCreate函数里添加globalThis.AbilityContext = this.context - await globalThis.AbilityContext.startAbilityForResult( + //注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context) + await GlobalContext.getContext().getObject("AbilityContext").startAbilityForResult( { bundleName: "com.ohos.certmanager", abilityName: "MainAbility", @@ -2627,10 +2704,12 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH parameters: { appUid: appUid, //传入申请应用的appUid } - }) - .then((data) => { - if (!data.resultCode) { - this.authUri = data.want.parameters.authUri; //授权成功后获取返回的authUri + } 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; @@ -2719,25 +2798,27 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void) Column() { Web({ src: 'www.example.com', controller: this.controller }) .onPermissionRequest((event) => { - AlertDialog.show({ - title: 'title', - message: 'text', - primaryButton: { - value: 'deny', - action: () => { + 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() } - }, - secondaryButton: { - value: 'onConfirm', - action: () => { - event.request.grant(event.request.getAccessibleResource()) - } - }, - cancel: () => { - event.request.deny() - } - }) + }) + } }) } } @@ -2777,8 +2858,10 @@ onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebCo Column() { Web({ src: 'www.example.com', controller: this.controller }) .onContextMenuShow((event) => { - console.info("x coord = " + event.param.x()) - console.info("link url = " + event.param.getLinkUrl()) + if (event) { + console.info("x coord = " + event.param.x()) + console.info("link url = " + event.param.getLinkUrl()) + } return true }) } @@ -2849,19 +2932,21 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio Web({ src:'www.example.com', controller:this.controller }) .geolocationAccess(true) .onGeolocationShow((event) => { - AlertDialog.show({ - title: 'title', - message: 'text', - confirm: { - value: 'onConfirm', - action: () => { - event.geolocation.invoke(event.origin, true, true) + 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) } - }, - cancel: () => { - event.geolocation.invoke(event.origin, false, true) - } - }) + }) + } }) } } @@ -2924,7 +3009,7 @@ onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void) @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() - handler: FullScreenExitHandler = null + handler: FullScreenExitHandler | null = null build() { Column() { Web({ src:'www.example.com', controller:this.controller }) @@ -2959,13 +3044,15 @@ onFullScreenExit(callback: () => void) @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() - handler: FullScreenExitHandler = null + handler: FullScreenExitHandler | null = null build() { Column() { Web({ src:'www.example.com', controller:this.controller }) .onFullScreenExit(() => { console.log("onFullScreenExit...") - this.handler.exitFullScreen() + if (this.handler) { + this.handler.exitFullScreen() + } }) .onFullScreenEnter((event) => { this.handler = event.handler @@ -3001,8 +3088,8 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU //在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。 @CustomDialog struct NewWebViewComp { - controller: CustomDialogController - webviewController1: web_webview.WebviewController + controller?: CustomDialogController + webviewController1: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: "", controller: this.webviewController1 }) @@ -3010,7 +3097,9 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU .multiWindowAccess(false) .onWindowExit(()=> { console.info("NewWebViewComp onWindowExit") - this.controller.close() + if (this.controller) { + this.controller.close() + } }) } } @@ -3020,7 +3109,7 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() - dialogController: CustomDialogController = null + dialogController: CustomDialogController | null = null build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -3109,9 +3198,11 @@ onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMa 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) - }) + } + }) } } } @@ -3279,7 +3370,7 @@ onFaviconReceived(callback: (event: {favicon: image.PixelMap}) => void) @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() - @State icon: image.PixelMap = undefined; + @State icon: image.PixelMap | undefined = undefined; build() { Column() { Web({ src:'www.example.com', controller: this.controller }) @@ -3353,9 +3444,11 @@ onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstCo Column() { Web({ src:'www.example.com', controller: this.controller }) .onFirstContentfulPaint(event => { - console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + + if (event) { + console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + event.navigationStartTick + ", [firstContentfulPaintMs]:" + event.firstContentfulPaintMs) + } }) } } @@ -3459,25 +3552,27 @@ onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) => Column() { Web({ src: 'www.example.com', controller: this.controller }) .onScreenCaptureRequest((event) => { - AlertDialog.show({ - title: 'title: ' + event.handler.getOrigin(), - message: 'text', - primaryButton: { - value: 'deny', - action: () => { + if (event) { + AlertDialog.show({ + title: 'title: ' + event.handler.getOrigin(), + message: 'text', + primaryButton: { + value: 'deny', + action: () => { + event.handler.deny() + } + }, + secondaryButton: { + value: 'onConfirm', + action: () => { + event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN }) + } + }, + cancel: () => { event.handler.deny() } - }, - secondaryButton: { - value: 'onConfirm', - action: () => { - event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN }) - } - }, - cancel: () => { - event.handler.deny() - } - }) + }) + } }) } } @@ -3552,6 +3647,7 @@ onControllerAttached(callback: () => void) ```ts // xxx.ets import web_webview from '@ohos.web.webview' + import { BusinessError } from '@ohos.base'; @Entry @Component @@ -3563,10 +3659,12 @@ onControllerAttached(callback: () => void) Web({ src: $rawfile("index.html"), controller: this.controller }) .onControllerAttached(() => { try { - let id = this.controller.getWebId(); - console.log("id: " + id); + let id = this.controller.getWebId(); + console.log("id: " + id); } catch (error) { - console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + let code = (error as BusinessError).code; + let message = (error as BusinessError).message; + console.error(`ErrorCode: ${code}, Message: ${message}`); } }) } @@ -4627,8 +4725,8 @@ cancel(): void ### 创建对象 -``` -webController: WebController = new WebController() +```ts +let webController: WebController = new WebController() ``` ### getCookieManager9+ @@ -5167,18 +5265,24 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr ```ts // xxx.ets + class TestObj { + constructor() { + } + + test(): string { + return "ArkUI Web Component" + } + + toString(): void { + console.log('Web Component toString') + } + } + @Entry @Component struct Index { controller: WebController = new WebController() - testObj = { - test: (data) => { - return "ArkUI Web Component" - }, - toString: () => { - console.log('Web Component toString') - } - } + testObj = new TestObj(); build() { Column() { Row() { @@ -5252,7 +5356,9 @@ runJavaScript(options: { script: string, callback?: (result: string) => void }) this.webResult = result console.info(`The test() return value is: ${result}`) }}) - console.info('url: ', e.url) + if (e) { + console.info('url: ', e.url) + } }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md index 1073d8738d..314e3a816b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md @@ -45,8 +45,8 @@ struct LongPressGestureExample { .gesture( LongPressGesture({ repeat: true }) // 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms） - .onAction((event: GestureEvent) => { - if (event.repeat) { + .onAction((event?: GestureEvent) => { + if (event && event.repeat) { this.count++ } }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index 40fe5b82e8..08c399b319 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -95,12 +95,14 @@ struct PanGestureExample { // 左右拖动触发该手势事件 .gesture( PanGesture(this.panOption) - .onActionStart((event: GestureEvent) => { + .onActionStart((event?: GestureEvent) => { console.info('Pan start') }) - .onActionUpdate((event: GestureEvent) => { - this.offsetX = this.positionX + event.offsetX - this.offsetY = this.positionY + event.offsetY + .onActionUpdate((event?: GestureEvent) => { + if (event) { + this.offsetX = this.positionX + event.offsetX + this.offsetY = this.positionY + event.offsetY + } }) .onActionEnd(() => { this.positionX = this.offsetX diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md index 59a11311a2..dbd786de38 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md @@ -56,13 +56,15 @@ struct PinchGestureExample { // 三指捏合触发该手势事件 .gesture( PinchGesture({ fingers: 3 }) - .onActionStart((event: GestureEvent) => { + .onActionStart((event?: GestureEvent) => { console.info('Pinch start') }) - .onActionUpdate((event: GestureEvent) => { - this.scaleValue = this.pinchValue * event.scale - this.pinchX = event.pinchCenterX - this.pinchY = event.pinchCenterY + .onActionUpdate((event?: GestureEvent) => { + if (event) { + this.scaleValue = this.pinchValue * event.scale + this.pinchX = event.pinchCenterX + this.pinchY = event.pinchCenterY + } }) .onActionEnd(() => { this.pinchValue = this.scaleValue diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md index 3c4a56b76c..b19e3f1abd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md @@ -53,11 +53,13 @@ struct RotationGestureExample { // 双指旋转触发该手势事件 .gesture( RotationGesture() - .onActionStart((event: GestureEvent) => { + .onActionStart((event?: GestureEvent) => { console.info('Rotation start') }) - .onActionUpdate((event: GestureEvent) => { - this.angle = this.rotateValue + event.angle + .onActionUpdate((event?: GestureEvent) => { + if (event) { + this.angle = this.rotateValue + event.angle + } }) .onActionEnd(() => { this.rotateValue = this.angle diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md index 6a2daf6dff..4cb4716503 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md @@ -59,9 +59,11 @@ struct SwipeGestureExample { // 单指竖直方向滑动时触发该事件 .gesture( SwipeGesture({ direction: SwipeDirection.Vertical }) - .onAction((event: GestureEvent) => { - this.speed = event.speed - this.rotateAngle = event.angle + .onAction((event?: GestureEvent) => { + if (event) { + this.speed = event.speed + this.rotateAngle = event.angle + } }) ) }.width('100%') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md index e8752dc730..da9cfa9b9c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md @@ -41,8 +41,10 @@ struct TapGestureExample { Text('Click twice').fontSize(28) .gesture( TapGesture({ count: 2 }) - .onAction((event: GestureEvent) => { - this.value = JSON.stringify(event.fingerList[0]) + .onAction((event?: GestureEvent) => { + if (event) { + this.value = JSON.stringify(event.fingerList[0]) + } }) ) Text(this.value) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 1336db1e28..de95f13a6d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -1423,8 +1423,10 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - var pattern = this.context.createPattern(this.img, 'repeat') - this.context.fillStyle = pattern + let pattern = this.context.createPattern(this.img, 'repeat') + if (pattern) { + this.context.fillStyle = pattern + } this.context.fillRect(0, 0, 200, 200) }) } @@ -2421,7 +2423,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData .backgroundColor('#ffff00') .onReady(() =>{ this.context.drawImage(this.img,0,0,130,130) - var imagedata = this.context.getImageData(50,50,130,130) + let imagedata = this.context.getImageData(50,50,130,130) this.context.putImageData(imagedata,150,150) }) } @@ -2473,8 +2475,8 @@ putImageData(imageData: ImageData, dx: number | string, dy: number | string, dir .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - var imageData = this.context.createImageData(100, 100) - for (var i = 0; i < imageData.data.length; i += 4) { + let imageData = this.context.createImageData(100, 100) + for (let i = 0; i < imageData.data.length; i += 4) { imageData.data[i + 0] = 255 imageData.data[i + 1] = 0 imageData.data[i + 2] = 255 @@ -2626,15 +2628,15 @@ transferFromImageBitmap(bitmap: ImageBitmap): void .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - var imageData = this.offContext.createImageData(100, 100) - for (var i = 0; i < imageData.data.length; i += 4) { + let imageData = this.offContext.createImageData(100, 100) + for (let i = 0; i < imageData.data.length; i += 4) { imageData.data[i + 0] = 255 imageData.data[i + 1] = 0 imageData.data[i + 2] = 255 imageData.data[i + 3] = 255 } this.offContext.putImageData(imageData, 10, 10) - var image = this.offContext.transferToImageBitmap() + let image = this.offContext.transferToImageBitmap() this.context.transferFromImageBitmap(image) }) } @@ -2684,7 +2686,7 @@ toDataURL(type?: string, quality?: number): string .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - var dataURL = this.context.toDataURL() + let dataURL = this.context.toDataURL() }) } .width('100%') @@ -2808,7 +2810,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - var grad = this.context.createLinearGradient(50,0, 300,100) + let grad = this.context.createLinearGradient(50,0, 300,100) grad.addColorStop(0.0, '#ff0000') grad.addColorStop(0.5, '#ffffff') grad.addColorStop(1.0, '#00ff00') @@ -2861,7 +2863,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - var grad = this.context.createRadialGradient(200,200,50, 200,200,200) + let grad = this.context.createRadialGradient(200,200,50, 200,200,200) grad.addColorStop(0.0, '#ff0000') grad.addColorStop(0.5, '#ffffff') grad.addColorStop(1.0, '#00ff00') @@ -2908,7 +2910,7 @@ struct CanvasExample { .height('100%') .backgroundColor('#ffffff') .onReady(() => { - var grad = this.context.createConicGradient(0, 50, 80) + let grad = this.context.createConicGradient(0, 50, 80) grad.addColorStop(0.0, '#ff0000') grad.addColorStop(0.5, '#ffffff') grad.addColorStop(1.0, '#00ff00') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md index d1355645ec..32497c8f11 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -62,8 +62,8 @@ struct GestureGroupExample { // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件 GestureGroup(GestureMode.Sequence, LongPressGesture({ repeat: true }) - .onAction((event: GestureEvent) => { - if (event.repeat) { + .onAction((event?: GestureEvent) => { + if (event && event.repeat) { this.count++ } console.info('LongPress onAction') @@ -76,9 +76,11 @@ struct GestureGroupExample { this.borderStyles = BorderStyle.Dashed console.info('pan start') }) - .onActionUpdate((event: GestureEvent) => { - this.offsetX = this.positionX + event.offsetX - this.offsetY = this.positionY + event.offsetY + .onActionUpdate((event?: GestureEvent) => { + if (event) { + this.offsetX = this.positionX + event.offsetX + this.offsetY = this.positionY + event.offsetY + } console.info('pan update') }) .onActionEnd(() => { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index a817a3386b..70deb7b480 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -42,7 +42,7 @@ struct Page45 { .height('100%') .backgroundColor('#ffff00') .onReady(() => { - var grad = this.context.createLinearGradient(50, 0, 300, 100) + let grad = this.context.createLinearGradient(50, 0, 300, 100) grad.addColorStop(0.0, '#ff0000') grad.addColorStop(0.5, '#ffffff') grad.addColorStop(1.0, '#00ff00') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md index 5563ac5a2a..ddffc92dfa 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md @@ -33,7 +33,7 @@ struct CanvasPatternPage { private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private matrix: Matrix2D = new Matrix2D() private img: ImageBitmap = new ImageBitmap("common/pattern.jpg") - private pattern : CanvasPattern + private pattern : CanvasPattern | null = null build() { Column() { @@ -43,7 +43,9 @@ struct CanvasPatternPage { this.matrix.scaleX = 1 this.matrix.translateX = 50 this.matrix.translateY = 200 - this.pattern.setTransform(this.matrix) + if (this.pattern) { + this.pattern.setTransform(this.matrix) + } this.context.fillRect(0, 0, 480, 720) }) .width("45%") @@ -54,12 +56,14 @@ struct CanvasPatternPage { .backgroundColor('#FFFFFF') .onReady(() => { this.pattern = this.context.createPattern(this.img, 'no-repeat') - this.context.fillStyle = this.pattern this.matrix.scaleY = 0.5 this.matrix.scaleX = 0.5 this.matrix.translateX = 50 this.matrix.translateY = 50 - this.pattern.setTransform(this.matrix) + if (this.pattern) { + this.context.fillStyle = this.pattern + this.pattern.setTransform(this.matrix) + } this.context.fillRect(0, 0, 480, 720) }) } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md index 8f7b8da860..2bb1c7318c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md @@ -39,7 +39,7 @@ ImageData对象可以存储canvas渲染的像素数据。 .backgroundColor('#ffff00') .onReady(() =>{ this.context.drawImage(this.img,0,0,130,130) - var imagedata = this.context.getImageData(50,50,130,130) + let imagedata = this.context.getImageData(50,50,130,130) this.context.putImageData(imagedata,150,150) }) } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md index 0a2d7a3044..f398b2a53d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md @@ -36,7 +36,7 @@ Matrix2D() struct Matrix2DScaleX { @State message: string = 'Matrix2D ScaleX' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -50,7 +50,7 @@ struct Matrix2DScaleX { .fontWeight(FontWeight.Bold) Button("Set scaleX") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.scaleX = 1 this.printMatrix(this.message, matrix) }) @@ -71,7 +71,7 @@ struct Matrix2DScaleX { struct Matrix2DScaleY { @State message: string = 'Matrix2D ScaleY' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -85,7 +85,7 @@ struct Matrix2DScaleY { .fontWeight(FontWeight.Bold) Button("Set scaleY") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.scaleY = 1 this.printMatrix(this.message, matrix) }) @@ -106,7 +106,7 @@ struct Matrix2DScaleY { struct Matrix2DRotateX { @State message: string = 'Matrix2D RotateX' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -120,7 +120,7 @@ struct Matrix2DRotateX { .fontWeight(FontWeight.Bold) Button("Set rotateX") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.rotateX = Math.sin(45 / Math.PI) this.printMatrix(this.message, matrix) }) @@ -141,7 +141,7 @@ struct Matrix2DRotateX { struct Matrix2DRotateY { @State message: string = 'Matrix2D RotateY' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -155,7 +155,7 @@ struct Matrix2DRotateY { .fontWeight(FontWeight.Bold) Button("Set rotateY") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.rotateY = Math.cos(45 / Math.PI) this.printMatrix(this.message, matrix) }) @@ -176,7 +176,7 @@ struct Matrix2DRotateY { struct Matrix2DTranslateX { @State message: string = 'Matrix2D TranslateX' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -190,7 +190,7 @@ struct Matrix2DTranslateX { .fontWeight(FontWeight.Bold) Button("Set translateX") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.translateX = 10 this.printMatrix(this.message, matrix) }) @@ -211,7 +211,7 @@ struct Matrix2DTranslateX { struct Matrix2DTranslateY { @State message: string = 'Matrix2D TranslateY' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -225,7 +225,7 @@ struct Matrix2DTranslateY { .fontWeight(FontWeight.Bold) Button("Set translateY") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.translateY = 10 this.printMatrix(this.message, matrix) }) @@ -262,7 +262,7 @@ identity(): Matrix2D struct Matrix2DIdentity { @State message: string = 'Matrix2D Identity' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -276,7 +276,7 @@ struct Matrix2DIdentity { .fontWeight(FontWeight.Bold) Button("matrix identity") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix = matrix.identity() this.printMatrix(this.message, matrix) }) @@ -311,7 +311,7 @@ invert(): Matrix2D struct Matrix2DInvert { @State message: string = 'Matrix2D Invert' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -325,7 +325,7 @@ struct Matrix2DInvert { .fontWeight(FontWeight.Bold) Button("matrix invert") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.scaleX = 2 matrix.scaleY = 1 matrix.rotateX = 0 @@ -374,7 +374,7 @@ multiply(other?: Matrix2D): Matrix2D struct Matrix2DMultiply { @State message: string = 'Matrix2D Multiply' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -388,14 +388,14 @@ struct Matrix2DMultiply { .fontWeight(FontWeight.Bold) Button("matrix multiply") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.scaleX = 1 matrix.scaleY = 1 matrix.rotateX = 0 matrix.rotateY = 0 matrix.translateX = 0 matrix.translateY = 0 - var other: Matrix2D = new Matrix2D() + let other: Matrix2D = new Matrix2D() other.scaleX = 2 other.scaleY = 2 other.rotateX = 0 @@ -445,7 +445,7 @@ rotate(rx?: number, ry?: number): Matrix2D struct Matrix2DRotate { @State message: string = 'Matrix2D Rotate' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -459,7 +459,7 @@ struct Matrix2DRotate { .fontWeight(FontWeight.Bold) Button("matrix rotate") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.scaleX = 1 matrix.scaleY = 1 matrix.rotateX = 0 @@ -508,7 +508,7 @@ rotate(degree: number, rx?: number, ry?: number): Matrix2D struct Matrix2DRotate { @State message: string = 'Matrix2D Rotate' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -522,7 +522,7 @@ struct Matrix2DRotate { .fontWeight(FontWeight.Bold) Button("matrix rotate") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.scaleX = 1 matrix.scaleY = 1 matrix.rotateX = 0 @@ -570,7 +570,7 @@ translate(tx?: number, ty?: number): Matrix2D struct Matrix2DTranslate { @State message: string = 'Matrix2D Translate' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -584,7 +584,7 @@ struct Matrix2DTranslate { .fontWeight(FontWeight.Bold) Button("matrix translate") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.scaleX = 1 matrix.scaleY = 1 matrix.rotateX = 0 @@ -632,7 +632,7 @@ scale(sx?: number, sy?: number): Matrix2D struct Matrix2DScale { @State message: string = 'Matrix2D Scale' - printMatrix(title, matrix) { + printMatrix(title: string, matrix: Matrix2D) { console.log(title) console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY + ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY + @@ -646,7 +646,7 @@ struct Matrix2DScale { .fontWeight(FontWeight.Bold) Button("matrix scale") .onClick(() => { - var matrix : Matrix2D = new Matrix2D() + let matrix : Matrix2D = new Matrix2D() matrix.scaleX = 1 matrix.scaleY = 1 matrix.rotateX = 0 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md index dc650cfb43..4edfdbcc57 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md @@ -55,10 +55,10 @@ struct OffscreenCanvasPage { .borderColor('#00FF00') .backgroundColor('#FFFFFF') .onReady(() => { - var offContext = this.offCanvas.getContext("2d", this.settings) + let offContext = this.offCanvas.getContext("2d", this.settings) offContext.fillStyle = '#CDCDCD' offContext.fillRect(0, 0, this.offCanvas.width, 150) - var image = this.offCanvas.transferToImageBitmap() + let image = this.offCanvas.transferToImageBitmap() this.context.setTransform(1, 0, 0, 1, 50, 200) this.context.transferFromImageBitmap(image) }) @@ -91,10 +91,10 @@ struct OffscreenCanvasPage { .borderColor('#00FF00') .backgroundColor('#FFFFFF') .onReady(() => { - var offContext = this.offCanvas.getContext("2d", this.settings) + let offContext = this.offCanvas.getContext("2d", this.settings) offContext.fillStyle = '#CDCDCD' offContext.fillRect(0, 0, 100, this.offCanvas.height) - var image = this.offCanvas.transferToImageBitmap() + let image = this.offCanvas.transferToImageBitmap() this.context.setTransform(1, 0, 0, 1, 50, 200) this.context.transferFromImageBitmap(image) }) @@ -142,13 +142,13 @@ struct OffscreenCanvasPage { .borderColor('#00FF00') .backgroundColor('#FFFFFF') .onReady(() => { - var offContext = this.offCanvas.getContext("2d", this.settings) + let offContext = this.offCanvas.getContext("2d", this.settings) offContext.fillStyle = '#CDCDCD' offContext.fillRect(0, 0, 300, 500) offContext.fillStyle = '#000000' offContext.font = '70px serif bold' offContext.fillText("Offscreen : Hello World!", 20, 60) - var image = this.offCanvas.transferToImageBitmap() + let image = this.offCanvas.transferToImageBitmap() this.context.transferFromImageBitmap(image) }) } @@ -197,7 +197,7 @@ struct OffscreenCanvasExamplePage { .height('100%') .backgroundColor('#FFFFFF') .onReady(() => { - var offContext = this.offscreenCanvas.getContext("2d", this.settings) + let offContext = this.offscreenCanvas.getContext("2d", this.settings) offContext.font = '70px sans-serif' offContext.fillText("Offscreen : Hello World!", 20, 60) offContext.fillStyle = "#0000ff" @@ -217,7 +217,7 @@ struct OffscreenCanvasExamplePage { offContext.stroke() offContext.fillStyle = '#FF00FF' offContext.fillRect(100, 100, 60, 60) - var imageData = this.offscreenCanvas.transferToImageBitmap() + let imageData = this.offscreenCanvas.transferToImageBitmap() this.context.transferFromImageBitmap(imageData) }) }.width('100%').height('100%') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md index 01aeebc2d1..b0027e0379 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md @@ -86,7 +86,7 @@ struct AlphabetIndexerSample { Stack({ alignContent: Alignment.Start }) { Row() { List({ space: 20, initialIndex: 0 }) { - ForEach(this.arrayA, (item) => { + ForEach(this.arrayA, (item: string) => { ListItem() { Text(item) .width('80%') @@ -94,9 +94,9 @@ struct AlphabetIndexerSample { .fontSize(30) .textAlign(TextAlign.Center) }.editable(true) - }, item => item) + }, (item: string) => item) - ForEach(this.arrayB, (item) => { + ForEach(this.arrayB, (item: string) => { ListItem() { Text(item) .width('80%') @@ -104,9 +104,9 @@ struct AlphabetIndexerSample { .fontSize(30) .textAlign(TextAlign.Center) }.editable(true) - }, item => item) + }, (item: string) => item) - ForEach(this.arrayC, (item) => { + ForEach(this.arrayC, (item: string) => { ListItem() { Text(item) .width('80%') @@ -114,9 +114,9 @@ struct AlphabetIndexerSample { .fontSize(30) .textAlign(TextAlign.Center) }.editable(true) - }, item => item) + }, (item: string) => item) - ForEach(this.arrayL, (item) => { + ForEach(this.arrayL, (item: string) => { ListItem() { Text(item) .width('80%') @@ -124,7 +124,7 @@ struct AlphabetIndexerSample { .fontSize(30) .textAlign(TextAlign.Center) }.editable(true) - }, item => item) + }, (item: string) => item) } .width('50%') .height('100%') -- GitLab