1. Webコンポーネントの概要
Web コンポーネントは、アプリケーションで Web ページのコンテンツを表示し、開発者にページの読み込み、ページの対話、ページのデバッグなどの機能を提供するために使用されます。
- ページの読み込み: Web コンポーネントは、ネットワーク ページ、ローカル ページ、HTML 形式のテキスト データの読み込みなど、基本的なフロントエンド ページ読み込み機能を提供します。
- ページ インタラクション: Web コンポーネントは、フロントエンド ページのダーク モードの設定、新しいウィンドウでのページの読み込み、位置情報のアクセス許可管理、Cookie 管理、フロントエンド ページの使用機能など、豊富なページ インタラクション方法を提供します。アプリケーション側のJavaScript。
- ページのデバッグ: Web コンポーネントは、Devtools ツールを使用したフロントエンド ページのデバッグをサポートしています。
以下では、一般的な使用シナリオの例を通じて、Web コンポーネントの機能的特徴を詳しく紹介します。
2. Web コンポーネントを使用してページをロードします
ページの読み込みは、Web コンポーネントの基本機能です。ページ読み込みデータのソースに応じて、ネットワーク ページの読み込み、ローカル ページの読み込み、HTML 形式のリッチ テキスト データの読み込みを含む 3 つの一般的なシナリオに分けることができます。
ページの読み込み中にネットワーク リソースの取得が関係する場合は、 ohos.permission.INTERNETネットワーク アクセス許可を構成する必要があります。
Webページをロードする
開発者は、Web コンポーネントを作成するときに、デフォルトで読み込まれるネットワーク ページを指定できます。デフォルトのページがロードされた後、開発者がこの Web コンポーネントによって表示される Web ページを変更する必要がある場合は、 loadUrl()インターフェイスを呼び出して指定された Web ページをロードできます。
次の例では、Web コンポーネントが「www.example.com」ページをロードした後、開発者は、loadUrl インターフェイスを介して、Web コンポーネントによって表示されるページを「www.example1.com」に変更できます。
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
// 点击按钮时，通过loadUrl，跳转到www.example1.com
this.webviewController.loadUrl('www.example1.com');
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，加载www.example.com
Web({
src: 'www.example.com', controller: this.webviewController})
}
}
}
ローカルページをロードする
ローカル ページ ファイルをアプリケーションの rawfile ディレクトリに配置することで、開発者は Web コンポーネントの作成時にデフォルトでロードされるローカル ページを指定でき、ロードが完了した後、呼び出しによって現在の Web コンポーネントのページを変更できます。 loadUrl()インターフェース。
次の例は、ローカル ページ ファイルをロードする方法を示しています。
- リソース ファイルをアプリケーションの resource/rawfile ディレクトリに配置します。図 1 リソース ファイルのパス
- アプリケーション側のコード
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
// 点击按钮时，通过loadUrl，跳转到local1.html
this.webviewController.loadUrl($rawfile("local1.html"));
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，通过$rawfile加载本地文件local.html
Web({
src: $rawfile("local.html"), controller: this.webviewController })
}
}
}
- local.html ページ コード。
<!-- local.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
HTML形式のテキストデータを読み込みます
Web コンポーネントは、 loadDataインターフェイスを介して HTML 形式でテキスト データをロードできます。開発者がページ全体をロードする必要がなく、ページの一部を表示するだけでよい場合、この機能を使用してページを迅速にロードできます。
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadData')
.onClick(() => {
try {
// 点击按钮时，通过loadData，加载HTML格式的文本数据
this.controller.loadData(
'<html><body bgcolor="white">Source:<pre>source</pre></body></html>',
'text/html',
'UTF-8'
);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，加载www.example.com
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
3. 基本的なプロパティとイベントを設定する
ダークモードを設定する
Web コンポーネントは、フロントエンド ページのダーク モード構成をサポートします。
● darkMode()インターフェイスを介してさまざまなダーク モードを設定できますWebDarkMode.Offモードは、ダーク モードをオフにすることを意味します。WebDarkMode.On はダーク モードをオンにすることを意味し、ダーク モードはフロントエンド ページに従います。WebDarkMode.Auto はダーク モードをオンにすることを意味し、ダーク モードはシステムに従います。次の例では、ページのダーク モードは、 darkMode()インターフェイスを通じてシステムに従うように構成されています。
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State mode: WebDarkMode = WebDarkMode.Auto;
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.darkMode(this.mode)
}
}
}
●フロントエンド ページは、forceDarkAccess()インターフェイスを通じて強制的にダーク モードを構成できますが、ダーク モードはフロントエンド ページおよびシステムに従いません。このモードを設定する場合は、ダーク モードを WebDarkMode.On に設定する必要があります。次の例では、forceDarkAccess()インターフェイスを通じてページが強制的にダーク モードになります。
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State mode: WebDarkMode = WebDarkMode.On;
@State access: boolean = true;
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.darkMode(this.mode)
.forceDarkAccess(this.access)
}
}
}
ファイルをアップロードする
Web コンポーネントはフロントエンド ページ選択ファイルのアップロード機能をサポートしており、アプリケーション開発者はonShowFileSelector()インターフェイスを使用してフロントエンド ページ ファイルのアップロード リクエストを処理できます。
次の例では、ユーザーがフロントエンド ページのファイル アップロード ボタンをクリックすると、アプリケーション側は onShowFileSelector ()インターフェイスでファイル アップロード リクエストを受け取り、開発者はこのインターフェイスでアップロードされたローカル ファイルのパスを先頭に設定します。 - 終了ページ。
● アプリケーション側のコード。
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
// 加载本地local.html页面
Web({ src: $rawfile('local.html'), controller: this.controller })
.onShowFileSelector((event) => {
// 开发者设置要上传的文件路径
let fileList: Array<string> = [
'xxx/test.png',
]
event.result.handleFileList(fileList)
return true;
})
}
}
}
● local.html ページ コード。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
// 点击文件上传按钮
<input type="file" value="file"></br>
</body>
</html>
新しいウィンドウでページを開く
Web コンポーネントは、新しいウィンドウでページを開く機能を提供します。開発者は、multiWindowAccess()インターフェイスを使用して、Web ページを新しいウィンドウで開くことを許可するかどうかを設定できます。新しいウィンドウが開くと、アプリケーション側はonWindowNew()インターフェイスで Web コンポーネントの新しいウィンドウ イベントを受け取ります。開発者は、Web コンポーネント ウィンドウの要求を処理するために、このインターフェイス イベントで新しいウィンドウを作成する必要があります。
説明する
● 開発者がonWindowNew()インターフェース通知で新しいウィンドウを開く必要がない場合は、 ControllerHandler.setWebController()インターフェースの戻り値を null に設定する必要があります。
以下のローカルの例のように、ユーザーが「Web ページを新しいウィンドウで開く」ボタンをクリックすると、アプリケーション側はonWindowNew()インターフェイスで Web コンポーネントの新しいウィンドウ イベントを受け取ります。
● アプリケーション側のコード。
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src:$rawfile("window.html"), controller: this.controller })
.multiWindowAccess(true)
.onWindowNew((event) => {
console.info("onWindowNew...");
var popController: web_webview.WebviewController = new web_webview.WebviewController();
// 开发者需要在此处新建窗口,跟popController关联，并且将popController返回给Web组件。如果不需要打开新窗口请将返回值设置为event.handler.setWebController(null);
event.handler.setWebController(popController);
})
}
}
}
● window.html ページ コード。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WindowEvent</title>
</head>
<body>
<input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
<script type="text/javascript">
function OpenNewWindow()
{
let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
if (openedWindow) {
openedWindow.document.body.write("<p>这是我的窗口</p>");
} else {
log.innerHTML = "window.open failed";
}
}
</script>
</body>
</html>
位置情報の許可を管理する
Web コンポーネントは、位置情報のアクセス許可管理機能を提供します。開発者は、onGeolocationShow()インターフェイスを通じてWeb サイトの位置情報のアクセス許可を管理できます。Web コンポーネントは、インターフェイスの応答結果に基づいて、フロントエンド ページにアクセス許可を与えるかどうかを決定します。デバイスの位置を取得するには、開発者はohos.permission.LOCATION権限を設定する必要があります。
次の例では、ユーザーがフロントエンド ページの [位置情報の取得] ボタンをクリックすると、Web コンポーネントがポップアップ ウィンドウを通じて位置情報の許可要求メッセージをアプリケーション側に通知します。サンプル コードは次のとおりです。
● フロントエンドページコード。
<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){
if (navigator.geolocation) {
<!-- 前端页面访问设备地理位置 -->
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position){
locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
● アプリケーションコード。
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src:$rawfile('getLocation.html'), controller:this.controller })
.geolocationAccess(true)
.onGeolocationShow((event) => { // 地理位置权限申请通知
AlertDialog.show({
title: '位置权限请求',
message: '是否允许获取位置信息',
primaryButton: {
value: 'cancel',
action: () => {
event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求
}
},
cancel: () => {
event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
}
})
})
}
}
}