标签：src State param AtomicServiceWebController controller 使用 AtomicServiceWeb 方法

AtomicServiceWeb 使用方法全解析

一、整体概述

AtomicServiceWeb 是对 Web 组件的升级，用于在特定场景下实现更高效和功能丰富的网页交互。它在一些接口和属性的使用上与 Web 组件有所不同，需要开发者按照新的规范进行操作。

二、参数传递

通过 src 传递参数
- 适用场景：例如在登录认证场景中，将元服务原生页面获取的登录参数传递给 H5 页面。
- 传参格式：在设置src属性时，将参数添加到 URL 中，如src = https://xx.com/login?authcode=${authcode}``，其中authcode是要传递的参数。
- 示例代码
  
  ：
  - 在login.ets中：

import { authentication } from '@kit.AccountKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
@Entry
@Component
struct LoginPage {
    @State authorizationCode: string = '';
    @State src: ResourceStr = 'resource://rawfile/login.html';
    @State controller: AtomicServiceWebController = new AtomicServiceWebController();
    navPathStack: NavPathStack = new NavPathStack();
    async getAuthorizationCode() {
        // 创建登录请求并获取授权码的逻辑
    }
    async aboutToAppear() {
        await this.getAuthorizationCode();
    }
    build() {
        NavDestination() {
            if (this.authorizationCode) {
                AtomicServiceWeb({
                    src: this.src + `?AuthorizationCode=${this.authorizationCode}`,
                    navPathStack: this.navPathStack,
                    controller: this.controller
                })
            }
        }
           .onReady((context: NavDestinationContext) => {
                this.navPathStack = context.pathStack;
            })
    }
}
@Builder
export function AtomicServiceWebPageBuilder(name: string, param: Object) {
    LoginPage()
}

在login.html中，可以通过window.location.href获取 URL 中的参数：

<!DOCTYPE html>
<html>
<style>
    body {
        padding-left: 30px;
    }
    h1 {
        font-size: 100px;
    }
   .button {
        font-size: 80px;
        margin: 8px 0px;
        padding: 8px 15px;
        border-radius: 10px;
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
        border: 1px solid transparent;
    }
   .button_error {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }
</style>
<body>
<h1>H5 Page</h1>
<br/>
<button type="button" class="button" onclick="getUrlParams()">获取AuthorizationCode参数</button>
<p id="demo"></p>
<script src="../dist/asweb-sdk.umd.js"></script>
<script>
    function getUrlParams() {
        const params = {};
        const url = window.location.href;
        const urlObj = new URL(url);
        for (const [key, value] of urlObj.searchParams.entries()) {
            params[key] = value;
            document.getElementById("demo").innerHTML = params[key];
        }
        return params;
    }
</script>
</body>
</html>

通过路由传参
- 适用场景：常见于 H5 跳转原生页面实现账号关联、调用原生实名认证等能力时传递参数。
- 传参格式：使用has.router.pushPath('LoginPage','xxxxx')，其中LoginPage是目标页面，xxxxx是要传递的参数。
- 示例代码
  
  ：
  - 在login.html中：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
    body {
        padding-left: 30px;
    }
    h1 {
        font-size: 100px;
    }
   .button {
        font-size: 80px;
        margin: 8px 0px;
        padding: 8px 15px;
        border-radius: 10px;
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
        border: 1px solid transparent;
    }
   .button_error {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }
</style>
<body>
<h1>H5 Page</h1>
<br/>
<button type="button" class="button" onclick="pushPath('LoginPage', 'xxxxx')">H5传递参数</button>
<p id="demo"></p>
<script src="../dist/asweb-sdk.umd.js"></script>
<script>
    function pushPath(name, param, animated, onPop) {
        has.navPathStack.pushPath({
            name: name,
            param: param,
            animated: animated,
            onPop: onPop,
            callback: (err, res) => commonCallback('pushPath', err, res)
        });
    }
    let onPop = event => {
        consoleLog('pushPath onPop event=' + JSON.stringify(event));
    };
</script>
</body>
</html>

在LoginPage.ets中接收参数：

import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
@Entry
@Component
struct LoginPage {
    @State src: ResourceStr = 'resource://rawfile/login.html';
    @State param: object | string = '';
    @State controller: AtomicServiceWebController = new AtomicServiceWebController();
    navPathStack: NavPathStack = new NavPathStack();
    build() {
        NavDestination() {
            if (this.param) {
                Column() {
                    Text(`接收H5页面传递参数：${this.param}`)
                }
                   .width('100%')
            } else {
                AtomicServiceWeb({
                    src: this.src,
                    navPathStack: this.navPathStack,
                    controller: this.controller
                })
            }
        }
           .onReady((context: NavDestinationContext) => {
                this.navPathStack = context.pathStack;
                this.param = context.pathInfo?.param as string
            })
    }
}
@Builder
export function AtomicServiceWebPageBuilder(name: string, param: Object) {
    LoginPage()
}

在MainPage.ets中创建路由跳转：

@Entry
@Component
struct MainPage {
    navPathStack: NavPathStack = new NavPathStack();
    @Builder
    NavPathStackComponent(name: string, page: string, param?: object): void {
        Button(name)
           .type(ButtonType.Capsule)
           .width('60%')
           .margin({
                top: '50px'
            }).onClick(() => {
            this.navPathStack.pushPath({
                name: page,
                param: param
            });
        })
    }
    build() {
        Navigation(this.navPathStack) {
            Row() {
                Column() {
                    this.NavPathStackComponent('LoginPage', 'LoginPage')
                }.width('100%')
            }.height('100%')
        }.title('XXX')
    }
}

同时需要在route_map.json中添加对应路由：

{
    "name": "LoginPage",
    "pageSourceFile": "src/main/ets/pages/LoginPage.ets",
    "buildFunction": "AtomicServiceWebPageBuilder",
    "data": {
        "description": "this is LoginPage"
    }
}

三、常用接口 / 属性迁移

controller
- 使用说明：使用AtomicServiceWebController替换原来的控制器。
- 示例代码：

import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
@Entry
@Component
struct WebComponent {
    @State controller: AtomicServiceWebController = new AtomicServiceWebController();
    build() {
        Column() {
            AtomicServiceWeb({
                src: 'www.example.com',
                controller: this.controller
            })
        }
    }
}

javaScriptAccess
- 使用说明：默认值为true，无需单独设置。
domStorageAccess
- 使用说明：默认值为true，无需单独设置。
mixedMode
- 使用说明：可以设置为MixedMode.All等模式，示例如下：

import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
@Entry
@Component
struct WebComponent {
    @State controller: AtomicServiceWebController = new AtomicServiceWebController();
    @State mixedMode: MixedMode = MixedMode.All;
    build() {
        Column() {
            AtomicServiceWeb({
                src: 'www.example.com',
                controller: this.controller,
                mixedMode: this.mixedMode
            })
        }
    }
}

darkMode
- 使用说明：可以设置为WebDarkMode.On等模式，示例如下：

import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
@Entry
@Component
struct WebComponent {
    @State controller: AtomicServiceWebController = new AtomicServiceWebController();
    @State mode: WebDarkMode = WebDarkMode.On;
    build() {
        Column() {
            AtomicServiceWeb({
                src: 'www.example.com',
                controller: this.controller,
                darkMode: this.mode,
            })
        }
    }
}

forceDarkAccess
- 使用说明：设置为true或false来控制是否启用强制黑暗模式，示例如下：

import { AtomicServiceWeb, AtomicServiceWebController } from '@kit.ArkUI';
@Entry
@Component
struct WebComponent {
    @State controller: AtomicServiceWebController = new AtomicServiceWebController();
    @State access: boolean = true;
    build() {
        Column() {
            AtomicServiceWeb({
                src: 'www.example.com',
                controller: this.controller,
                forceDarkAccess: this.access
            })
        }
    }
}

fileAccess
- 使用说明：在 AtomicServiceWeb 中默认值为false，仅只读资源目录/data/storage/el1/bundle/entry/resources/resfile里面的file协议资源可访问，$rawfile(filepath/filename)中rawfile路径的文件不受影响。升级后不再支持自定义该接口，需删除相关设置代码。
onlineImageAccess 和 imageAccess
- 使用说明：在 AtomicServiceWeb 中默认值为True，升级后不再支持自定义这两个接口，需删除相关设置代码。
geolocationAccess
- 使用说明：升级后不再支持该接口，在 H5 页面中可替换使用has.location.getLocation()。

标签：src,State,param,AtomicServiceWebController,controller,使用,AtomicServiceWeb,方法
From： https://www.cnblogs.com/hongmengos/p/18613906

AtomicServiceWeb 使用方法

AtomicServiceWeb 使用方法全解析

一、整体概述

二、参数传递

三、常用接口 / 属性迁移

相关文章

赞助商

阅读排行