概要

HarmonyOSの低コード開発プラットフォームを活用し、ボタン操作で外部Webコンテンツを表示する方法を解説します。本記事ではAPI6準拠のJSプロジェクトを前提とし、JavaレイヤーでのWebView構築と、低コード側からの画面遷移連携を実装します。

WebView機能のJava実装

まず、entry/src/main/java/パッケージ名/配下に新規Abilityを作成します。ここではBrowserAbilityという名称で実装します。

対応するSliceクラスでは、レイアウトXMLにブラウザ表示用のコンポーネントを配置します。ability_browser.xmlの定義例：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:navigate_back"
        ohos:height="60vp"
        ohos:width="match_parent"
        ohos:text="戻る"
        ohos:text_size="16vp"
        ohos:background_element="#F5F5F5"/>

    <ohos.agp.components.webengine.WebView
        ohos:id="$+id:content_view"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
</DirectionalLayout>

Sliceクラスでの制御ロジック実装：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.webengine.WebView;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

public class BrowserAbilitySlice extends AbilitySlice {
    private static final HiLogLabel LOG_LABEL = new HiLogLabel(
        HiLog.LOG_APP, 0x00201, "BrowserSlice");
    
    private WebView contentRenderer;
    private Button returnControl;

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_ability_browser);
        configureNavigation();
        initializeWebRenderer();
    }

    private void initializeWebRenderer() {
        contentRenderer = (WebView) findComponentById(ResourceTable.Id_content_view);
        
        WebConfig config = contentRenderer.getWebConfig();
        config.setJavaScriptPermit(true);
        config.setWebStoragePermit(true);
        
        String targetUrl = "https://developer.harmonyos.com/";
        contentRenderer.load(targetUrl);
        
        HiLog.info(LOG_LABEL, "WebView initialized with URL: %{public}s", targetUrl);
    }

    private void configureNavigation() {
        returnControl = (Button) findComponentById(ResourceTable.Id_navigate_back);
        returnControl.setClickedListener(listener -> terminate());
    }

    @Override
    protected void onStop() {
        if (contentRenderer != null) {
            contentRenderer.stop();
        }
        super.onStop();
    }
}

低コード側の連携設定

ビジュアルエディタで画面を開き、テキストラベル「Webサイトを開く」を配置します。

対応するJSファイルentry/src/main/js/default/pages/index/index.jsに遷移処理を記述：

import featureAbility from '@ohos.ability.featureAbility';

export default {
    pageData: {
        displayLabel: "Webサイトを開く"
    },
    
    onPageReady() {
        console.info("Index page initialized");
    },
    
    triggerWebNavigation() {
        const destination = {
            bundleName: "com.example.browserdemo",
            abilityName: "com.example.browserdemo.BrowserAbility"
        };
        
        featureAbility.startAbility({
            want: destination
        }).then(() => {
            console.info("Navigation succeeded");
        }).catch(error => {
            console.error("Navigation failed: " + JSON.stringify(error));
        });
    }
};

ビジュアルエディタに戻り、配置したテキストコンポーネントのクリックイベントにtriggerWebNavigationを紐付けます。

動作確認ポイント

実装完了後、以下を確認してください：

• ボタンタップでブラウザ画面に遷移すること
• 指定URLが正しく読み込まれること
• 「戻る」ボタンで元の低コード画面に復帰すること
• JavaScript実行が有効になっていること

なお、ネットワークアクセスにはconfig.jsonでの権限宣言が必要です：

"reqPermissions": [
    {
        "name": "ohos.permission.INTERNET"
    }
]