Einige Tipps zur Beschleunigung der Entwicklung von WeChat-Miniprogrammen

Einige Tipps zur Beschleunigung der Entwicklung von WeChat-Miniprogrammen

1. Erstellen Sie eine Seite mit app.json

Gemäß unseren üblichen Entwicklungsgewohnheiten erstellen wir beim Erstellen einer neuen Seite normalerweise zuerst einen Ordner und dann die entsprechende Seite. Nach Abschluss der Erstellung wird die Seite automatisch in app.json registriert. Tatsächlich können wir die entsprechende Seite auch generieren, indem wir die Seite direkt in app.json registrieren.

"Seiten": [
    "Seiten/Index/Index",
    "Seiten/neueSeite/neueSeite"
 ],

Tragen Sie wie oben gezeigt den Pfad in die Konfigurationsdatei ein und das Applet erstellt automatisch den entsprechenden Pfad.

2. Nutzen Sie den Kompilierungsmodus gut

Wenn wir eine Seite debuggen möchten, sind viele Entwickler daran gewöhnt, app.json direkt zu ändern, um die erste Stapelseite anzupassen. Tatsächlich können wir den Kompilierungsmodus verwenden, um eine Kompilierungsseite hinzuzufügen, anstatt die Konfigurationsdatei zu ändern.

3. Miniprogrammstil zur Wiederverwendung von Komponenten

Dies wird oft vergessen, da das Applet dieses Konfigurationselement beim Erstellen einer neuen Komponente nicht anzeigt. Konfigurieren Sie die Optionen wie folgt. Die Komponente kann den globalen Stil (app.wxss) verwenden.

Komponente({
  //Colorui-Stiloptionen übernehmen: {
    addGlobalClass: true,
    mehrereSlots: true
  },
  ...
 }

4. app.js Initialisierung Inhaltsfunktionalisierung

Bei vielen Miniprogrammen wird viel Inhalt in „onLaunch“ geschrieben, was sehr verwirrend ist und das spätere Debuggen besonders mühsam macht. Verschiedene Initialisierungsinhalte können als unterschiedliche Funktionen geschrieben werden, die funktionalisiert und modularisiert werden.

beim Starten: Funktion (Optionen) {
    //Hier müssen wir den Weg zum Applet this.InitCloud(); verarbeiten. //Cloud-Dienst initialisieren/ ESC
    this.InitCustom(); //Initialisiere die für die benutzerdefinierte Konfiguration erforderlichen Informationen this.InitEdu(); //Initialisiere die Konfiguration des Bildungssystems},

5. Nutzen Sie Vorlagen sinnvoll

Bei WXML-Inhalten mit vielen Wiederholungen können Sie diese in eine Vorlagendatei extrahieren und bei der Verwendung direkt importieren.

<import src="template/NexuTemplate.wxml"/>
<Ansicht wx:für="{{dirlist}}" wx:key="item">
 <template ist="dirshow" data="{{item}}"></template>
</Ansicht>

6. Cloud-Entwicklung und Hybrid-Entwicklung

Inhaltssicherheitsidentifizierung, OpenID-Erfassung, Bildpornografieerkennung, Zahlungsprozess, Content-Push usw. sind nicht so einfach, wenn Sie Ihr eigenes Backend zur Implementierung verwenden. Wenn Sie jedoch Cloud-Entwicklungstechnologie verwenden, um diesen Teil zu ersetzen und sich auf die Geschäftslogik zu konzentrieren, eröffnet sich Ihnen eine neue Welt.

Einige Funktionen der Cloud-Entwicklung (ich werde später einen speziellen Artikel schreiben, um den Inhalt der Cloud-Entwicklung und der Hybrid-Entwicklung vorzustellen):

const cloud = erfordern('wx-server-sdk')

cloud.init({
  Umgebung: cloud.DYNAMIC_CURRENT_ENV
})


// Cloud-Funktionseintrag Funktion exports.main = async (Ereignis, Kontext) => {
  // console.log(Ereignis)
  Schalter (Ereignis.Aktion) {
    Fall 'getWXACode': {
      returniere getWXACode(Ereignis)
    }
    Fall 'getOpenData': {
      returniere getOpenData(Ereignis)
    }
    Fall 'msgSecCheck': {
      return msgSecCheck(Ereignis)
    }
    Fall 'imgSecCheck': {
      returniere imgSecCheck(Ereignis)
    }
    Fall 'submitPages': {
      returniere submitPages(Ereignis)
    }
    Standard: {
      zurückkehren
    }
  }
}

//Holen Sie sich den Applet-Code async function getWXACode(event) {
  konsole.log(ereignis.url)
  // Hier erhalten wir den permanenten und gültigen Applet-Code, speichern ihn im Cloud-Dateispeicher und geben schließlich die Cloud-Datei-ID zurück, damit das Front-End const wxacodeResult = await cloud.openapi.wxacode.get({ verwenden kann.
    Pfad: event.url || 'Seiten/Index/Index',
  })

  const fileExtensionMatches = wxacodeResult.contentType.match(/\/([^\/]+)/)
  const fileExtension = (fileExtensionMatches && fileExtensionMatches[1]) || 'jpg'

  const uploadResult = warte auf cloud.uploadFile({
    // Cloud-Dateipfad. Zu Demonstrationszwecken wird hier ein fester Name verwendet: cloudPath: `wxCode/wxCode${Math.random() * 9999999}.${fileExtension}`,
    // Der hochzuladende Dateiinhalt kann direkt in den Bildpuffer übergeben werden
    Dateiinhalt: wxacodeResult.buffer,
  })

  wenn (!uploadResult.fileID) {
    throw new Error(`Upload fehlgeschlagen, Datei ist leer, Statuscode des Speicherservers ist leer ${uploadResult.statusCode}`)
  }

  returniere uploadResult.fileID
}

// OpenID abrufen
asynchrone Funktion getOpenData(Ereignis) {
  // Erfordert wx-server-sdk >= 0.5.0
  const wxContext = cloud.getWXContext()

  zurückkehren {
    Ereignis,
    OpenID: wxContext.OPENID,
    Anwendungs-ID: wxContext.APPID,
    UnionID: wxContext.UNIONID,
  }
}

// Überprüfen Sie, ob der Text konform ist async function msgSecCheck(event) {
  // Erfordert wx-server-sdk >= 0.5.0
  return cloud.openapi.security.msgSecCheck({
    Inhalt: Ereignis.Inhalt,
  })
}

// Überprüfen Sie, ob das Bild kompatibel ist async function imgSecCheck(event) {
  Rückkehr cloud.openapi.security.imgSecCheck({
    Medien:
      Inhaltstyp: Ereignis.Inhaltstyp,
      Wert: Puffer.von(Ereignis.Wert)
    }
  })
}

//Seiten einbinden async function submitPages(event) {
  return cloud.openapi.search.submitPages({
    Seiten: [{
      Pfad: Ereignispfad,
      Abfrage: event.query
    }]
  })
}




//Datum abrufen Funktion getDateTime(sj) {
  var jetzt = neues Datum(sj * 1000);
  var jahr = jetzt.getFullYear();
  var Monat = jetzt.getMonth() + 1;
  var date = jetzt.getDate();
  var Stunde = jetzt.getHours();
  var minute = jetzt.getMinutes();
  // var Sekunde = jetzt.getSeconds();
  gibt Jahr + „Jahr“ + Monat + „Monat“ + Datum + „Tag“ zurück;
}

7. Zentralisieren Sie persönliche Konfigurationsdaten in einer Datei

Beispielsweise werden Daten wie Serverdomänennamen und Schnittstellentoken, die sich ändern können, aber häufig verwendet werden, in einer Datei konzentriert.

module.exports={
  UseCloud:true,
  CloudId:'', //ID der Cloud-Entwicklungsumgebung
  TraceUser:true, //Benutzerzugriffsprotokoll aufzeichnen AdaptStorge:true, //Caching von Benutzerdaten zulassen SevDomain:'http://localhost' //Domänenname des Servers}

8. Nutzen Sie die Versionsverwaltungstools von Entwicklertools

Zusammenfassen

Damit ist dieser Artikel mit einigen Tipps zur Beschleunigung der Entwicklung von WeChat-Miniprogrammen abgeschlossen. Weitere relevante Vorschläge zur Entwicklung von WeChat-Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der WeChat-Applet-Entwicklung (Projekt von Grund auf)
  • WeChat Mini-Programm Cloud-Entwicklung: Verwenden von Cloud-Funktionen
  • WeChat-Applet-Cloud-Entwicklungsdatenbankbetrieb
  • WeChat-Applet WeChat-Zahlungszugang – Entwicklungsbeispiel – detaillierte Erläuterung
  • Entwicklung eines WeChat-Miniprogramms - Tutorial für die ersten Schritte
  • WeChat-Applet-Cloud-Entwicklung (Datenbank) – detaillierte Erläuterung
  • Verwenden von WeChat-Miniprogrammen zur Front-End-Entwicklung [Schnellstart]
  • Detailliertes Tutorial zur WeChat Mini-Programm-Cloud-Entwicklung
  • Zusammenfassung der Erfahrungen mit der Entwicklung von WeChat-Applets (empfohlen)
  • Grundlegendes Tutorial zur Entwicklung von WeChat Mini-Programmen

<<:  MySQL Installations-Tutorial unter Windows mit Bildern und Text

>>:  So zeigen Sie im Hintergrund laufende Programme in Linux an und schließen sie

Artikel empfehlen

Der vollständige Leitfaden zum Rasterlayout in CSS

Grid ist ein zweidimensionales Rasterlayoutsystem...

Öffnen Sie den Windows-Server-Port (nehmen Sie als Beispiel Port 8080)

Was ist ein Port? Bei den Ports, auf die wir uns ...

Detaillierte Erklärung des Vue3-Sandbox-Mechanismus

Inhaltsverzeichnis Vorwort Browser kompilierte Ve...

So verwenden Sie Port 80 in Tomcat unter Linux

Anwendungsszenario In vielen Fällen installieren ...

Detaillierter Prozess zur Konfiguration von NIS in Centos7

Inhaltsverzeichnis Prinzip Vorbereitung der Netzw...

Vue implementiert ein verschiebbares Baumstrukturdiagramm

Inhaltsverzeichnis Rekursive Vue-Komponente Drag-...

Detaillierte Analyse der SQL-Ausführungsschritte

Detaillierte Analyse der SQL-Ausführungsschritte ...

So importieren und exportieren Sie Cookies und Favoriten in FireFox

FireFox ist ein weit verbreiteter Browser mit zah...

Tipps zur Kurzschrift in JavaScript

Inhaltsverzeichnis 1. Arrays zusammenführen 2. Ar...