1、HarmonyOS Web 组件本地资源跨域问题？
关于资源跨域问题的解决，可以参考以下官网文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5
方法一
为了使 Web 组件能够成功访问跨域资源，开发者应采用 http 或 https 等协议，替代原先使用的 file 或 resource 协议进行加载。其中，替代的 url 域名为自定义构造的仅供个人或者组织使用的域名，以避免与互联网上实际存在的域名产生冲突。同时，开发者需利用 Web 组件的 onInterceptRequest 方法，对本地资源进行拦截和相应的替换。
以下结合示例说明如何解决本地资源跨域访问失败的问题。其中，index.html 和 js/script.js 置于工程中的 rawfile 目录下。如果使用 resource 协议访问 index.html，js/script.js 将因跨域而被拦截，无法加载。在示例中，使用https://www.example.com/域名替换了原本的 resource 协议，同时利用 onInterceptRequest 接口替换资源，使得 js/script.js 可以成功加载，从而解决了跨域拦截的问题。
// main/ets/pages/Index.etsimport { webview } from '@kit.ArkWeb';
@Entry@Componentstruct Index { @State message: string = 'Hello World'; webviewController: webview.WebviewController = new webview.WebviewController(); // 构造域名和本地文件的映射表 schemeMap = new Map([ ["https://www.example.com/index.html", "index.html"], ["https://www.example.com/js/script.js", "js/script.js"], ]) // 构造本地文件和构造返回的格式mimeType mimeTypeMap = new Map([ ["index.html", 'text/html'], ["js/script.js", "text/javascript"] ])
build() { Row() { Column() { // 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名。 // 本例中构造www.example.com为例。 Web({ src: "https://www.example.com/index.html", controller: this.webviewController }) .javaScriptAccess(true) .fileAccess(true) .domStorageAccess(true) .geolocationAccess(true) .width("100%") .height("100%") .onInterceptRequest((event) => { if (!event) { return; } // 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域 if (this.schemeMap.has(event.request.getRequestUrl())) { let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!; let mimeType = this.mimeTypeMap.get(rawfileName); if (typeof mimeType === 'string') { let response = new WebResourceResponse(); // 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置 response.setResponseData($rawfile(rawfileName)); response.setResponseEncoding('utf-8'); response.setResponseMimeType(mimeType); response.setResponseCode(200); response.setReasonMessage('OK'); response.setResponseIsReady(true); return response; } } return null; }) } .width('100%') } .height('100%') }}
复制代码
<!-- main/resources/rawfile/index.html --><html><head> <meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script crossorigin src="./js/script.js"></script></body></html>
复制代码
// main/resources/rawfile/js/script.jsconst body = document.body;const element = document.createElement('div');element.textContent = 'success';body.appendChild(element);
复制代码
方法二
通过 setPathAllowingUniversalAccess 设置一个路径列表。当使用 file 协议访问该列表中的资源时，允许进行跨域访问本地文件。此外，一旦设置了路径列表，file 协议将仅限于访问列表内的资源(此时，fileAccess 的行为将会被此接口行为覆盖)。路径列表中的路径必须符合以下任一路径格式：
应用文件目录通过 Context.filesDir 获取，其子目录示例如下：
/data/storage/el2/base/files/example
/data/storage/el2/base/haps/entry/files/example
应用资源目录通过 Context.resourceDir 获取，其子目录示例如下：
/data/storage/el1/bundle/entry/resource/resfile
/data/storage/el1/bundle/entry/resource/resfile/example 当路径列表中的任一路径不满足上述条件时，系统将抛出异常码 401，并判定路径列表设置失败。若设置的路径列表为空，file 协议的可访问范围将遵循 fileAccess 的规则，具体示例如下。
// main/ets/pages/Index.etsimport { webview } from '@kit.ArkWeb';import { BusinessError } from '@kit.BasicServicesKit';
@Entry@Componentstruct WebComponent { controller: WebviewController = new webview.WebviewController();
build() { Row() { Web({ src: "", controller: this.controller }) .onControllerAttached(() => { try { // 设置允许可以跨域访问的路径列表 this.controller.setPathAllowingUniversalAccess([ getContext().resourceDir, getContext().filesDir + "/example" ]) this.controller.loadUrl("file://" + getContext().resourceDir + "/index.html") } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) .javaScriptAccess(true) .fileAccess(true) .domStorageAccess(true) } }}
复制代码
<!-- main/resource/rawfile/index.html --><!DOCTYPE html><html lang="en">
<head> <meta charset="utf-8"> <title>Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"> <script> function getFile() { var file = "file:///data/storage/el1/bundle/entry/resources/resfile/js/script.js"; // 使用file协议通过XMLHttpRequest跨域访问本地js文件。 var xmlHttpReq = new XMLHttpRequest(); xmlHttpReq.onreadystatechange = function(){ console.log("readyState:" + xmlHttpReq.readyState); console.log("status:" + xmlHttpReq.status); if(xmlHttpReq.readyState == 4){ if (xmlHttpReq.status == 200) { // 如果ets侧正确设置路径列表，则此处能正常获取资源 const element = document.getElementById('text'); element.textContent = "load " + file + " success"; } else { // 如果ets侧不设置路径列表，则此处会触发CORS跨域检查错误 const element = document.getElementById('text'); element.textContent = "load " + file + " failed"; } } } xmlHttpReq.open("GET", file); xmlHttpReq.send(null); } </script></head>
<body><div class="page"> <button id="example" onclick="getFile()">stealFile</button></div><div id="text"></div></body>
</html>
复制代码
// main/resources/rawfile/js/script.jsconst body = document.body;const element = document.createElement('div');element.textContent = 'success';body.appendChild(element);
复制代码
2、HarmonyOS web 里需要实现长按弹出菜单保存图片，有类似 getHitTestResult 的方法吗？
可以参考下 web 组件中的 onContextMenuShow 事件，长按特定元素（例如图片，链接）或鼠标右键，跳出菜单。具体参考下面文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#oncontextmenushow9暂时无法控制长按弹框的条件，可以尝试下从 h5 侧通过控制事件和 CSS 方式控制选择框
3、HarmonyOS web 拦截应用跳转和自定义请求响应对应 demo？
web 拦截和自定义请求响应，可以参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-resource-interception-request-mgmt-V5
Web 组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过 onInterceptRequest()接口来实现自定义资源请求响应 。自定义请求能力可以用于开发者自定义 Web 页面响应、自定义文件资源响应等场景。
Web 网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给 Web 内核。Web 内核解析应用层响应信息，根据此响应信息进行页面资源加载。
4、HarmonyOS 如何禁止单个 page 页面录屏截屏 ；禁止某个 dialog 录屏截屏 如 dialog 安全密码键盘？
现在需要在某些 page 页面、dialog，不让录屏和截屏可以通过 setWindowPrivacyMode 设置窗口为隐私模式后，截屏录屏或分享屏幕，屏幕会显示灰色蒙层（隐私窗口不允许这些操作）
可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowprivacymode9
setWindowPrivacyMode
setWindowPrivacyMode(isPrivacyMode: boolean, callback: AsyncCallback<void>): void
设置窗口是否为隐私模式，使用 callback 异步回调。设置为隐私模式的窗口，窗口内容将无法被截屏或录屏。此接口可用于禁止截屏/录屏的场景。
</br>
5、HarmonyOS 如何获取 base64 图片的图片原始宽高？
图片验证码场景，服务端返回两张 base64 格式图片 背景图与验证图，需要根据背景图、原图大小计算缩放系数，从而计算验证图的大小与定位信息
使用 Image Kit 的能力，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#imageinfo
demo：
import util from '@ohos.util';import { image } from '@kit.ImageKit';@Entry@Componentstruct Index { @State message: string = 'getImage'; @StorageLink('test') test: object = new Object; @State imageBase64: string = 'iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAABN0lEQVR42mP4P8IAAy0Mjf6xAYxHnIcHo6cZaOlZYj38VbESjIech5E9SayHYZ5FxnT1cL7uFwxMbt4lxtPYPElLjzNg8ywhMWp6GOZBeiVzDA/jinFySmZSkzUpHn5oLosXk+1hYj2NXliRUnjh8hy5MYzP0wzEeIzUvEyNGCY3WZMUw5Qm61EPjzQPkwIGjYfp4VlsnianIULIs3gbHvT2LLZWFzVLZ7xNS3p7lBqAGM+CPZy6o+w/DGfvrv5ffagTjtuOT/4/8cxcOF50Zc3/5dc3wvHeh0fh+PDjk/8vv74Bx/c+PPz/8utrOP7559fg8LD/uqT/A4GpHdB7Q/XBmFBAMyBLPv70DCWWTjw7h2L42pvbUCxGdlTPqRkoji7Y24DiqdCN6f8HKnCRMcNA5bmBCmgACwohlRAJ3H4AAAAASUVORK5CYII=' @State pixelMap: image.PixelMap | undefined = undefined; build() { Column() { Text(this.message) .id('HelloWorld') .fontSize(50) .fontWeight(FontWeight.Bold) .onClick(async () => { let helper = new util.Base64Helper(); let buffer: ArrayBuffer = helper.decodeSync(this.imageBase64, util.Type.MIME).buffer as ArrayBuffer; let imageSource = image.createImageSource(buffer); let opts: image.DecodingOptions = { editable: true }; this.pixelMap = await imageSource.createPixelMap(opts); this.pixelMap.getImageInfo().then((imageInfo : image.ImageInfo) => { if (imageInfo == undefined) { console.error(`Failed to obtain the image pixel map information.`); } let wit = imageInfo.size.width; let hig = imageInfo.size.height; console.log(`Succeeded in obtaining the image pixel map information., ${JSON.stringify(wit)}, ${JSON.stringify(hig)}`); }) }) } .height('100%') .width('100%') }}
复制代码
评论