AtomicServiceWeb 使用方法全解析
一、整體概述
AtomicServiceWeb 是對(duì) Web 組件的升級(jí)椿访，用于在特定場(chǎng)景下實(shí)現(xiàn)更高效和功能豐富的網(wǎng)頁(yè)交互乌企。它在一些接口和屬性的使用上與 Web 組件有所不同，需要開(kāi)發(fā)者按照新的規(guī)范進(jìn)行操作赎离。
二逛犹、參數(shù)傳遞
-
通過(guò) src 傳遞參數(shù)
適用場(chǎng)景：例如在登錄認(rèn)證場(chǎng)景中，將元服務(wù)原生頁(yè)面獲取的登錄參數(shù)傳遞給 H5 頁(yè)面梁剔。
傳參格式：在設(shè)置
src屬性時(shí)虽画，將參數(shù)添加到 URL 中，如src =https://xx.com/login?authcode=${authcode}``荣病，其中authcode是要傳遞的參數(shù)码撰。-
示例代碼
：
- 在
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() {
// 創(chuàng)建登錄請(qǐng)求并獲取授權(quán)碼的邏輯
}
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中，可以通過(guò)window.location.href獲取 URL 中的參數(shù)：
<!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參數(shù)</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>
-
通過(guò)路由傳參
適用場(chǎng)景：常見(jiàn)于 H5 跳轉(zhuǎn)原生頁(yè)面實(shí)現(xiàn)賬號(hào)關(guān)聯(lián)个盆、調(diào)用原生實(shí)名認(rèn)證等能力時(shí)傳遞參數(shù)脖岛。
傳參格式：使用
has.router.pushPath('LoginPage','xxxxx')，其中LoginPage是目標(biāo)頁(yè)面颊亮，xxxxx是要傳遞的參數(shù)柴梆。-
示例代碼
：
- 在
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傳遞參數(shù)</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中接收參數(shù)：
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頁(yè)面?zhèn)鬟f參數(shù)：${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中創(chuàng)建路由跳轉(zhuǎn)：
@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')
}
}
同時(shí)需要在route_map.json中添加對(duì)應(yīng)路由：
{
"name": "LoginPage",
"pageSourceFile": "src/main/ets/pages/LoginPage.ets",
"buildFunction": "AtomicServiceWebPageBuilder",
"data": {
"description": "this is LoginPage"
}
}
三、常用接口 / 屬性遷移
- controller
-
使用說(shuō)明：使用
AtomicServiceWebController替換原來(lái)的控制器终惑。 - 示例代碼：
-
使用說(shuō)明：使用
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
-
使用說(shuō)明：默認(rèn)值為
true绍在，無(wú)需單獨(dú)設(shè)置。
-
使用說(shuō)明：默認(rèn)值為
- domStorageAccess
-
使用說(shuō)明：默認(rèn)值為
true，無(wú)需單獨(dú)設(shè)置偿渡。
-
使用說(shuō)明：默認(rèn)值為
- mixedMode
-
使用說(shuō)明：可以設(shè)置為
MixedMode.All等模式臼寄，示例如下：
-
使用說(shuō)明：可以設(shè)置為
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
-
使用說(shuō)明：可以設(shè)置為
WebDarkMode.On等模式，示例如下：
-
使用說(shuō)明：可以設(shè)置為
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
-
使用說(shuō)明：設(shè)置為
true或false來(lái)控制是否啟用強(qiáng)制黑暗模式溜宽，示例如下：
-
使用說(shuō)明：設(shè)置為
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
-
使用說(shuō)明：在 AtomicServiceWeb 中默認(rèn)值為
false吉拳，僅只讀資源目錄/data/storage/el1/bundle/entry/resources/resfile里面的file協(xié)議資源可訪問(wèn)，$rawfile(filepath/filename)中rawfile路徑的文件不受影響适揉。升級(jí)后不再支持自定義該接口留攒，需刪除相關(guān)設(shè)置代碼。
-
使用說(shuō)明：在 AtomicServiceWeb 中默認(rèn)值為
- onlineImageAccess 和 imageAccess
-
使用說(shuō)明：在 AtomicServiceWeb 中默認(rèn)值為
True涡扼，升級(jí)后不再支持自定義這兩個(gè)接口稼跳，需刪除相關(guān)設(shè)置代碼。
-
使用說(shuō)明：在 AtomicServiceWeb 中默認(rèn)值為
- geolocationAccess
-
使用說(shuō)明：升級(jí)后不再支持該接口吃沪，在 H5 頁(yè)面中可替換使用
has.location.getLocation()汤善。
-
使用說(shuō)明：升級(jí)后不再支持該接口吃沪，在 H5 頁(yè)面中可替換使用
