Was ist der Unterschied zwischen Uniapp-Aufrufen von vue und nvue?

Unterschiede: 1. Der Aufruf von vue erfordert die Webview-Rendering-Methode, während der Aufruf von nvue die native Rendering-Methode von weex verwendet. 2. Das CSS der Vue-Schnittstelle unterstützt Medienabfragen, das CSS der NVUE-Seite unterstützt jedoch keine Medienabfragen. 3. Alle NVUE-Seiten verwenden ein Flex-Layout, und Vue-Seiten können mehrere Layoutmethoden haben.

Die Betriebsumgebung dieses Artikels: Windows10-System, Uni-App-Version 2.5.1, DELL G3-Computer.

Was ist der Unterschied zwischen Uniapp-Aufrufen von vue und nvue?

uni-app trennt Logik und Rendering auf der App-Seite.

Webview-Rendering im Mini-Programmmodus und natives Rendering im Weex-Modus. Sie können die beiden Rendering-Engines entsprechend Ihren Anforderungen auswählen.

• vue-dateibasiertes Webview-Rendering

• nvue verwendet Weex-basiertes natives Rendering

Komponenten und JS werden auf die gleiche Weise geschrieben, aber CSS ist unterschiedlich. Das CSS, das für den nativen Schriftsatz verwendet werden kann, muss be flex layout

Die App-Seite von uni-app verfügt über eine integrierte native Rendering-Engine, die auf der Weex-Verbesserung basiert und native Rendering-Funktionen bietet.

Wenn Sie auf der App-Seite die Vue-Seite verwenden, verwenden Sie das Webview-Rendering. Wenn Sie die NVUE-Seite (Abkürzung für Native Vue) verwenden, verwenden Sie das native Rendering. Zwei Seiten können gleichzeitig in einer App verwendet werden. Die Homepage verwendet beispielsweise nvue und die Seite der zweiten Ebene verwendet vue. Dies ist das Hallo-Uni-App-Beispiel.

Obwohl nvue auch über mehrere Terminals kompiliert werden kann und H5 und kleine Programme ausgeben kann, ist die CSS-Schreibmethode von nvue begrenzt. Wenn Sie also keine Apps entwickeln, müssen Sie nvue nicht verwenden.

nvue und vue kommunizieren miteinander

In der Uni-App können nvue- und vue-Seiten gemischt und angepasst werden.

Es wird empfohlen, uni.o n, u n i on, uni.on, uni.emit für die Seitenkommunikation zu verwenden

nvue Notes

1. Andere Layoutmethoden werden nicht unterstützt Prozentsatz kann nicht verwendet werden. Es ist zu beachten, dass Flex standardmäßig die vertikale Anordnung verwendet, d in App.vue wird nicht Es wird auf der NVUE-Seite wirksam.

3. Derzeit wird die Verwendung vorkompilierter Sprachen wie CSS und weniger auf NVUE-Seiten nicht unterstützt.

4. Schriftartdateien können nicht im Stil eingeführt werden. Referenz zur Verwendung von Schriftartsymbolen in nvue: Weex lädt benutzerdefinierte Schriftarten.

5. Die Klasse unterstützt beim Binden nur die Array-Syntax (Weex-Einschränkung).

6. Wenn die NVUE-Seite zur Vue-Seite springt, können Sie zum Springen nur die Routing-API der Uni-App aufrufen.

7. nvue unterstützt die Ausführung auf dem Simulator nicht. Beim Aufrufen der API der Uni-App in „created, the launch webview id is not ready“ kann ein Fehler auftreten. Wenn Sie die Ausführung um einige hundert Millisekunden verzögern, wird der Fehler nicht gemeldet. Wenn der NVUE-SeitentitelNview auf „false“ gesetzt ist und Sie die Statusleiste simulieren möchten, können Sie auf Folgendes verweisen: https://ask.dcloud.net.cn/article/35111.

8. nvue unterstützt die Verwendung von Import zum Einführen von externem CSS. Hinweis: Das Schreiben von Stilen unter dem Stilknoten von importiertem externem CSS wird nicht wirksam neuer Stilknoten.

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

9. Wenn beim Entwickeln von nvue der folgende Fehler auftritt, liegt das daran, dass eine Uni-App eine Vue-Seite haben muss. Dieses Problem kann durch Erstellen einer neuen leeren Vue-Seite im Projekt gelöst werden.

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. In nvue können Sie Schriftartdateien nicht direkt über @font-face einführen. Um Schriftartdateien einzuführen, müssen einfache Anführungszeichen in den Klammern der URL verwendet werden field

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

11. Viele CSS-Stile unterstützen keine Abkürzungen

Zum Beispiel legt border

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

image den Randradius fest

Sie können den Randradius für das Bild in nvue nicht festlegen Kreis, Sie müssen es um das Bild wickeln, der Code lautet wie folgt:

<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. Das Gerät unterstützt nur px und tut es unterstützt nicht em, rem, pt, %, upx

width Die Frage teilt den Telefonbildschirm automatisch in 750 Teile Breite und 1250 Teile Höhe

Empfohlen: „

Uni-App-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Uniapp-Aufrufen von vue und nvue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!