1. Skenario Penggunaan Jembatan H5
Skenario 1: Cara melaporkan data H5 ke aplikasi H5 dan aplikasi APP secara bersamaan
Aktivitas H5 "Spring Day" disematkan di beberapa terminal App dan dioperasikan dalam mode saat ini guna memenuhi persyaratan analisis berikut:
Operator aplikasi perlu melihat data tautan lengkap, baik sebelum maupun sesudah pelanggan berpartisipasi dalam aktivitas H5 di aplikasi.
Data aktivitas H5 dari semua aplikasi ditampilkan.
Operasi
Buat dua aplikasi:
Aplikasi yang memiliki appKey sendiri
Aplikasi Web/H5 dengan appKey_h5 tersendiri
Konfigurasi SDK
enableJSBridge=truediaktifkan, dan javaScriptProxy kustom telah disuntikkan ke halaman WebView aplikasi.
Laporan log
Jika suatu peristiwa pelacakan dipicu di sisi H5 pada saat ini:
Klien pelaporan | Isi log. |
Aplikasi |
|
Aplikasi H5 di webview |
|
Skenario 2: Cara melaporkan data H5 ke aplikasi APP unik
Karena arsitektur teknis, beberapa halaman diimplementasikan menggunakan H5. Berdasarkan mode saat ini, persyaratan analisis berikut dapat dipenuhi:
Anda dapat melihat data lengkap terkait bisnis, operasi, dan PD aplikasi di data aplikasi.
Operasi
Buat aplikasi menggunakan satu appKey_app saja.
Konfigurasi SDK
enableJSBridge=truediaktifkan, dan javaScriptProxy kustom disuntikkan ke halaman WebView aplikasi. Untuk informasi lebih lanjut, lihat 2.1.appKey H5 dapat dibiarkan kosong. Dalam hal ini, SDK H5 akan mencetak log peringatan, namun tidak memengaruhi jumlah pengiriman. Atur aplus-jsbridge-only ke true untuk menonaktifkan pelaporan data H5.
Laporan log
Jika suatu peristiwa pelacakan dipicu di sisi H5 pada saat ini:
Klien pelaporan | Isi log. |
Aplikasi |
|
Aplikasi H5 di webview | Laporkan tanpa log |
Skenario 3: Cara melaporkan data H5 hanya ke aplikasi H5
Bisnis, operasi, dan pengembangan aplikasi tidak ingin melihat data H5 di aplikasi.
Operasi
Buat dua aplikasi:
Aplikasi yang memiliki appKey sendiri
Aplikasi Web/H5 dengan appKey_h5 tersendiri
Tidak ada panggilan API yang dilakukan. Aplikasi app dan aplikasi h5 dilacak secara terpisah.
Laporan log
Jika suatu peristiwa pelacakan dipicu di sisi H5 pada saat ini:
Klien pelaporan | Isi log. |
Aplikasi | Laporkan tanpa log |
Aplikasi H5 di webview |
|
2. Penjelasan Prinsip Jembatan H5

Prasyarat untuk pelaporan log dalam skenario 1 hingga 3 di atas adalah sebagai berikut:
HarmonyOS Next App mengintegrasikan QuickTracking HarmonyOS Next SDK.
Halaman H5 di aplikasi mengintegrasikan QuickTracking H5 SDK
2.1. Kode Aplikasi HarmonyOS Next
Deskripsi API Jembatan
Anda harus terlebih dahulu mengaktifkan konfigurasi SDK enableJSBridge=true. Jika tidak, panggilan API jembatan tidak valid.
import { createJSBridgeProxy } from '@quicktracking/analytics';
function createJSBridgeProxy(controller: WebviewController)Tabel berikut menjelaskan parameter dalam pernyataan di atas.
Nilai | Deskripsi |
controller | HarmonyOS Next system webview controller WebviewController |
Gunakan kode contoh yang ditunjukkan pada gambar berikut dan konfigurasikan parameter dalam kode.
import { webview } from '@kit.ArkWeb'
import { BusinessError } from '@kit.BasicServicesKit'
import { promptAction } from '@kit.ArkUI'
import { createJSBridgeProxy } from '@quicktracking/analytics';
@Entry
@Component
struct WebPage {
@State message: string = 'Hello World';
controller: webview.WebviewController = new webview.WebviewController();
responseWeb: WebResourceResponse = new WebResourceResponse();
onPageShow(): void {
// Saat Anda perlu memperkenalkan JSProxy lain yang ditentukan pengguna
// const qtJSProxy:QTJSProxyObject = createJSBridgeProxy(this.controller);
// this.controller.registerJavaScriptProxy(qtJSProxy.object, qtJSProxy.name, qtJSProxy.methodList)
// this.controller.registerJavaScriptProxy(this.testObjtest,"objName",["test"],["asyncTestBool"]);
}
build() {
Column() {
Web({src: $rawfile('index.html'), controller: this.controller})
.javaScriptAccess(true)
.javaScriptProxy(createJSBridgeProxy(this.controller))
}
.height('100%')
.width('100%')
}
}2.2. Kode Sisi Aplikasi H5
Hanya lapor log melalui saluran APP dan nonaktifkan API log pelaporan saluran H5
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-jsbridge-only', true]
});Perhatian: Jika H5 mengatur aplus-jsbridge-only menjadi true, SDK H5 tidak akan melaporkan acara pelacakan. Pastikan untuk memeriksa halaman H5 non-aplikasi dan hindari pengaturan ini.
Atribut global H5 berlaku secara global
Setelah mengaktifkan operasi API berikut di H5, properti global yang dikonfigurasi menggunakan globalproperty di aplus.appendMetaInfo atau globalproperty di aplus.setMetaInfo akan disinkronkan ke aplikasi asli. (Antarmuka ini defaultnya false.)
Perhatian: API ini didukung di qt_web_v2.0.12 dan versi berikutnya.
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-globalproperty-sync-enable', true]
});Sebagai contoh, jika Anda menetapkan atribut global "Kota Saat Ini: Beijing" di aplikasi dan "Kota Saat Ini: Shanghai" di H5 aplikasi, atribut global untuk acara yang dipicu di H5 dan aplikasi asli akan menjadi "Kota Saat Ini: Shanghai". Namun, jika sakelar ini tidak diaktifkan, atribut global yang ditetapkan di H5 tidak akan berlaku di aplikasi asli.