【每日学点HarmonyOS Next知识】网页获取高度、行为菜单底部布局、动画题目 ...

【每日学点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：

1. import promptAction from '@ohos.promptAction';
2. import { BusinessError } from '@ohos.base';
4. function showActionMenu() {
5.   try {
6.     promptAction.showActionMenu({
7.       title: 'Title Info',
8.       buttons: [
9.         {
10.           text: 'item1',
11.           color: '#666666'
12.         },
13.         {
14.           text: 'item2',
15.           color: '#000000'
16.         },
17.       ]
18.     }, (err, data) => {
19.       if (err) {
20.         console.info('showActionMenu err: ' + err);
21.         return;
22.       }
23.       console.info('showActionMenu success callback, click button: ' + data.index);
24.     })
25.   } catch (error) {
26.     let message = (error as BusinessError).message
27.     let code = (error as BusinessError).code
28.     console.error(`showActionMenu args error code is ${code}, message is ${message}`);
29.   }
30.   ;
31. }
33. @Entry
34. @Component
35. struct Index {
36.   @State message: string = 'Hello World';
38.   build() {
39.     RelativeContainer() {
40.       Text(this.message)
41.         .id('HelloWorld')
42.         .fontSize(50)
43.         .fontWeight(FontWeight.Bold)
44.         .alignRules({
45.           center: { anchor: '__container__', align: VerticalAlign.Center },
46.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
47.         })
48.         .onClick(()=>{
49.           showActionMenu()
50.         })
51.     }
52.     .height('100%')
53.     .width('100%')
54.   }
55. }

复制代码

3、HarmonyOS 动画必须搭配@State修饰的变量才能生效吗？

一般情况下动画是必要搭配@State修饰的变量才能生效,以下demo加上 Text().width(300).height(300).backgroundColor(Color.Black)就可以做动画了

1. @Entry
2. @Component
3. export default struct ParticleStar {
4.   aboutToAppear(): void {
5.   }
7.   build() {
8.     Stack() {
9.       Text()
10.         .width(300).height(300).backgroundColor(Color.Black)
11.       Particle({
12.         particles: [
13.           {
14.             emitter: {
15.               particle: {
16.                 type: ParticleType.POINT, //粒子类型
17.                 config: {
18.                   radius: 10//圆点半径
19.                 },
20.                 count: 500, //粒子总数
21.                 lifetime: 10000//粒子生命周期，单位ms
22.               },
23.               emitRate: 10, //每秒发射粒子数
24.               position: [200, 0],
25.               shape: ParticleEmitterShape.RECTANGLE//发射器形状
26.             },
27.             color: {
28.               range: [Color.Red, Color.Yellow], //初始颜色范围
29.               updater: {
30.                 type: ParticleUpdater.CURVE, //变化方式为曲线变化
31.                 config: [
32.                   {
33.                     from: Color.White, //变化起始值
34.                     to: Color.Pink, //变化终点值
35.                     startMillis: 0, //开始时间
36.                     endMillis: 3000, //结束时间
37.                     curve: Curve.EaseIn//变化曲线
38.                   },
39.                   {
40.                     from: Color.Pink,
41.                     to: Color.Orange,
42.                     startMillis: 3000,
43.                     endMillis: 5000,
44.                     curve: Curve.EaseIn
45.                   },
46.                   {
47.                     from: Color.Orange,
48.                     to: Color.Pink,
49.                     startMillis: 5000,
50.                     endMillis: 8000,
51.                     curve: Curve.EaseIn
52.                   },
53.                 ]
54.               }
55.             },
56.             opacity: {
57.               range: [0.0, 1.0], //粒子透明度的初始值从【0.0到1.0】随机产生
58.               updater: {
59.                 type: ParticleUpdater.CURVE, //透明度的变化方式是随机变化
60.                 config: [
61.                   {
62.                     from: 0.0,
63.                     to: 1.0,
64.                     startMillis: 0,
65.                     endMillis: 3000,
66.                     curve: Curve.EaseIn
67.                   },
68.                   {
69.                     from: 1.0,
70.                     to: 0.0,
71.                     startMillis: 5000,
72.                     endMillis: 10000,
73.                     curve: Curve.EaseIn
74.                   }
75.                 ]
76.               }
77.             },
78.             scale: {
79.               range: [0.0, 0.0],
80.               updater: {
81.                 type: ParticleUpdater.CURVE,
82.                 config: [
83.                   {
84.                     from: 0.0,
85.                     to: 0.5,
86.                     startMillis: 0,
87.                     endMillis: 3000,
88.                     curve: Curve.EaseIn
89.                   }
90.                 ]
91.               }
92.             },
93.             acceleration: {
94.               //加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向
95.               speed: {
96.                 range: [3, 9],
97.                 updater: {
98.                   type: ParticleUpdater.RANDOM,
99.                   config: [1, 20]
100.                 }
101.               },
102.               angle: {
103.                 range: [90, 90]
104.               }
105.             }
106.           }
107.         ]
108.       }).width(300).height(300)
109.     }.width("100%").height("100%").align(Alignment.Center)
110.   }
111. }

复制代码

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控制台中看到雷同以下报错信息：

1. 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的规则，详细示例如下。
    
  
  

1. // main/ets/pages/Index.ets
2. import { webview } from '@kit.ArkWeb';
3. import { BusinessError } from '@kit.BasicServicesKit';
5. @Entry
6. @Component
7. struct WebComponent {
8.   controller: WebviewController = new webview.WebviewController();
10.   build() {
11.     Row() {
12.       Web({ src: "", controller: this.controller })
13.         .onControllerAttached(() => {
14.           try {
15.             // 设置允许可以跨域访问的路径列表
16.             this.controller.setPathAllowingUniversalAccess([
17.               getContext().resourceDir,
18.               getContext().filesDir + "/example"
19.             ])
20.             this.controller.loadUrl("file://" + getContext().resourceDir + "/index.html")
21.           } catch (error) {
22.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as   BusinessError).message}`);
23.           }
24.         })
25.         .javaScriptAccess(true)
26.         .fileAccess(true)
27.         .domStorageAccess(true)
28.     }
29.   }
30. }

复制代码

1. <!-- main/resource/rawfile/index.html -->
2. <!DOCTYPE html>
3. <html lang="en">
5. <head>
6.     <meta charset="utf-8">
7.     <title>Demo</title>
8.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,   viewport-fit=cover">
9.     <script>
10.         function getFile() {
11.             var file = "file:///data/storage/el1/bundle/entry/resources/resfile/js/script.js";
12.       // 使用file协议通过XMLHttpRequest跨域访问本地js文件。
13.             var xmlHttpReq = new XMLHttpRequest();
14.             xmlHttpReq.onreadystatechange = function(){
15.                 console.log("readyState:" + xmlHttpReq.readyState);
16.                 console.log("status:" + xmlHttpReq.status);
17.                 if(xmlHttpReq.readyState == 4){
18.                     if (xmlHttpReq.status == 200) {
19.                 // 如果ets侧正确设置路径列表，则此处能正常获取资源
20.                         const element = document.getElementById('text');
21.                         element.textContent = "load " + file + " success";
22.                     } else {
23.                 // 如果ets侧不设置路径列表，则此处会触发CORS跨域检查错误
24.                         const element = document.getElementById('text');
25.                         element.textContent = "load " + file + " failed";
26.                     }
27.                 }
28.             }
29.             xmlHttpReq.open("GET", file);
30.             xmlHttpReq.send(null);
31.         }
32.     </script>
33. </head>
35. <body>
36. <div class="page">
37.     <button id="example" onclick="getFile()">stealFile</button>
38. </div>
39. <div id="text"></div>
40. </body>
42. </html>

复制代码

1. // main/resources/rawfile/js/script.js
2. const body = document.body;
3. const element = document.createElement('div');
4. element.textContent = 'success';
5. body.appendChild(element);

复制代码

5、HarmonyOS 有没有不随体系深色模式变化的操纵？

应用主动设置深浅色模式，可参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-light-dark-color-adaptation-V5

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。