Quelle est la différence entre Uniapp appelant Vue et Nvue

Différences : 1. L'appel de vue nécessite la méthode de rendu webview, tandis que l'appel de nvue utilise la méthode de rendu native weex ; 2. Le CSS de l'interface vue prend en charge les requêtes multimédias, mais le CSS de la page nvue ne prend pas en charge les requêtes multimédias. 3. Les pages nvue utilisent toutes une mise en page flexible et les pages vue peuvent avoir plusieurs méthodes de mise en page.

L'environnement d'exploitation de cet article : système Windows10, uni-app version 2.5.1, ordinateur DELL G3.

Quelle est la différence entre uniapp appelant vue et nvue ?

uni-app sépare la logique et le rendu La couche de rendu fournit deux ensembles de moteurs de composition côté application.

Rendu Webview en mode mini-programme et rendu natif en mode weex Vous pouvez choisir les deux moteurs de rendu en fonction de vos besoins.

• Rendu de vue Web basé sur un fichier Vue

• nvue utilise le rendu natif basé sur Weex

Les composants et js sont écrits de la même manière, mais le CSS est différent. Le CSS qui peut être utilisé pour la composition native doit. be flex layout

Le côté application d'uni-app dispose d'un moteur de rendu natif intégré basé sur l'amélioration de weex, offrant des capacités de rendu natives.

Du côté de l'application, si vous utilisez la page vue, utilisez le rendu webview ; si vous utilisez la page nvue (abréviation de vue native), utilisez le rendu natif. Deux pages peuvent être utilisées dans une application en même temps. Par exemple, la page d'accueil utilise nvue et la page de deuxième niveau utilise vue. C'est l'exemple de hello uni-app.

Bien que nvue puisse également être compilé à plusieurs extrémités et générer des H5 et des petits programmes, la méthode d'écriture CSS de nvue est limitée, donc si vous ne développez pas d'applications, vous n'avez pas besoin d'utiliser nvue.

nvue et vue communiquent entre elles

Dans uni-app, les pages nvue et vue peuvent être mélangées et assorties.

Il est recommandé d'utiliser uni.o n, u n i. on, uni.on, uni.emit pour la communication des pages

nvue Notes

1. Les pages nvue utilisent toutes une mise en page flexible, les autres méthodes de mise en page ne sont pas prises en charge et ne peut pas être utilisé en pourcentage. Il convient de noter que flex est par défaut une disposition verticale, c'est-à-dire flex-direction: column Si vous devez changer la direction de la mise en page, vous pouvez utiliser flex-direction: row; change to horizontal arrangement

2. dans App.vue, cela ne prendra pas effet sur la page nvue.

3. Actuellement, l'utilisation de langages précompilés tels que s css et moins sur les pages nvue n'est pas prise en charge.

4. Les fichiers de polices ne peuvent pas être introduits avec style. Référence pour l'utilisation des icônes de polices dans nvue : weex charge des polices personnalisées.

5. Lors de la liaison d'une classe, seule la syntaxe de tableau est prise en charge (restriction weex).

6. Lorsque la page nvue passe à la page vue, vous ne pouvez appeler que l'API de routage d'uni-app pour sauter.

7. nvue ne prend pas en charge l'exécution sur le simulateur. Lors de l'appel de l'API d'uni-app lors de la création, une erreur d'identifiant de vue Web de lancement n'est pas prêt peut se produire. Si vous retardez l'exécution de quelques centaines de millisecondes, l'erreur ne sera pas signalée. Lorsque le titre de la page nvueNview est défini sur false, si vous souhaitez simuler la barre d'état, vous pouvez vous référer à : https://ask.dcloud.net.cn/article/35111.

8. nvue ne prend pas en charge l'utilisation de l'importation pour introduire du CSS externe. Vous devez utiliser la méthode suivante pour l'introduire. Remarque : l'écriture de styles sous le nœud de style du CSS externe importé ne prendra pas effet. nouveau nœud de style.

<style src="@/common/test.css"></style>
<style>
          .test {
              color: #E96900;
          }
</style>

9. Lors du développement de nvue, si vous rencontrez l'erreur suivante, c'est parce qu'une uni-app doit avoir une page de vue. Ce problème peut être résolu en créant une nouvelle page de vue vierge dans le projet.

Uncaught Error: module "common/vendor.js" is not defined
    20:31:58.664  Wed Jan 23 2019 20:33:31 GMT+0800 (CST) Page route 错误
    20:31:58.687  Page[pages/index/index] not found. May be caused by: 1. Forgot to add page route in pages.json. 2. Invoking Page() in async task.
    20:31:58.706  console.groupEnd

10. Dans nvue, vous ne pouvez pas introduire directement les fichiers de polices en CSS via @font-face. Vous devez utiliser le module dom dans js pour introduire les fichiers de polices. Les guillemets simples doivent être utilisés entre parenthèses de l'url dans le src. field

 const domModule = weex.requireModule('dom');
   domModule.addRule('fontFace', {
   'fontFamily': "iconfont",
   'src': "url('../../static/iconfont.ttf')"
   });

11. De nombreux styles CSS ne prennent pas en charge les abréviations

Par exemple, border

/* 错误 */
.class {
    border: 1px red solid;
}
 
/* 正确 */
.class {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

image définit border-radius

Vous ne pouvez pas définir border-radius pour l'image dans nvue si vous souhaitez changer le motif rectangulaire en un. cercle, vous devez l'enrouler autour de l'image. Layer div, le code est le suivant :

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image> </div>

12 Le contrôle de page nvue ne peut utiliser que v-if mais pas v-show

13. ne prend pas en charge em, rem, pt, %, upx

width La question divisera automatiquement l'écran du téléphone en 750 parties de largeur et 1250 parties de hauteur

Recommandé : "tutoriel uni-app"

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!