Maison interface Web uni-app Comment Uniapp intègre le développement natif

Comment Uniapp intègre le développement natif

Apr 23, 2023 am 09:19 AM

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 "";
    }
}
Copier après la connexion

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
Copier après la connexion

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"
      }
    }
  }
Copier après la connexion

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
}
Copier après la connexion

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"
  }
Copier après la connexion

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()
        }
    }
}
Copier après la connexion

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)
    }
}
Copier après la connexion

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.

  1. 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)
        }
    }
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quels sont les différents types de tests que vous pouvez effectuer dans une application UNIAPP? Quels sont les différents types de tests que vous pouvez effectuer dans une application UNIAPP? Mar 27, 2025 pm 04:59 PM

L'article traite de divers types de tests pour les applications UNIAPP, y compris l'unité, l'intégration, les tests fonctionnels, UI / UX, les performances, la plate-forme multiplateforme et la sécurité. Il couvre également une compatibilité multiplateforme et recommande des outils comme JES

Comment pouvez-vous réduire la taille de votre package d'application UNIAPP? Comment pouvez-vous réduire la taille de votre package d'application UNIAPP? Mar 27, 2025 pm 04:45 PM

L'article traite des stratégies pour réduire la taille du package UNIAPP, en se concentrant sur l'optimisation du code, la gestion des ressources et les techniques comme le fractionnement du code et le chargement paresseux.

Quels outils de débogage sont disponibles pour le développement UNIAPP? Quels outils de débogage sont disponibles pour le développement UNIAPP? Mar 27, 2025 pm 05:05 PM

L'article traite des outils de débogage et des meilleures pratiques pour le développement de l'UNIAPP, en se concentrant sur des outils comme HBuilderx, WeChat Developer Tools et Chrome Devtools.

Comment pouvez-vous utiliser le chargement paresseux pour améliorer les performances? Comment pouvez-vous utiliser le chargement paresseux pour améliorer les performances? Mar 27, 2025 pm 04:47 PM

Le chargement paresseux dépasse les ressources non critiques pour améliorer les performances du site, réduire les temps de chargement et l'utilisation des données. Les pratiques clés incluent la priorité au contenu critique et l'utilisation d'API efficaces.

Comment pouvez-vous optimiser les images pour les performances Web à UniApp? Comment pouvez-vous optimiser les images pour les performances Web à UniApp? Mar 27, 2025 pm 04:50 PM

L'article discute de l'optimisation des images dans UniaPP pour de meilleures performances Web par compression, conception réactive, chargement paresseux, mise en cache et utilisation du format WebP.

Comment UniApp gère-t-il la configuration et le style global? Comment UniApp gère-t-il la configuration et le style global? Mar 25, 2025 pm 02:20 PM

UniApp gère la configuration globale via Manifest.json et le style via app.vue ou app.scss, en utilisant Uni.scss pour les variables et les mixins. Les meilleures pratiques incluent l'utilisation de SCSS, de styles modulaires et de conception réactive.

Quels sont les modèles communs pour gérer des structures de données complexes dans UNIAPP? Quels sont les modèles communs pour gérer des structures de données complexes dans UNIAPP? Mar 25, 2025 pm 02:31 PM

L'article discute de la gestion des structures de données complexes dans l'UNIAPP, en se concentrant sur des modèles tels que Singleton, Observer, Factory et State, et des stratégies pour gérer les changements d'état de données à l'aide de l'API de composition Vuex et Vue 3.

Quelles sont les propriétés calculées à UniApp? Comment sont-ils utilisés? Quelles sont les propriétés calculées à UniApp? Comment sont-ils utilisés? Mar 25, 2025 pm 02:23 PM

Les propriétés calculées de l'UNIAPP, dérivées de Vue.js, améliorent le développement en fournissant une gestion des données réactive, réutilisable et optimisée. Ils mettent automatiquement à jour lorsque les dépendances changent, offrant des avantages de performance et simplifiant la gestion de l'État

See all articles