So lösen Sie das Problem, dass nach Uniapp-Sprüngen schwarze Punkte auftauchen-uni-app-php.cn

So lösen Sie das Problem, dass nach Uniapp-Sprüngen schwarze Punkte auftauchen

PHPz

Freigeben： 2023-04-19 14:39:46

Original

1080 Leute haben es durchsucht

In den letzten Jahren ist die plattformübergreifende Entwicklung mit der rasanten Entwicklung der mobilen Internettechnologie zu einem heißen Thema in der Branche geworden. Unter diesen wird Uniapp als plattformübergreifendes Entwicklungsframework von Entwicklern bevorzugt. Bei der Entwicklung von Anwendungen mit uniapp stoßen einige Entwickler jedoch auf ein Problem: Nach dem Sprung auf die Seite erscheinen schwarze Punkte. Dieses Problem hat den Entwicklern einige Probleme bereitet. In diesem Artikel werden die Ursachen und Lösungen für dieses Problem unter folgenden Gesichtspunkten erläutert:

1 Die Gründe für das Auftreten von schwarzen Punkten

#🎜 # Zu diesem Problem lautet die offizielle Erklärung von uniapp: Bei einigen Modellen wird beim Seitenwechsel das Flackern des schwarzen Bildschirms, das durch das Umschalten zwischen Hauptprozess und Unterprozess verursacht wird, vom Betriebssystem des Mobilgeräts erkannt Erinnern Sie Benutzer in Form von schwarzen Punkten daran. Daher wird diese Situation durch die Eigenschaften des Betriebssystems des Mobilgeräts verursacht und hat nichts mit dem Uniapp-Entwicklungsframework selbst zu tun.

2. Lösung

Aus den oben genannten Gründen können wir je nach Situation unterschiedliche Lösungen anwenden:

Wenn Sie zu einer Seite springen, kann die Aktivierung der Seitenübergangsanimation das durch den Seitenwechsel verursachte Flackern des schwarzen Bildschirms verringern und so das Auftreten schwarzer Punkte reduzieren. Für das Uniapp-Framework stellt der Beamte eine Fülle von Übergangsanimationen zur Auswahl, die je nach Bedarf eingestellt werden können. Beim Schreiben von Code können Sie die folgende Methode verwenden, um die Seitenübergangsanimation zu aktivieren:

<template>
  <view>
    <button @click="navigateToPage">跳转页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPage() {
      uni.navigateTo({
        url: '/pages/secondPage/secondPage',
        animationType: 'pop-in',
        animationDuration: 200
      })
    }
  }
}
</script>

Nach dem Login kopieren

Im obigen Code verwenden wir die von uniapp bereitgestellte Funktion navigateTo, um zur Seite zu springen und legen Sie die beiden Parameter animationType und animationDuration fest. Unter diesen gibt der Parameter animationType den Animationstyp für den Seitenübergang an, und der Parameter animationDuration gibt die Dauer der Animation an.

navigateTo

animationType

animationDuration

animationType

animationDuration

减少页面的渲染压力

在uniapp开发中，页面渲染压力过大也是导致黑色圆点出现的原因之一。因此，在编写代码时，要尽量减少页面的渲染压力，避免在页面切换时出现黑屏闪烁。具体而言，我们可以从以下几个方面进行优化：

（1）避免大量图片的加载和渲染。在开发中，图片资源往往是页面渲染压力的来源之一。因此，可以采用图片懒加载、图片压缩等方式来减少渲染压力。

（2）合理使用动画效果。虽然动画效果在提升用户体验方面有很大的帮助，但过多的、过于复杂的动画效果也会导致页面渲染压力过大。

（3）合理使用组件。组件的使用是uniapp开发中的重要部分，但过多的、过于复杂的组件可能会导致页面渲染压力过大。因此，要尽量减少组件的使用量，避免不必要的渲染。

使用原生组件

在某些情况下，原生组件的性能比起uniapp组件要好。因此，我们可以尝试使用原生组件来减少页面渲染压力。在使用原生组件时，可以使用uniapp提供的$refs来操作DOM元素。具体而言，我们可以使用以下代码来创建原生组件：

<template>
  <view>
    <button @click="navigateToPage">跳转页面</button>
    <my-native-component ref="myNativeComponent"></my-native-component>
  </view>
</template>

<script>
export default {
  mounted() {
    // 获取原生组件
    const myNativeComponent = this.$refs.myNativeComponent.$el
    // 操作原生组件
    myNativeComponent.doSomething()
  }
}
</script>

Nach dem Login kopieren

在上面的代码中，我们使用<my-native-component>来创建原生组件，然后使用$refsReduzieren Sie den Rendering-Druck der Seite

(2) Angemessener Einsatz von Animationseffekten. Obwohl Animationseffekte sehr hilfreich bei der Verbesserung des Benutzererlebnisses sind, können übermäßige und übermäßig komplexe Animationseffekte auch zu übermäßigem Druck beim Seitenrendering führen.
(3) Sinnvoller Einsatz von Komponenten. Die Verwendung von Komponenten ist ein wichtiger Teil der Uniapp-Entwicklung, aber zu viele und zu komplexe Komponenten können zu einem übermäßigen Seitenrendering-Druck führen. Versuchen Sie daher, die Verwendung von Komponenten zu reduzieren und unnötiges Rendern zu vermeiden.

Native Komponenten verwenden

In einigen Fällen ist die Leistung nativer Komponenten besser als die von Uniapp-Komponenten. Daher können wir versuchen, native Komponenten zu verwenden, um den Druck beim Rendern von Seiten zu verringern. Wenn Sie native Komponenten verwenden, können Sie $refs von uniapp verwenden, um DOM-Elemente zu bearbeiten. Konkret können wir den folgenden Code verwenden, um eine native Komponente zu erstellen:

<my-native-component>

$refs

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass nach Uniapp-Sprüngen schwarze Punkte auftauchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!