Manfaatkan keunggulan produk SuperApp untuk dengan cepat mengonversi aplikasi H5 yang ada menjadi miniapp, meningkatkan pengalaman pengguna dan efisiensi pengembangan.
Panduan ini hanya berlaku untuk aplikasi H5 satu halaman. Anda dapat dengan cepat mengonversi aplikasi satu halaman menjadi miniapp dengan mengikuti langkah-langkah di bawah ini. Jika aplikasi Anda adalah aplikasi multi-halaman, disarankan untuk terlebih dahulu mengonversinya menjadi aplikasi satu halaman menggunakan tumpukan teknologi umum seperti React atau Vue, atau langsung mulai perjalanan miniapp Anda dengan merujuk pada kerangka kerja WindVane.
Cara Memodifikasi Kode
Penyesuaian URL Permintaan
Dalam kode frontend, saat melakukan permintaan ke backend, jika Anda menggunakan jalur relatif, ubahlah menjadi jalur absolut yang mencakup host.
Adaptasi UI
Adaptasi Header
Seperti yang ditunjukkan pada gambar, jika proyek H5 memiliki header bawaan, itu perlu disembunyikan dalam skenario miniapp. Sebagai gantinya, judul miniapp harus diatur dengan memanggil JSAPI.
Contoh kode rinci diberikan di bawah ini:
// React: Jika framework tidak memiliki logika render umum, dapat dikapsulasi ke dalam useLayout
...
useEffect(() => {
// Periksa apakah ini miniapp
const isMiniprogram = window?.WindVane;
if (isMiniprogram) {
// Atur navbar
const params = {
title: "{{title}}",
titleColor: '#000000',
barStyle: 'normal',
backgroundColor: '#FFFFFFFF', // rgba
hideBackButton: 'false',
theme: 'dark'
};
window?.WindVane.call('WVNavigationBar', 'update', params, function() {
// berhasil
}, function(e: any) {
// gagal
});
}
}, [])
...Adaptasi Navigasi Halaman
Navigasi ke Halaman Aplikasi Internal
Sebagai contoh, https://superapp.demos.com/docment adalah aplikasi H5 satu halaman, sedangkan https://superapp.demos.com/console adalah aplikasi H5 satu halaman lainnya. Untuk navigasi berbasis API Web, kode yang menggunakan window.location.href perlu dimodifikasi. Publikasikan dua aplikasi internal tersebut sebagai dua miniapp dan tangani dengan kode berikut:
window.WindVane.call(
"wv",
"navigateToMiniApp",
{
appId: appId // ID miniapp saat ini
},
function () {
console.log('buka miniapp berhasil');
},
function (error) {
console.log('buka miniapp error', error);
}
);
Navigasi ke Halaman Aplikasi Eksternal
Secara default, SDK kontainer tidak akan mencegat navigasi ke URL eksternal, seperti membuka situs web (misalnya, https://www.alibabacloud.com) di dalam miniapp. Anda cukup menggunakan metode navigasi web seperti yang ditunjukkan di bawah ini:
window.location.href = "https://www.alibabacloud.com"Jika aplikasi klien telah mengimplementasikan logika intersepsi, apakah navigasi efektif atau tidak akan bergantung pada implementasi spesifik.
Adaptasi Proyek
Berikut ini adalah persyaratan wajib; ketidakpatuhan dapat menyebabkan kegagalan pemuatan miniapp.
Routing Harus Berbasis Hash
Arsitektur teknologi yang berbeda memiliki cara sendiri untuk menetapkan mode routing, sehingga tidak ada metode modifikasi yang seragam; Anda perlu menyesuaikannya sendiri.
Hash Routing: https://superapp.demos.com/#/home (Benar)
History Routing: https://superapp.demos.com/home (Salah)
Direktori Terkemas Harus Termasuk index.html
Seperti yang ditunjukkan di bawah ini:
Dependensi Plugin VScode (Dapat diabaikan jika mengunggah melalui konsol)
package.json di direktori root harus mencakup bidang versi.
Perintah eksekusi paket harus bernama build, yaitu paket harus dapat dibuat melalui npm run build.
Nama direktori target pengemasan default harus dist. Jika direktori target paket proyek bukan dist, Anda perlu menetapkan nama jalur pengemasan di pengaturan plugin VScode.
Mengenalkan JSAPI SDK
Dalam index.html aplikasi satu halaman, sertakan windvane.js, seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="telephone=no" name="format-detection">
<link rel="shortcut icon" href="/favicon.svg">
...
<script src="https://g.alicdn.com/mtb/lib-windvane/3.0.0/windvane.js"></script>
...
...
</head>
</html>Cara Mempublikasikan Miniapp
Unggah melalui Konsol
Kompres semua file sumber daya statis yang telah dikemas menjadi file ZIP, seperti yang ditunjukkan pada gambar di bawah ini, lalu unggah dan publikasikan di platform SuperApp.
