uniapp nvue page stepping pit rekord

0. Uniapp-Notizen

• Das CSS von Nvue unterstützt nur das Flex-Layout , das eine Teilmenge der CSS-Syntax von WebView ist. Dies liegt daran, dass der native Schriftsatz des Betriebssystems keine anderen Weblayouts als Flex unterstützt. Natürlich reicht Flex, um verschiedene Seiten anzuordnen, aber die Schreibweise muss angepasst werden.
• Für die Klassenbindung wird nur Array-Syntax unterstützt.
• Medienabfragen werden nicht unterstützt
• Schriftartdateien können nicht im Stil importiert werden
• Sie können keine prozentualen Layouts wie verwendenwidth：100%
• Es unterstützt nicht das Schreiben von Hintergrundbildern in css background-image, aber Sie können Bildkomponenten und Ebenen verwenden, um Hintergrundeffekte zu erzielen, die denen im Web ähneln. Weil die native Entwicklung selbst nicht das Hintergrundbildkonzept des Webs hat
• Verwenden Sie imageTags, unterstützen Sie base64, unterstützen Sie keine Bilder im SVG-Format
• Die Komponenten von nvue sind auf der Android-Seite standardmäßig transparent, wenn nicht gesetzt background-color, kann es zu Ghosting-Problemen kommen
• Der Textinhalt darf nur textunter der Komponente stehen, und textdie Komponente darf nicht in eine neue Zeile geschrieben werden, da es sonst umliegende Leerzeichen gibt, die nicht entfernt werden können
• Nur textEtiketten können Schriftgröße und Schriftfarbe festlegen

Darüber hinaus unterstützt CSS das Schreiben von hierarchischer Verschachtelung nicht

1. Iconfont-Problem kann nicht geladen werden

Die nvue-Seite muss Schriftarten über die von weex bereitgestellte DOM.addRule laden. Die offizielle Dokumentbeschreibung ist ziemlich detailliert, siehe dom | uni-app offizielle Website

Aber es gibt eine Sache, auf die Sie achten müssen, Font-Family kann nicht zitiert werden , es fühlt sich an wie ein Fehler von Uniapp

    <style>
		.my-iconfont {
			font-family: myIconfont; // 不能加引号
			font-size: 60rpx;
			color: #00AAFF;
		}
	</style>

Der im Projekt verwendete Iconfont von Ali wird nicht für die Verwendung von CDN-Diensten empfohlen, und seine Plattform verspricht keine Stabilität für langfristige Dienste.

import base64Font from '@/static/iconfont/base64.js'

  beforeCreate() {
    /* #ifdef APP-NVUE */
    domModule.addRule('fontFace', {
      fontFamily: 'ft',
      src: `url('${base64Font}')`,
    })
    /* #endif  */
  },

Bedingte Kompilierung wird hier hinzugefügt, da nvue-Seiten auch in h5 kompiliert werden können.

2. Höheneinstellung der Statusleiste

uniapp stellt die CSS-Variable --status-bar-height für die Höhe der Statusleiste zur Verfügung, die vue-Seite kann normal verwendet werden, aber die Höhenerfassung in nvue ist nicht genau, es wird empfohlen, die Methode plus.navigator.getStatusbarHeight zu verwenden, um sie festzulegen der Style

<view class="status-bar" :style="{ height: barHeight + 'px' }" />

export default {
   data() {
    return {
      barHeight: 0, // 动态高度初始值
    }
   },
   onLoad() {
    this.barHeight = plus.navigator.getStatusbarHeight()
  },
}

3. Unterstützt keine Aliaskonfiguration in vue.config.js

Vor der Verwendung von nvue wurden einige Aliase im Projekt festgelegt, z

chainWebpack: (config) => {
    config.resolve.alias
      .set('IMG', resolove('static/image'))
      .set('COMPONENTS', resolove('components'))
}

Auf diese Weise können Sie xxx aus „IMG/xyz“ in die Seite oder Komponente importieren, aber dies wird von der nvue-Kompilierung nicht unterstützt, und Sie müssen alle diese Aliase entfernen 

4. Auf Vue.prototype definierte globale Variablen werden nicht unterstützt

5. Das Springen zur nvue-Seite löst erneut onLaunch aus

Es wurde festgestellt, dass dieses Problem damit begann, dass nach dem Betreten der nvue-Seite der Routing-Sprung anfing, den Bildschirm zu blinken.Nach dem Testen wurde schließlich festgestellt, dass der Eintrag main.js wiederholt ausgeführt wurde, wenn die nvue-Seite von der vue-Seite aus betreten wurde, weil Die Routing-Jump-Methode befindet sich in main.js. Der Interceptor wird hinzugefügt, und dieser Teil wird auch wiederholt registriert. Die hbuilderx-Version ist 3.6.4. Es wird vermutet, dass es sich um einen Fehler von uni handelt. Main.js sollte nicht wiederholt ausgeführt werden. Die vorübergehende Lösung besteht darin, allen Ausführungen in main.js eine Beurteilungsebene hinzuzufügen, und die Code-Level-Garantien dass es nicht wiederholt ausgeführt wird. Fahren Sie mit der neuen Version von hx fort, um zu sehen, ob dieses Problem besteht