Gestion persistante des états dans UniApp

Utilisation de Vuex pour la gestion globale de l'état. Vuex est un modèle de gestion d'état conçu pour les applications Vue.js. Il centralise le stockage de l'état de tous les composants de l'application et garantit des modifications prévisibles.

Création d'un store Vuex :

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const magasin = new Vuex.Store({
  state: {
    total: 0
  },
  mutations: {
    augmenter (etat) {
      etat.total++
    }
  }
})

export default magasin

Enregistrement et montage :

// main.js
import Vue from 'vue'
import magasin from './store'

new Vue({
  store: magasin
}).$mount('#app')

this.$store.commit('augmenter')
console.log(this.$store.state.total) //

...mapMutations('video', ['modifierVideo'])

La fonction d'aide mapMutations sert à lier des mutations spécifiques aux propriétés calculées ou méthodes d'un composant. Dans Vue.js, les mutations sont des fonctions qui modifient l'état du store Vuex. mapMutations permet d'attacher directement ces mutations au composant, qui peut alors les appeler via this.modifierVideo() pour modifier l'état. Elle ne peut lier que des mutations, pas des actions ou des getters. Pour ces dernières, on utilise mapActions ou mapGetters.

Filtres

Dans uni-app, les filtres sont des fonctions utilisées pour formater et traiter les données avant leur affichage. Ils peuvent traiter les dates, nombres, chaînes de caractères, etc.

Utilisation :
- Formatage des données (dates, devises...).
- Traitement des données (troncature, conversion de casse...).

Implémentation :
1. Définition du filtre dans un fichier, par exemple common/filters/formatageDate.js :

// common/filters/formatageDate.js
export function formatageDate(valeur) {
  // logique de traitement
  return valeurTraitee;
}

2. Enregistrement dans main.js :

import Vue from 'vue';
import { formatageDate } from './common/filters/formatageDate';

Vue.filter('formatageDate', formatageDate);

3. Utilisation dans le template :

<template>
  <div>
    <p>{{ date | formatageDate }}</p>
  </div>
</template>

Utilisation de Mescroll

Mescroll est une bibliothèque JS pour le rafraîchissement par tirage vers le bas et le chargement par défilement. Elle supporte Vue, React, Angular, Uni-app, etc. Dans uni-app, mescroll-uni exploite les événements de page onPullDownRefresh et onReachBottom. Son utilisation diffère entre une page et un composant.

Étapes d'intégration dans uni-app :

1. Installation : npm install mescroll.js --save
2. Importation : import MescrollUni from 'mescroll.js/mescroll-uni'
3. Configuration dans un composant :

export default {
  data() {
    return {
      defilement: null
    }
  },
  mounted() {
    this.defilement = new MescrollUni("#mescroll", {
      down: {
        callback: this.rafraichirDonnees
      },
      up: {
        callback: this.chargerDonnees
      }
    });
  },
  methods: {
    rafraichirDonnees(instance) {
      // Charger les données
      // Puis appeler instance.endSuccess()
    },
    chargerDonnees(instance) {
      // Charger les données
      // Puis appeler instance.endSuccess()
    }
  }
}

Dans un composant, il faut également ajouter du code dans la page parente.

Adaptation au clavier virtuel

Écoute de la hauteur du clavier pour ajuster la marge inférieure :

uni.onKeyboardHeightChange(({ height }) => {
      this.margeBas = height;
    });

À propos de v-if

À la différence du masquage CSS, v-if insère ou supprime réellement l'élément du DOM. Cela résout par exemple le problème de contenu persistant dans une popup : en utilisant v-if pour supprimer le composant enfant lors de la fermeture, on assure son réinitialisation à la prochaine ouverture.

<uni-popup ref="popup" type="bottom" @change="onChangementPopup">
          <commentaire-article
            v-if="afficherFormulaire"
            :id-article="idArticle"
            @envoye="onEnvoiReussi"
          />
        </uni-popup>

Paramètres dynamiques

Un attribut standard se lie ainsi :

<a v-bind:href="lien"> ... </a>
<!-- ou raccourci -->
<a :href="lien"> ... </a>

Avec un attribut dynamique, le nom de l'attribut est une variable :

<a v-bind:[nomAttribut]="lien"> ... </a>
<!-- raccourci -->
<a :[nomAttribut]="lien"> ... </a>

Si nomAttribut vaut "href", cela équivaut à l'exemple précédent. On peut également lier une fonction à un nom d'événement dynamique :

<a v-on:[nomEvenement]="action"> ... </a>
<!-- raccourci -->
<a @[nomEvenement]="action">

La valeur de l'expression doit être une chaîne ou null (qui supprime le binding).

Rafraîchissement du DOM réactif

Lorsque l'état réactif change, le rafraîchissement du DOM est déclenché, mais pas de façon synchrone. Vue regroupe les modifications pour mettre à jour chaque composant une seule fois. Pour exécuter du code après la mise à jour du DOM, utiliser nextTick() :

import { nextTick } from 'vue'

async function incrementer() {
  compteur.value++
  await nextTick()
  // Le DOM est maintenant mis à jour
}

Cette fonction retourne une promesse.

La fonction mounted

Le hook mounted est appelé une fois que le composant est monté dans le DOM et prêt pour l'interaction. On y place les initialisations, l'écoute des événements, les requêtes de données, etc.

Cycle de vie des pages

1. onLoad : Déclenché au chargement de la page. Reçoit un objet options contenant les paramètres de navigation.
2. onShow : Déclenché à chaque affichage de la page.
3. onReady : Déclenché après le premier rendu de la page.
4. onHide : Déclenché lorsque la page est masquée.
5. onUnload : Déclenché avant le déchargement de la page.
6. onPullDownRefresh : Déclenché par l'action de rafraîchissement.
7. onReachBottom : Déclenché lorsque l'utilisateur atteint le bas de la page.
8. onShareAppMessage : Déclenché lors du partage.

Transmission de paramètres par navigation

1. Paramètres simples via requête

 uni.navigateTo({
 url: `/sous-module/pages/detail-article/detail-article?auteur=${element.nom_utilisateur}&idArticle=${element.id}`
});

Récupération dans la page cible :

 onLoad(options) {
    this.auteur = options.auteur;
    this.idArticle = options.idArticle;
    this.chargerDetailArticle();
  }

2. Transmission d'un objet

navigateTo ne gère pas directement les objets complexes. Solutions :

Première méthode : sérialisation via JSON.stringify et encodeURIComponent.

uni.navigateTo({
  url: '/pages/detail/detail?donnees=' + encodeURIComponent(JSON.stringify(objet))
});

Désérialisation :

onLoad: function(options) {
  var donnees = JSON.parse(decodeURIComponent(options.donnees));
  // Utilisation de l'objet reçu
}

Seconde méthode : utiliser Vuex pour stocker et récupérer l'objet.

Pourquoi exporter en JavaScript ?

En JavaScript (modularité ES6), export rend les éléments (fonctions, classes, variables) accessibles dans d'autres fichiers/modules. Contrairement à Java où la visibilité est contrôlée par les modificateurs d'accès au sein des packages, le système de modules JavaScript est basé sur les fichiers et nécessite des exportations/importations explicites pour la réutilisation et l'organisation du code.

Lien entre uni-app, Vue et JavaScript

• JavaScript : Langage de script pour le web (et au-delà), dynamique et faiblement typé.
• Vue.js : Framework JavaScript progressif pour construire des interfaces utilisateur, avec liaison de données réactive et composants.
• uni-app : Framework basé sur Vue.js pour développer des applications multiplateformes (mini-programmes, H5, App natives).

Relations : Vue.js est écrit en JavaScript. uni-app repose sur Vue.js et utilise sa syntaxe. Les applications uni-app sont fondamentalement en JavaScript.

Compilation conditionnelle

Deux syntaxes pour inclure/exclure du code selon la plateforme :

 /* #ifdef H5 */
    console.log('Compilation pour la plateforme H5');
    /* #endif */
    /* #ifndef H5 */
    console.log('Compilation pour une autre plateforme que H5');
    /* #endif */

uni-modules et composants

uni-modules (HBuilderX 3.1.0+) : Norme de modularisation pour les plugins uni-app. Elle encapsule un ensemble de bibliothèques JS, composants, pages, fonctions cloud, etc., pour une intégration facile et une réutilisation inter-projets. Ils résident dans le dossier uni_modules.

Composants : Unités de base pour construire l'interface utilisateur. Ils encapsulent HTML, style et logique, et sont réutilisables et à couplage faible.

Différences : Un uni-module est une fonctionnalité complète (plus complexe, contient potentiellement des composants), tandis qu'un composnat est un élément d'UI spécifique. La gestion diffère (dossier dédié vs. components).

Commandes pour gérer les versions de Node

sudo npm cache clean -f // Nettoyer le cache
sudo npm install -g n // Installer le module n
npm view node versions // Lister toutes les versions
sudo n latest // Passer à la dernière version
sudo n stable // Passer à la version stable
sudo n xx.xx // Passer à une version spécifique

Extensions : Plugins natifs et UTS

Plugins natifs pour APP

Ils sont locaux ou issus du cloud.

Intégration d'un plugin local :

1. Créer un dossier nativeplugins (ou src/nativeplugins en mode CLI).
2. Télécharger le plugin depuis le marché (ex: DCloud RichAlert) et le décompresser dans ce dossier.
3. Activer le plugin dans manifest.json.
4. Construire un socle personnalisé (custom base) et lancer l'application sur le périphérique.

Développement d'un plugin natif :

1. Extension de type Module (non UI)

Créer un module Android. Ajouter les dépendances requises dans build.gradle (Glide, Fastjson, AndroidX, etc.) et la dépendance compileOnly vers l'AAR uni-app.

Créer la classe du module :

public class MonModule extends UniModule {
    private static final String TAG = "MonModule";
    @UniJSMethod(uiThread = true)
    public void fonctionAsynchrone(JSONObject parametres, UniJSCallback rappel) {
        Log.e(TAG, "Appel asynchrone");
        if(rappel != null) {
            JSONObject resultat = new JSONObject();
            resultat.put("statut", "succes");
            rappel.invoke(resultat);
        }
    }

    @UniJSMethod (uiThread = false)
    public JSONObject fonctionSynchrone(){
        JSONObject resultat = new JSONObject();
        resultat.put("statut", "succes");
        return resultat;
    }
}

Configuration de l'obfuscation (proguard-rules.pro) :

-keep public class * extends io.dcloud.feature.uniapp.common.UniModule{*;}

Empaqueter en AAR et créer la structure du plugin avec son fichier package.json décrivant les métadonnées et les plateformes supportées.

2. Extension de type Composant (UI)

Similaire au module, mais destiné à fournir des composants d'interface natifs. La documentation officielle fournit les étapes détaillées.

3. Test d'intégration

1. Enregistrer le plugin dans le projet uni-app.
2. Pour Android, générer les ressources d'application, les copier dans le projet natif, puis construire et exécuter le projet Android pour tester.

Points d'attention :

• Pour obtenir l'Activity, utiliser mUniSDKInstance.getContext() avec un instanceof préalable.
• Les composants de type "component" ne sont pas encore supportés dans les fichiers .vue ; seuls les modules fonctionnent.
• Certains callbacks de cycle de vie (comme onActivityResume) peuvent présenter des limitations, notamment au premier démarrage.

Plugins UTS

Les plugins UTS (UniApp TypeScript) étendent soit des API (appelées dans le script), soit des composants (utilisés dans le template).