Comment Uniapp intègre le développement natif

Avec le développement continu du marché des applications mobiles, le développement d'applications multiplateformes est également devenu une tendance. En tant que l'un des frameworks multiplateformes les plus utilisés sur le marché, Uniapp est apprécié des développeurs pour sa bonne compatibilité, sa haute efficacité de développement et sa simplicité d'utilisation. Cependant, lorsque certains besoins sont plus personnalisés ou que certaines fonctions natives doivent être appelées, l'utilisation d'Uniapp pure pour développer des applications peut ne pas être en mesure de répondre aux besoins. À l'heure actuelle, nous devons utiliser Uniapp et natif pour un développement mixte, qui peut non seulement répondre à certains besoins personnalisés, mais également exploiter pleinement l'efficacité du développement Uniapp. Ci-dessous, nous présenterons en détail comment Uniapp intègre le développement natif sur la base de l'expérience de développement réelle.

1. Préparatifs préliminaires

Avant de commencer à intégrer le développement natif, nous devons nous assurer que les environnements de développement Android et iOS locaux ont été configurés et maîtrisent leur utilisation. Dans le même temps, vous devez également vous assurer que vous maîtrisez l’utilisation du framework Uniapp et maîtrisez les opérations de développement de base.

2. Introduire des plug-ins natifs

Dans le développement Uniapp, nous pouvons utiliser des fonctions natives en introduisant des plug-ins natifs. Il existe deux manières d'introduire des plug-ins natifs dans Uniapp : développer soi-même des plug-ins et utiliser des plug-ins du marché.

1. Développez vos propres plug-ins

Il n'est pas difficile de développer des plug-ins natifs Vous pouvez écrire du code selon divers documents de développement natifs. Ici, je vais vous présenter un exemple plus général : obtenir des informations sur l'appareil.

Sous Android, nous pouvons obtenir les informations sur l'appareil via le code suivant :

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 "";
    }
}

Et sous iOS, nous pouvons obtenir les informations sur l'appareil via le code suivant :

#import <UIKit/UIKit.h>

@interface DeviceInfoUtil : NSObject

+ (NSString *)getUUID;

@end

@implementation DeviceInfoUtil

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

@end

Après avoir écrit la fonction native, nous devons la conditionner dans un plug-in et publiez-le sur le marché d'Uniapp. Ensuite, vous pouvez introduire le plug-in natif dans Uniapp et l'utiliser. Les opérations spécifiques sont les suivantes :

(1) Ajoutez d'abord une référence au plug-in natif dans le fichier manifest.json du projet d'application :

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

Parmi eux, le périphérique est le nom du plug-in, la version est le version du plug-in, et le fournisseur est le fournisseur du plug-in.

(2) Utilisez la syntaxe Vue.js pour définir un fichier JS, appelez la fonction du plug-in dans le fichier et exportez :

const device = uni.requireNativePlugin('device')

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

export default {
    getVersionName
}

Parmi eux, uni.requireNativePlugin('device') est la syntaxe de référencement du plug-in, et getVersionName() est la fonction que nous avons définie dans le plug-in pour obtenir le numéro de version.

2. Utiliser les plug-ins du marché

En plus de développer nous-mêmes des plug-ins, nous pouvons également télécharger des plug-ins natifs développés par d'autres développeurs sur le marché Uniapp pour utiliser les fonctions natives requises. Les opérations spécifiques sont les suivantes :

(1) Ajouter un composant personnalisé contenant le plug-in requis dans le fichier manifest.json du projet d'application :

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

Parmi eux, xxx représente le nom natif du plug-in requis, @ /components/xxx/xxx Indique le chemin relatif où se trouve le fichier du plug-in dans le projet.

(2) Écrivez le code pour utiliser le plug-in dans le fichier JS de la syntaxe Vue.js :

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

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

où, xxx est le nom du plug-in, et la fonction getVersion pour obtenir la version du plug-in Le numéro est défini dans l'objet méthodes de la syntaxe Vue.js. () et y appelle la méthode du plug-in xxx.getVersionName() pour obtenir le numéro de version.

3. Interaction native avec Uniapp

Dans les étapes précédentes, nous avons intégré avec succès le plug-in natif. Cependant, pendant le développement, nous devrons peut-être également implémenter une interaction entre le natif et Uniapp. Par exemple, lorsque les utilisateurs répondent à des contrôles natifs, ils doivent basculer vers la page Uniapp ou lorsque la page Uniapp doit appeler des fonctions natives, ils doivent appeler du code natif, etc. Pour le moment, nous devons utiliser l'API fournie par Uniapp pour y parvenir.

1. Appeler le code natif

Pour appeler du code natif dans Uniapp, vous pouvez utiliser le code suivant :

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)
    }
}

Parmi eux, la méthode d'appel côté Android doit utiliser la classe Intent dans l'API Android, définir son saut cible et les paramètres qui doivent être transmis ; iOS Lors de l'appel à la fin, vous devez d'abord déterminer si l'attribut messageHandlers existe, puis envoyer le message au natif via la méthode postMessage, et les paramètres doivent être convertis en JSON. format.

2. Recevoir des messages natifs

Lorsque nous devons transférer des données du natif vers Uniapp, nous devons définir à l'avance la fonction de rappel correspondante dans Uniapp afin que le natif puisse appeler la fonction et transmettre les données. Une fonction commune nativeCallback doit être définie dans le fichier de syntaxe Vue.js pour recevoir les données natives et les traiter en conséquence dans l'application.

Voici le code pour définir la fonction :

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

Parmi eux, window.nativeCallback est le nom de la fonction de rappel définie, et data sont les données transmises depuis native. Dans la fonction montée, nous pouvons définir la fonction de rappel comme une fonction globale, puis l'utiliser partout où des données doivent être reçues.

Grâce aux méthodes ci-dessus, nous pouvons utiliser des plug-ins natifs et appeler du code natif dans Uniapp pour répondre aux besoins de différents scénarios.

4. Résumé

Cet article détaille les étapes permettant à Uniapp d'intégrer le développement natif et comment utiliser les fonctions natives telles que les plug-ins natifs et les boîtes de dialogue. Pour les développeurs qui ont besoin d'utiliser des fonctions plus personnalisées ou de développer rapidement des applications, ils peuvent utiliser différents plug-ins ou API natifs en fonction des besoins réels pour répondre à leurs besoins. Parallèlement, lors du développement de plug-ins natifs, il est recommandé de se référer aux différents documents de développement natifs pour mieux maîtriser les connaissances pertinentes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!