mp progress Download - mp progress Quellcode herunterladen

mp progress

AI-Quellcode

支持在wepy中是用api方式

Herunterladen

MP-Fortschritt

Ein Tool, das sich auf die Implementierung kreisförmiger Fortschrittsbalken in kleinen Programmen konzentriert

Warum

Mini-Programme verfügen derzeit über viele UI-Komponenten von Drittanbietern, die grundsätzlich in Form von Komponenten eingeführt und verwendet werden. Wenn der Projektstil näher am Drittanbieter liegt, sind diese vollständigen Komponentenbibliotheken von Drittanbietern jedoch praktischer. wenn Sie nur bestimmte Komponenten der UI-Bibliothek eines Drittanbieters verwenden. In diesem Fall wäre es nicht sinnvoll, eine sehr große Bibliothek zu installieren.

Die Zieldateigröße von mp-progress beträgt weniger als 7 KB. Die praktische js-Aufrufmethode und die native Canvas-Tag-Schreibmethode eignen sich sehr gut für Projekte, die ein hohes Maß an Kontrolle behalten möchten.

Installieren

 $ npm install mp-progress --save

Grundlegende Bibliotheksanforderungen

Gemäß den Dokumentanforderungen werden Basisbibliotheksversionen 2.7.0 und höher unterstützt. Der beste Effekt ist die Verwendung der neuesten Basisbibliothek.

Natives WeChat-Miniprogramm

Die Verwendung des nativen Applets von WeChat zum Einführen von npm-Paketen erfordert zusätzliche Konfiguration. Weitere Informationen finden Sie unter https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13

Aufruf im Komponentenmodus (einfach und benutzerfreundlich)

Führen Sie Komponenten auf der entsprechenden Seite ein, initialisieren Sie Daten und verwenden Sie Komponenten in wxml

Aufgrund von Unterschieden in der Komponentenimplementierung ist diese Methode in Wepy nicht anwendbar

 {
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "mpProgress": "mp-progress/dist/component/mp-progress"
  }
}
...
// 参数使用方式相同，canvasSize默认是400*400
data = {
  config: {
    canvasSize: {
      width: 400,
      height: 400
    },
    percent: 100,
    barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
    needDot: true,
    dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
  },
  percentage: 10
}
...
<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

Diese Methode folgt dem Prinzip der bidirektionalen Datenbindung. Wenn sich der Prozentsatz der Seite ändert, aktualisiert mp-progress die Ansicht automatisch.

API-Aufruf (geeignet für diejenigen, die neue Komponenten auf Basis von mp-progress erstellen müssen)

Diese Methode ist für Wepy geeignet, muss jedoch in der Rückruffunktion onReady initialisiert werden.

Die übergebene Einheit ist rpx . Das heißt, wenn die Leinwandbreite 400 rpx beträgt, werden 400 übergeben und die tatsächliche Größe wird später automatisch berechnet.

 import MpProgress from 'mp-progress';
...
// 初始化
// 注意：在wepy中必须在onReady里调用
const mprogress = new MpProgress({
  target: this,
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});

// 开始绘制进度，60代表60%
mprogress.draw(60);

...
<canvas class="canvas" type="2d" id="progress"></canvas>

Anzeigemodus

Wirkung	analysieren
	Normaler Modus (Standard)
	Prozentmodus (Sie müssen nur den Prozentsatz bei Bedarf übergeben, siehe Parameterbeschreibung)

Parameterbeschreibung

Parametername	Datentyp	Erforderliche Parameter	analysieren	Liste
Ziel	Objekt	Ja	Seitenkontext	Das
CanvasId	Zeichenfolge	Ja	Die ID des Seiten-Canvas	Fortschritt
CanvasSize	Objekt	Ja	Die Größe der Leinwand, die entsprechende Einheit ist rpx, Sie müssen nur die Zahl übergeben	{Breite: 200, Höhe: 300}
Prozent	Nummer	NEIN	Standardmäßig wird der Kreis entsprechend 360 Grad berechnet und angezeigt. Wenn 80 % eingegeben werden, wird der maximale Halbkreisbogen basierend auf der Leinwandgröße automatisch gezeichnet. Der gültige Wert liegt zwischen 50 % und 100 %.	100
barStyle	Array	Ja	Der Bogenfortschrittsstil wird entsprechend der Positionsreihenfolge der Array-Elemente gerendert. Im Allgemeinen ist die erste Elementkonfiguration die Hintergrundfarbe, die den gesamten Bogen abdeckt, und die zweite Elementkonfiguration besteht darin, den Bogen entsprechend dem Fortschrittsprozentsatz zu rendern. fillStyle kann eine normale Farbe oder eine Verlaufsfarbe sein. Um die Verlaufsfarbe zu verwenden, müssen Sie die Positions- und Farbinformationen jedes Punkts im Format eines Arrays übergeben.	[{width: 12, fillStyle: '#f0f0f0'}, {width: 12, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674' }]}]
needDot	Boolescher Wert	NEIN	Müssen Fortschrittspunkte angezeigt werden?	FALSCH
dotStyle	Array	NEIN	Die Konfiguration des Fortschrittspunktstils unterstützt bis zu zwei Überlagerungsstile. Um eine klare Anzeige der Fortschrittspunkte zu gewährleisten, fügt der erste Punkt standardmäßig einen Schatten hinzu. Wenn der Durchmesser des ersten Fortschrittspunkts größer als der Fortschrittsbalken ist, muss der gezeichnete Fortschrittsbalkenkreis um die entsprechende Differenz verkleinert werden, um sicherzustellen, dass der Fortschrittspunkt vollständig auf der Leinwand angezeigt wird. Der Schatten ist eine optionale Konfiguration. und der Wert von Schatten ist `(0, 0, r/2, shadow)`	dotStyle: [{r: 24, fillStyle: '#fff',shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]

Funktionsbeschreibung zeichnen

Da der Fortschrittsbalken auf einer Seite möglicherweise mehrmals aktualisiert wird, müssen Sie nach der Instanziierung der Komponente die draw manuell aufrufen, um das Bild zu zeichnen.

Parametername	Datentyp	Erforderliche Parameter	analysieren
Prozentsatz	Nummer	Ja	Wenn beispielsweise 60 eingegeben wird, werden nur die restlichen 60 % des Bogens gegen den Uhrzeigersinn gerendert.

Andere Anweisungen

So legen Sie den Bogenendpunktstil fest
Der Parameter lineCap kann zu jedem Parameterelement in barStyle hinzugefügt werden, zum Beispiel: barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}]. Den gültigen Wert lineCap finden Sie im Dokument
Muss auf SDK-Version 2.7.0 oder höher ausgeführt werden
Die Komponente hat die neueste Same-Layer-Rendering-Methode von WeChat übernommen, die erfordert, dass die SDK-Version nicht niedriger als 2.7.0 ist
dotStyle
Wenn dotStyle Schatten enthält, wird der Radius des Fortschrittsbalkens automatisch verkleinert, um sicherzustellen, dass der Schatten in allen Bereichen des Kreises vollständig angezeigt werden kann.
Fortschrittsanimation
Derzeit funktioniert die Animation nur in der Definition des letzten Elements von barStyle, und die Animation jedes Frames macht 2 % der gesamten Animation aus.

Textanzeigeeffekt

Normalmodus

Den Implementierungscode finden Sie unter:

 <view class="garage-status">
  <canvas class="canvas" type="2d" id="progress"></canvas>
  <view class="status-ctn">
    <view class="status-count">127/127</view>
    <view class="desc-text">适用车位剩余</view>
  </view>
</view>