AtomicServiceWeb 使用方法

作者：flfljh

2024-12-18
湖南
本文字数：4485 字
阅读完需：约 15 分钟

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@Componentstruct 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;            })    }}@Builderexport 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@Componentstruct 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            })    }}@Builderexport function AtomicServiceWebPageBuilder(name: string, param: Object) {    LoginPage()}

复制代码

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

@Entry@Componentstruct 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@Componentstruct 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@Componentstruct 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@Componentstruct 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@Componentstruct 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()。

发布于: 刚刚阅读数: 4

flfljh

关注

还未添加个人签名 2024-10-29 加入

还未添加个人简介

发布

暂无评论

创作场景

AtomicServiceWeb 使用方法

AtomicServiceWeb 使用方法全解析

一、整体概述

二、参数传递

三、常用接口 / 属性迁移

flfljh

评论