【每日学点HarmonyOS Next知识】网页获取高度、行为菜单底部布局、动画题目、Web跨域加载图片、不随体系深色变化
【每日学点HarmonyOS Next知识】网页获取高度、行为菜单底部布局、动画题目、Web跨域加载图片、不随体系深色变化1、HarmonyOS Web控件getPageHeight（）获取高度方法与网页实际高度不一样？
在Web的onPageEnd（）方法中调用 getWebViewController().getPageHeight() 获取的高度与网页内容实际高度不符偏小，通过 setTimeout(()=>{ let webHeight1 = this.controller.getWebViewController().getPageHeight() Logger.getInstance().error(‘内部控件高度time’,’ webHeight:‘+webHeight1+’ webHeight:'+vp2px(webHeight1)) },200) 获取的高度与网页实际高度雷同，有没有不必要延时的获取网页实际高度的方法？
onPageEnd是页面加载完回调，不即是页面渲染完成，所从前后获取的高度不一样。可利用：onFirstMeaningfulPaint文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#ZH-CN_TOPIC_0000001847049744__onfirstmeaningfulpaint12
2、HarmonyOS promptAction.showActionMenu 接口支持布局为底部布局吗？
promptAction.showActionMenu接口支持弹窗布局为底部布局吗？看了下文档里不能设置对其方式，并且示例里也是居中的方式。
参考demo：
import promptAction from '@ohos.promptAction';
import { BusinessError } from '@ohos.base';
function showActionMenu() {
try {
promptAction.showActionMenu({
title: 'Title Info',
buttons: [
{
text: 'item1',
color: '#666666'
},
{
text: 'item2',
color: '#000000'
},
]
}, (err, data) => {
if (err) {
console.info('showActionMenu err: ' + err);
return;
}
console.info('showActionMenu success callback, click button: ' + data.index);
})
} catch (error) {
let message = (error as BusinessError).message
let code = (error as BusinessError).code
console.error(`showActionMenu args error code is ${code}, message is ${message}`);
}
;
}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
RelativeContainer() {
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.onClick(()=>{
showActionMenu()
})
}
.height('100%')
.width('100%')
}
}
3、HarmonyOS 动画必须搭配@State修饰的变量才能生效吗？
一般情况下动画是必要搭配@State修饰的变量才能生效,以下demo加上 Text().width(300).height(300).backgroundColor(Color.Black)就可以做动画了
@Entry
@Component
export default struct ParticleStar {
aboutToAppear(): void {
}
build() {
Stack() {
Text()
.width(300).height(300).backgroundColor(Color.Black)
Particle({
particles: [
{
emitter: {
particle: {
type: ParticleType.POINT, //粒子类型
config: {
radius: 10//圆点半径
},
count: 500, //粒子总数
lifetime: 10000//粒子生命周期，单位ms
},
emitRate: 10, //每秒发射粒子数
position: ,
shape: ParticleEmitterShape.RECTANGLE//发射器形状
},
color: {
range: , //初始颜色范围
updater: {
type: ParticleUpdater.CURVE, //变化方式为曲线变化
config: [
{
from: Color.White, //变化起始值
to: Color.Pink, //变化终点值
startMillis: 0, //开始时间
endMillis: 3000, //结束时间
curve: Curve.EaseIn//变化曲线
},
{
from: Color.Pink,
to: Color.Orange,
startMillis: 3000,
endMillis: 5000,
curve: Curve.EaseIn
},
{
from: Color.Orange,
to: Color.Pink,
startMillis: 5000,
endMillis: 8000,
curve: Curve.EaseIn
},
]
}
},
opacity: {
range: , //粒子透明度的初始值从【0.0到1.0】随机产生
updater: {
type: ParticleUpdater.CURVE, //透明度的变化方式是随机变化
config: [
{
from: 0.0,
to: 1.0,
startMillis: 0,
endMillis: 3000,
curve: Curve.EaseIn
},
{
from: 1.0,
to: 0.0,
startMillis: 5000,
endMillis: 10000,
curve: Curve.EaseIn
}
]
}
},
scale: {
range: ,
updater: {
type: ParticleUpdater.CURVE,
config: [
{
from: 0.0,
to: 0.5,
startMillis: 0,
endMillis: 3000,
curve: Curve.EaseIn
}
]
}
},
acceleration: {
//加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向
speed: {
range: ,
updater: {
type: ParticleUpdater.RANDOM,
config:
}
},
angle: {
range:
}
}
}
]
}).width(300).height(300)
}.width("100%").height("100%").align(Alignment.Center)
}
}
4、HarmonyOS Web组件无法跨域加载图片资源？
App访问网页，网页里面有些图片必要跨域加载，但是由于跨域无法加载显示，叨教有什么方法可以解决吗？
跨域请参考以下链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5
为了提高安全性，ArkWeb内核不允许file协议或者resource协议访问URL上下文中来自跨域的请求。因此，在利用Web组件加载当地离线资源的时间，Web组件会拦截file协媾和resource协议的跨域访问。可以通过方法二设置一个路径列表，再利用file协议访问该路径列表中的资源，允许跨域访问当地文件。当Web组件无法访问当地跨域资源时，开发者可以在DevTools控制台中看到雷同以下报错信息：
Access to script at 'xxx' from origin 'xxx' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted.
方法一
为了使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可以乐成加载，从而解决了跨域拦截的题目。
方法二
通过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.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct 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.js
const body = document.body;
const element = document.createElement('div');
element.textContent = 'success';
body.appendChild(element);
5、HarmonyOS 有没有不随体系深色模式变化的操纵？
应用主动设置深浅色模式，可参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-light-dark-color-adaptation-V5
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]