目次
2. JS オブジェクト インジェクション。HTML は JS オブジェクトを使用してクライアント メソッドを呼び出します。
3. クライアントはローカル HTML Web ページで JS メソッドを呼び出します。
Honmeng の ArkUI フレームワークを使用して Honmeng アプリケーションを開発する場合、開発者が使用できる Web コンポーネントが公式から提供されます。この記事を通じて、Web コンポーネントを使用して次の操作を実行する方法を理解し、学習します。
- オンライン Web ページの読み込み
- ローカルのオフライン Web ページの読み込み
- Web コンポーネントの共通プロパティ設定
- クライアントと Web ページ間の双方向通信対話
まず、Web コンポーネントの導入を見てみましょう。
1. Web コンポーネントの概要
Web は、Web ページの表示機能を提供するコンポーネントです。具体的な使用方法については、 Web APIを参照してください。
2. コンポーネントの作成
WebComponent .ets の Page ページをページ ディレクトリに作成し、そのページに Web コンポーネントを配置します。Web コンポーネントでは、src を介して参照される Web ページのパスを指定します。コントローラーはコンポーネントのコントローラーです。Web コンポーネントは、コントローラーを通じてバインドされ、Web コンポーネントのメソッドを呼び出します。
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController();
build() {
Column() {
Web({ src: 'https://www.douban.com/', controller: this.controller })
}
}
}
Web コンポーネントを使用してオンライン Web ページにアクセスするには、アプリケーションのネットワーク権限を構成する必要があります。
権限リスト
オンライン Web ページにアクセスするときは、ネットワーク権限を追加する必要があります: ohos.permission.INTERNET
3. スタイルと属性を設定する
Web コンポーネントを使用するには、リッチ ページ スタイルと機能属性を追加する必要があります。高さとパディングのスタイルを設定すると、Web コンポーネントに高さとパディングを追加できます。fileAccess 属性を設定すると、Web コンポーネントにファイル アクセス許可を追加できます。javaScriptAccess 属性を true に設定すると、Web コンポーネントで JavaScript コードを実行できるようになります。
@Entry
@Component
struct WebComponent {
fileAccess: boolean = true;
controller: WebController = new WebController();
build() {
Column() {
Text('Hello world!')
.fontSize(20)
Web({ src: 'https://www.douban.com/', controller: this.controller })
// 设置高和内边距
.height(500)
.padding(20)
// 设置文件访问权限和脚本执行权限
.fileAccess(this.fileAccess)
.javaScriptAccess(true)
Text('End')
.fontSize(20)
}
}
}
4. イベントとメソッドを追加する
Web コンポーネントに onProgressChange イベントを追加します。このイベントは、ページを読み込んでいる Web エンジンの進行状況の値をコールバックします。Progress コンポーネントのステータスを制御するには、Progress コンポーネントの値に Progress 値を割り当てます。進行状況が 100% の場合、Progress コンポーネントは非表示になり、Web ページが読み込まれます。
import web_view from '@ohos.web.webview';
@Entry
@Component
struct RemoteWebPage {
@State progress: number = 0
@State hideProgress: boolean = true
controller: web_view.WebviewController = new web_view.WebviewController()
build() {
Column() {
Progress({ total: 100, value: this.progress })
.color('#ff5cea20')
.visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
Web({ src: 'https://www.douban.com/', controller: this.controller })
.height('100%')
// 添加onProgressChange事件
.onProgressChange(e => {
this.progress = e.newProgress
// 当进度100%时，进度条消失
if (this.progress == 100) {
this.hideProgress = true
} else {
this.hideProgress = false
}
})
}.backgroundColor('0xFFFFFF')
}
}
効果は次のとおりです。
上記は、Web コンポーネントを使用してオンライン Web ページにアクセスする方法についてですが、ローカル Web ページ ファイルをロードするにはどうすればよいですか?
5. ローカル HTML にアクセスする
まずはレンダリングを見てみましょう
ローカル Web ページ ファイルをロードし、HTML Web ページでクライアントを呼び出すメソッドを実装し、ページを閉じてシステム アルバムをプルアップする関数を実装しました。コードの実装から始めましょう。
1.ローカルHTMLファイルを作成する
entry/src/main/resources/rawfile ディレクトリに、index.html ファイルを作成します。
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
<p>这个是来自本地的html文件</p>
<button type="button" onclick="window.jsBridge.closePage()">点击调用原生关闭页面</button>
<button type="button" onclick="window.jsBridge.jumpSystemPicture()">点击拉起原生系统相册</button>
</body>
</html>2. ローカルの HTML ファイルをロードする
LocalWebPage ページを作成し、index.html ファイルをロードします。
import web_view from '@ohos.web.webview';
@Entry
@Component
struct LocalWebPage {
controller: web_view.WebviewController = new web_view.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.height('100%')
}
}
}ここでは $rawfile("index.html") を使用してローカル HTML ファイルを取得します。
2. JS オブジェクト インジェクション。HTML は JS オブジェクトを使用してクライアント メソッドを呼び出します。
Web ページ上でクライアントと対話する必要がある場合は、次のように、HTML に挿入される JS オブジェクトを設定する必要があります。
import web_view from '@ohos.web.webview';
import common from '@ohos.app.ability.common';
import router from '@ohos.router';
@Entry
@Component
struct LocalWebPage {
controller: web_view.WebviewController = new web_view.WebviewController()
jsBridge = {
jumpSystemPicture() {
let context = getContext(this) as common.UIAbilityContext;
let want = {
"deviceId": "",
"bundleName": "",
"abilityName": "",
"uri": "",
"type": "image/*",
"action": "android.intent.action.GET_CONTENT",
"parameters":{},
"entities":[]
};
context.startAbility(want);
},
closePage() {
router.back()
}
}
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.javaScriptAccess(true)
.javaScriptProxy({
object: this.jsBridge,
name: "jsBridge",
methodList: ["closePage","jumpSystemPicture"],
controller: this.controller
})
.height('100%')
}
}
}ここでは、JS オブジェクト jsBridge を定義し、html でシステム アルバムを取得するためのメソッド、クライアント ページを閉じるための 2 つのメソッド、jumpSystemPicture と closePage を定義し、Web の javaScriptProxy メソッドを使用して JS オブジェクト インジェクションの設定を行います。具体的な設定は上記のコードの通りで、オブジェクト名と注入方法を設定する必要があります。
クライアントのページを閉じるメソッドを呼び出すなど、上記の JS を呼び出す HTML コードを見てください。
window.jsBridge.closePage() がトリガーされます。
3. クライアントはローカル HTML Web ページで JS メソッドを呼び出します。
onPageEnd イベントに runJavaScript メソッドを追加します。onPageEnd イベントは、Web ページが読み込まれるときのコールバックであり、runJavaScript メソッドは HTML 内の JavaScript スクリプトを実行できます。ページが読み込まれると、onPageEnd イベントがトリガーされ、HTML ファイル内のテスト メソッドが呼び出され、情報がコンソールに表示されます。
import web_view from '@ohos.web.webview';
import router from '@ohos.router';
@Entry
@Component
struct LocalWebPage {
controller: web_view.WebviewController = new web_view.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.javaScriptAccess(true)
.onPageEnd(e =>{
// test()在index.html中定义
this.controller.runJavaScript('test()');
console.info('url: ', e.url);
})
.height('100%')
}
}
}<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
<p>这个是来自本地的html文件</p>
<button type="button" onclick="window.jsBridge.closePage()">点击调用原生关闭页面</button>
<button type="button" onclick="window.jsBridge.jumpSystemPicture()">点击拉起原生系统相册</button>
</body>
<script type="text/javascript">
function test() {
console.info('Ark Web Component');
}
</script>
</html>上記の方法ではWebページ内でJSメソッドを呼び出すことしか述べていませんが、JSメソッドが返すデータを非同期で取得したい場合はどのようにすればよいのでしょうか?興味のある方はコメント欄の議論に注目してください。時間があるときにさらに説明を追加します。
この記事はここで終わります、読んでいただきありがとうございました！