SuperApp:Bagaimana cara mengintegrasikan kontainer miniapp uni-app ke dalam aplikasi asli yang dikembangkan berdasarkan uni-app?

Skenario

Anda ingin mengintegrasikan kontainer miniapp uni-app ke dalam aplikasi asli berbasis uni-app. Untuk informasi lebih lanjut tentang skenario lainnya, lihat Mengintegrasikan Kontainer Miniapp ke dalam Aplikasi Android.

Solusi

1. Unduh plug-in asli uni-app EMASUniAppPlugin.

2. Ekstrak paket EMASUniAppPlugin.zip dan salin folder hasil ekstraksi ke folder nativeplugins proyek uni-app Anda.

3. Buka proyek uni-app Anda di HBuilderX. Klik file manifest.json dari proyek uni-app. Untuk mengonfigurasi plug-in aplikasi asli, pilih EMASUniAppPlugin di folder nativeplugins sebagai plug-in lokal.

4. Klik file manifest.json lagi dan beralih ke tampilan kode sumber. Temukan parameter app-plus dan tambahkan parameter UniMP ke parameter modules.

5. Gunakan plug-in EMASUniAppPlugin dan kontainer miniapp uni-app di proyek uni-app Anda.

   // Dapatkan kontainer miniapp uni-app.
   const mp = uni.requireNativePlugin('uniMP');
   // Dapatkan plug-in EMASUniAppPlugin.
   var emasModule = uni.requireNativePlugin("EMASUniAppPlugin");

Referensi API untuk plug-in EMASUniAppPlugin

configEmas

var ret = emasModule.configEmas({
					'appKeyAndroid': 'xxx',
					'appSecretAndroid': 'xxx',
					'channelIdAndroid': 'xxx',
					'mtopDomain': 'xxx',
					'useHttp': 'false',
					'appKeyIOS': 'xxx',
					'appSecretIOS': 'xxx',
					'channelIdIOS': 'xxx'
				})

Menginisialisasi plug-in EMASUniAppPlugin. Metode ini bersifat sinkron.

updateMiniApp

emasModule.updateMiniapp({
					'appId': 'xxx',
				}, (ret) => {
					
				})

Memperbarui versi miniapp. Jika miniapp memiliki versi baru, Anda dapat memanggil metode ini untuk mengunduh dan menginstal miniapp versi baru. Metode ini bersifat asinkron.

Contoh:

emasModule.updateMiniapp({
					'appId': '151624424672398147591',
				}, (ret) => {
					if (ret.code === 0) {
            // Instal miniapp dengan menggunakan kontainer miniapp.
						mp.installUniMP({
							appid: '__UNI__151624424672398147591',
							wgtFile: ret.wgtPath
						}, (r) => {
							if (0 == r.code) {
								uni.showToast({
									title: 'Miniapp berhasil diinstal.'
								});
								// Setelah miniapp diinstal, buka miniapp.
								mp.openUniMP({
									appid: '__UNI__151624424672398147591'
								}, (ret) => {
									if (0 != ret.code) {
										uni.showModal({
											title: 'Miniapp gagal dimulai.',
											content: JSON.stringify(ret),
											showCancel: false
										});
									}
									console.log('openUniMP: ' + JSON.stringify(ret));
								});
							} else {
								uni.showModal({
									title: 'Miniapp gagal diinstal.',
									content: JSON.stringify(r),
									showCancel: false
								});
							}
							console.log('installUniMP: ' + JSON.stringify(r));
						});
					}
				})

getMiniappList

emasModule.getMiniappList({
					'appIdList': '[xxx]',
				}, (ret) => {
					
				})

Meminta daftar miniapps. Metode ini bersifat asinkron.

Memperoleh ID miniapp

1. Masuk ke konsol Application Open Platform.

2. Pilih ruang kerja untuk masuk ke halaman Overview ruang kerja.

   Catatan

   Jika Anda hanya bergabung dengan satu ruang kerja, Anda akan diarahkan ke halaman Overview ruang kerja setelah masuk ke konsol Application Open Platform.

3. Di panel navigasi sebelah kiri, klik Mini Apps. Halaman Miniapp List akan muncul.

4. Di halaman Miniapp List, temukan miniapp yang ID-nya ingin Anda peroleh dan catat ID tersebut.