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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

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)

Comment gérer le stockage local à Uni-App? Comment gérer le stockage local à Uni-App? Mar 11, 2025 pm 07:12 PM

Cet article détaille les API de stockage local d'Uni-App (Uni.SetStorageSync (), Uni.GetStoragesYnc (), et leurs homologues asynchrones), mettant l'accent sur les meilleures pratiques telles que l'utilisation de clés descriptives, la limitation de la taille des données et la gestion de l'analyse JSON. Ça souligne que lo

Comment renommer les fichiers de téléchargement UNIAPP Comment renommer les fichiers de téléchargement UNIAPP Mar 04, 2025 pm 03:43 PM

Cet article détaille les solutions de contournement pour le renommer des fichiers téléchargés dans UNIAPP, manquant de support API direct. Android / iOS nécessite des plugins natifs pour le changement de nom post-téléchargement, tandis que les solutions H5 se limitent à suggérer des noms de fichiers. Le processus implique le tempor

Comment gérer l'encodage des fichiers avec UniApp Download Comment gérer l'encodage des fichiers avec UniApp Download Mar 04, 2025 pm 03:32 PM

Cet article aborde les problèmes d'encodage des fichiers dans les téléchargements UNIAPP. Il souligne l'importance des en-têtes de type contenu côté serveur et l'utilisation de TextDecoder de JavaScript pour le décodage côté client basé sur ces en-têtes. Solutions pour un problème d'encodage commun

Comment gérer l'état à Uni-App à l'aide de Vuex ou PINIA? Comment gérer l'état à Uni-App à l'aide de Vuex ou PINIA? Mar 11, 2025 pm 07:08 PM

Cet article compare Vuex et PINIA pour la gestion de l'État à Uni-App. Il détaille leurs fonctionnalités, leur implémentation et leurs meilleures pratiques, mettant en évidence la simplicité de Pinia contre la structure de Vuex. Le choix dépend de la complexité du projet, avec Pinia Suita

Comment utiliser les API de géolocalisation Uni-App? Comment utiliser les API de géolocalisation Uni-App? Mar 11, 2025 pm 07:14 PM

Cet article détaille les API de géolocalisation d'Uni-App, en se concentrant sur Uni.getLocation (). Il traite des pièges communs comme des systèmes de coordonnées incorrects (GCJ02 vs WGS84) et des problèmes d'autorisation. Améliorer la précision de l'emplacement via des lectures en moyenne et une manipulation

Comment faire des demandes d'API et gérer les données dans Uni-App? Comment faire des demandes d'API et gérer les données dans Uni-App? Mar 11, 2025 pm 07:09 PM

Cet article détaille la fabrication et la sécurisation des demandes d'API dans Uni-App à l'aide de Uni.Request ou Axios. Il couvre la gestion des réponses JSON, les meilleures pratiques de sécurité (HTTPS, authentification, validation des entrées), dépannage des échecs (problèmes de réseau, CORS, S

Comment utiliser les API de partage social de l'Uni-App? Comment utiliser les API de partage social de l'Uni-App? Mar 13, 2025 pm 06:30 PM

L'article détaille comment intégrer le partage social dans les projets Uni-App à l'aide de l'API Uni.share, couvrant la configuration, la configuration et les tests sur des plateformes comme WeChat et Weibo.

Comment utiliser la fonction Easycom d'Uni-App pour l'enregistrement des composants automatiques? Comment utiliser la fonction Easycom d'Uni-App pour l'enregistrement des composants automatiques? Mar 11, 2025 pm 07:11 PM

Cet article explique la fonctionnalité Easycom d'Uni-App, l'automatisation de l'enregistrement des composants. Il détaille la configuration, y compris Autoscan et la cartographie des composants personnalisés, mettant en évidence des avantages tels que la binelle réduite, la vitesse améliorée et la lisibilité améliorée.

See all articles