Cara uniapp menyepadukan pembangunan asli

Dengan pembangunan berterusan pasaran aplikasi mudah alih, membangunkan aplikasi merentas platform juga telah menjadi trend. Sebagai salah satu rangka kerja merentas platform yang paling banyak digunakan di pasaran, Uniapp disukai oleh pembangun kerana keserasian yang baik, kecekapan pembangunan yang tinggi dan penggunaan yang mudah. Walau bagaimanapun, apabila beberapa keperluan lebih disesuaikan atau beberapa fungsi asli perlu dipanggil, menggunakan Uniapp tulen untuk membangunkan aplikasi mungkin tidak dapat memenuhi keperluan. Pada masa ini, kami perlu menggunakan Uniapp dan asli untuk pembangunan bercampur, yang bukan sahaja dapat memenuhi beberapa keperluan tersuai, tetapi juga menggunakan sepenuhnya kecekapan pembangunan Uniapp. Di bawah ini kami akan memperkenalkan secara terperinci cara Uniapp menyepadukan pembangunan asli berdasarkan pengalaman pembangunan sebenar.

1. Kerja persediaan

Sebelum mula mengintegrasikan pembangunan asli, kami perlu memastikan bahawa persekitaran pembangunan Android dan iOS tempatan telah dikonfigurasikan dan mahir dalam menggunakannya. Pada masa yang sama, anda juga perlu memastikan bahawa anda sudah biasa menggunakan rangka kerja Uniapp dan menguasai operasi pembangunan asas.

2. Memperkenalkan pemalam asli

Dalam pembangunan Uniapp, kami boleh menggunakan fungsi asli dengan memperkenalkan pemalam asli. Terdapat dua cara untuk memperkenalkan pemalam asli dalam Uniapp, iaitu membangunkan pemalam sendiri dan menggunakan pemalam di pasaran.

1. Bangunkan pemalam anda sendiri

Tidak sukar untuk membangunkan pemalam asli Anda boleh menulis kod mengikut pelbagai dokumen pembangunan asli. Di sini saya akan memperkenalkan anda kepada contoh yang lebih umum: mendapatkan maklumat peranti.

Dalam Android, kami boleh mendapatkan maklumat peranti melalui kod berikut:

import android.content.Context;
import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;

public class DeviceInfoUtil {

    public static String getVersionName(Context context) {
        PackageManager packageManager = context.getPackageManager();
        try {
            PackageInfo packageInfo = packageManager.getPackageInfo(context.getPackageName(), 0);
            return packageInfo.versionName;
        } catch (PackageManager.NameNotFoundException e) {
            e.printStackTrace();
        }
        return "";
    }
}

Dan dalam iOS, kami boleh mendapatkan maklumat peranti melalui kod berikut:

#import <UIKit/UIKit.h>

@interface DeviceInfoUtil : NSObject

+ (NSString *)getUUID;

@end

@implementation DeviceInfoUtil

+ (NSString *)getUUID {
    NSString *uuid = [[[UIDevice currentDevice] identifierForVendor] UUIDString];
    return uuid;
}

@end

Selepas menulis fungsi asli, kami perlu membungkusnya ke dalam pemalam dan menerbitkannya ke pasaran Uniapp. Seterusnya, anda boleh memperkenalkan pemalam asli ke dalam Uniapp dan menggunakannya. Operasi khusus adalah seperti berikut:

(1) Mula-mula tambahkan rujukan kepada pemalam asli dalam fail manifest.json dalam projek aplikasi:

"app-plus": {
    // 其他配置
    "plugins": {
      "device": {
        "version": "1.0.0",
        "provider": "xx"
      }
    }
  }

Di mana peranti adalah nama dan versi pemalam ialah versi pemalam , pembekal ialah pembekal pemalam.

(2) Gunakan sintaks Vue.js untuk mentakrifkan fail JS, panggil fungsi pemalam dalam fail dan eksport:

const device = uni.requireNativePlugin('device')

function getVersionName() {
    return device.getVersionName()
}

export default {
    getVersionName
}

Antaranya, uni.requireNativePlugin('device ') Merujuk kepada sintaks pemalam, getVersionName() ialah fungsi yang kami takrifkan dalam pemalam untuk mendapatkan nombor versi.

2. Gunakan pemalam di pasaran

Selain membangunkan pemalam sendiri, kami juga boleh memuat turun pemalam asli yang dibangunkan oleh pembangun lain di pasaran Uniapp untuk menggunakan yang diperlukan fungsi asli. Operasi khusus adalah seperti berikut:

(1) Tambahkan komponen tersuai yang mengandungi pemalam yang diperlukan pada fail manifest.json dalam projek aplikasi:

"usingComponents": {
    "xxx": "@/components/xxx/xxx"
  }

Di mana, xxx mewakili nama Pemalam asli yang diperlukan, @/components/xxx/xxx menunjukkan laluan relatif di mana fail pemalam terletak dalam projek.

(2) Tulis kod untuk menggunakan pemalam dalam fail JS sintaks Vue.js:

import xxx from '@/components/xxx/xxx'

export default {
    data() {
        return {
            versionName: ''
        }
    },
    methods: {
        getVersion() {
            this.versionName = xxx.getVersionName()
        }
    }
}

Di mana, xxx ialah nama pemalam dan objek kaedah dalam sintaks Vue.js Fungsi getVersion() untuk mendapatkan nombor versi pemalam ditakrifkan, dan kaedah pemalam xxx.getVersionName() dipanggil di dalamnya untuk mendapatkan nombor versi.

3. Interaksi asli dengan Uniapp

Dalam langkah sebelumnya, kami telah berjaya menyepadukan pemalam asli. Walau bagaimanapun, semasa pembangunan kami juga mungkin perlu melaksanakan interaksi antara asli dan Uniapp. Contohnya, apabila pengguna bertindak balas kepada kawalan asli, mereka perlu beralih ke halaman Uniapp atau apabila halaman Uniapp perlu memanggil fungsi asli, mereka perlu memanggil kod asli, dsb. Pada masa ini, kita perlu menggunakan API yang disediakan oleh Uniapp untuk mencapainya.

1. Panggil kod asli

Untuk memanggil kod asli dalam Uniapp, anda boleh menggunakan kod berikut:

if (uni.os.android) {
    // Android端
    let intent = new Intent(Intent.ACTION_VIEW)
    intent.setClassName("com.package.name", "com.package.name.MainActivity")
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
    uni.context.startActivity(intent)
} else if (uni.os.ios) {
    // iOS端
    try {
        window.webkit.messageHandlers.nativeMethod.postMessage(params)
    } catch (e) {
        console.log(e)
    }
}

Antaranya, kaedah panggilan pada bahagian Android perlu menggunakan Android Dalam kelas Intent dalam API, tetapkan sasaran lompatannya dan parameter yang perlu dihantar apabila memanggil di bahagian iOS, anda perlu terlebih dahulu menentukan sama ada atribut messageHandlers wujud, dan kemudian hantar mesej asli melalui kaedah postMessage, dan parameter perlu ditukar kepada format JSON.

2. Terima mesej asli

Apabila kita perlu memindahkan data dari asli ke Uniapp, kita perlu menentukan fungsi panggil balik yang sepadan dalam Uniapp terlebih dahulu supaya orang asli boleh memanggil berfungsi dan lulus data. Fungsi biasa nativeCallback perlu ditakrifkan dalam fail sintaks Vue.js untuk menerima data asli dan memprosesnya dengan sewajarnya dalam aplikasi.

Berikut ialah kod untuk mentakrifkan fungsi:

export default {
    data() {
        return {
            versionName: ''
        }
    },
    mounted() {
        // 定义原生回调函数
        window.nativeCallback = (data) => {
            console.log(data)
        }
    }
}

Antaranya, window.nativeCallback ialah nama fungsi panggil balik yang ditakrifkan dan data ialah data yang dihantar daripada native. Dalam fungsi yang dipasang, kita boleh mentakrifkan fungsi panggil balik sebagai fungsi global dan kemudian menggunakannya di mana sahaja data perlu diterima.

Melalui kaedah di atas, kami boleh menggunakan pemalam asli dan memanggil kod asli dalam Uniapp untuk memenuhi keperluan senario yang berbeza.

4. Ringkasan

Artikel ini memperincikan langkah untuk Uniapp menyepadukan pembangunan asli dan cara menggunakan fungsi asli seperti pemalam asli dan kotak dialog. Bagi pembangun yang perlu menggunakan beberapa lagi fungsi tersuai atau perlu membangunkan aplikasi dengan cepat, mereka boleh menggunakan pemalam atau API asli yang berbeza mengikut keperluan sebenar untuk memenuhi keperluan mereka. Pada masa yang sama, apabila membangunkan pemalam asli, adalah disyorkan untuk merujuk kepada pelbagai dokumen pembangunan asli untuk menguasai pengetahuan berkaitan dengan lebih baik.

Atas ialah kandungan terperinci Cara uniapp menyepadukan pembangunan asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!