WeChat Mini-Programme werden global über die Uni-App geteilt

WeChat Mini-Programme werden global über die Uni-App geteilt

Bei der tatsächlichen Verwendung ist es häufig erforderlich, das Miniprogramm mit Freunden oder dem Freundeskreis zu teilen. Dabei wird im Allgemeinen jeweils eine Seite nach der anderen eingerichtet.

Offizielle Website-Sharing-Einführung: https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

Jede Seite, die geteilt werden muss, muss separat geschrieben werden

Kopieren/Exportieren Standard {
//An Freunde senden onShareAppMessage(res) {
    if (res.from === 'button') {// Von der Schaltfläche „Teilen“ auf der Seite console.log(res.target)
    }
    zurückkehren {
      Titel: „Freigabetitel anpassen“,
      Pfad: '/pages/test/test?id=123'
    }
  },
  //Mit Moments teilen onShareTimeline(res) {
     zurückkehren {
      Titel: „Freigabetitel anpassen“,
      Pfad: '/pages/test/test?id=123'
    }
  }
}

Nicht nur wird der Code wiederholt, es kann auch sehr leicht zu Verwirrung kommen und dazu, dass man versehentlich einen Parameter übersieht und vergisst, ihn zu ändern.

Einführung in die Konfiguration der Freigabeparameter:

Globales Teilen

Reduzieren Sie die Code-Duplizierung auf jeder Seite und richten Sie gemeinsam genutzten Code global ein.

Erstellen Sie zunächst einen utils-Ordner im neuen Verzeichnis und erstellen Sie wxShare.js

Nach erfolgreicher Erstellung importieren Sie die wxShare.js in main.js

//Einstellungen teilen
Freigabe aus „./utils/wxShare.js“ importieren
Vue.mixin(teilen)

Einführung in wxShare.js

Erstellen Sie eine einfache JS-Seite, einschließlich data , onShareAppMessage und onShareTimeline .

data : Freigabeparametereinstellungen: Bitte beachten Sie das Diagramm zur Erstkonfiguration

onShareAppMessage : Konfiguration zum Teilen mit WeChat-Freunden

onShareTimeline : Konfiguration für die Freigabe in Moments

Kopieren/Exportieren Standard {
    Daten() {
        zurückkehren {
            Aktie:
                // Weitergeleiteter Titel (Standardtitel)
                Titel: 'Standardtitel - Titel teilen',
                // Der Standardwert ist die aktuelle Seite. Diese muss ein vollständiger Pfad sein, der mit '/' beginnt. Pfad: '',
                //Benutzerdefinierter Bildpfad, der ein lokaler Dateipfad, ein Codepaket-Dateipfad oder ein Netzwerk-Bildpfad sein kann.
                //Unterstützt PNG und JPG. Wenn imageUrl nicht übergeben wird, wird der Standard-Screenshot verwendet. Das Seitenverhältnis des angezeigten Bildes beträgt 5:4
                Bild-URL: ''
            }
        }
    },
    // An Freunde senden onShareAppMessage(res) {
         zurückkehren {
          Titel: 'An einen Freund senden',
          Pfad: '/pages/test/test'
        }
    },
    //Mit Moments teilen onShareTimeline(res) {
         zurückkehren {
          Titel: „Teilen mit Moments“,
          Pfad: '/pages/test/test'
        }
    }
}

Jetzt ist die grundlegendste globale Freigabe abgeschlossen. Aufmerksame Freunde stellen möglicherweise fest, dass die Parameter in den Daten nicht verwendet werden und jeder freigegebene Parameter fest ist und nicht dynamisch konfiguriert werden kann, was sich stark von der idealen globalen Freigabe unterscheidet.

getCurrentPages() -Funktion

Mit getCurrentPages() wird eine Instanz des aktuellen Seitenstapels abgerufen, der in Form eines Arrays in der Reihenfolge des Stapels angegeben ist. Das erste Element ist die Homepage und das letzte Element ist die aktuelle Seite.

Hinweis: getCurrentPages() wird nur zum Anzeigen des Seitenstapels verwendet. Ändern Sie den Seitenstapel nicht, um Seitenstatusfehler zu vermeiden.

Offizielle Website-Einführung: https://uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages

Optimieren Sie onShareAppMessage zum Teilen mit Freunden

kopieren//An Freunde senden onShareAppMessage(res) {
    // Die geladene Seite abrufen let pages = getCurrentPages(),
        // Holen Sie sich das Objekt der aktuellen Seitenansicht = Seiten[Seitenlänge - 1];
    //Gemeinsamer Seitenpfad this.share.path = `/${view.route}`;
    //Weiterleitungsparameter return this.share;
},

Rufen Sie den Seitenpfad dynamisch ab und geben Sie ihn frei.

Derzeit gibt es ein offensichtliches Problem: Es gibt derzeit keine Möglichkeit, den Titel des Miniprogramms direkt zu erhalten.

Titel für die Seitenfreigabe festlegen

Finden Sie einen Weg, das Land zu retten, indem Sie den Titel jeder Seite, die geteilt werden muss, dynamisch festlegen

Kopieren/Exportieren Standard {
    beim Laden() {
        /*
            Entwerfen Sie den aktuellen Seitenfreigabetitel im Lebenszyklus der freizugebenden Seite. this.share wird verwendet, um die in wxShare.js*/ definierten Freigabedaten abzurufen.
       this.share.title = "Aktueller Titel der geteilten Seite"
    },
}

Effektanzeige

buttonMit Freunden teilen

Ein <button open-type="share"> )

Der Code unterscheidet sich nicht vom obigen, außer dass es einen separaten Bereich für Konfigurationsparameter gibt.

kopieren//An Freunde senden onShareAppMessage(res) {
    // Weiterleitung von einem Button innerhalb der Seite if (res.from == 'button') {
        console.log("Button-Weiterleitung - Konfiguration");
    } 
    // Die geladene Seite abrufen let pages = getCurrentPages(),
        // Holen Sie sich das Objekt der aktuellen Seitenansicht = Seiten[Seitenlänge - 1];
    //Gemeinsamer Seitenpfad this.share.path = `/${view.route}`;
    //Weiterleitungsparameter return this.share;
}

Optimieren Sie onShareTimeline zum Teilen mit Moments

Die Konfiguration ist grundsätzlich die gleiche wie beim Teilen mit Freunden.

kopieren//Mit Moments teilen onShareTimeline(res) {
    // Die geladene Seite abrufen let pages = getCurrentPages(),
        // Holen Sie sich das Objekt der aktuellen Seitenansicht = Seiten[Seitenlänge - 1];
    // console.log("Holen Sie die geladene Seite", Seiten);
    //console.log("Objekt der aktuellen Seite", Ansicht);
    dieser.share.path = `/${view.route}`;
    //Weiterleitungsparameter return this.share;
}

Die Grundkonfiguration der globalen Freigabe ist wie oben beschrieben.

Beim Teilen des Seitenpfads für dynamische Änderungen gibt es kein Problem, bei der Konfiguration des dynamischen Freigabepfads plus Parametern besteht jedoch weiterhin ein Problem.

wxShare.js-Code

Kopieren/Exportieren Standard {
    Daten() {
        zurückkehren {
            Aktie:
                // Weitergeleiteter Titel (Standardtitel)
                Titel: 'Standardtitel - Titel teilen',
                // Der Standardwert ist die aktuelle Seite. Diese muss ein vollständiger Pfad sein, der mit '/' beginnt. Pfad: '',
                //Benutzerdefinierter Bildpfad, der ein lokaler Dateipfad, ein Codepaket-Dateipfad oder ein Netzwerkbildpfad sein kann.
                //Unterstützt PNG und JPG. Wenn imageUrl nicht übergeben wird, wird der Standard-Screenshot verwendet. Das Seitenverhältnis des angezeigten Bildes beträgt 5:4
                Bild-URL: ''
            }
        }
    },
    /*
     Entwerfen Sie den aktuellen Seitenfreigabetitel im Lebenszyklus der freizugebenden Seite onLoad() {
         this.share.title = "Aktueller Titel der geteilten Seite"
     },
     */
    // An Freunde senden onShareAppMessage(res) {
        // Weiterleitung von einem Button innerhalb der Seite if (res.from == 'button') {
            console.log("Button-Weiterleitung - Konfiguration");
        }
        // Die geladene Seite abrufen let pages = getCurrentPages(),
            // Holen Sie sich das Objekt der aktuellen Seitenansicht = Seiten[Seitenlänge - 1];
        dieser.share.path = `/${view.route}`;
        
        //Weiterleitungsparameter return this.share;
    },
    //Mit Moments teilen onShareTimeline(res) {
        // Die geladene Seite abrufen let pages = getCurrentPages(),
            // Holen Sie sich das Objekt der aktuellen Seitenansicht = Seiten[Seitenlänge - 1];
        // console.log("Holen Sie die geladene Seite", Seiten);
        console.log("Objekt der aktuellen Seite", Ansicht);
        dieser.share.path = `/${view.route}`;
        //Weiterleitungsparameter return this.share;
    }
}
wxShare.js

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Verwenden Sie die Uni-App, um Fallstrick-Datensätze für WeChat-Applets zu generieren
  • Schritte zur Implementierung der Autorisierungsanmeldung für das WeChat-Applet von Uni-App
  • Implementierung der Anmeldeberechtigung für das Uni-App WeChat-Applet
  • Beispiel für die Konvertierung eines WeChat-Applets in ein Uni-App-Projekt
  • uni-app entwickelt Ortungsfunktion für WeChat-Applet

<<:  HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots

>>:  Detaillierter Prozess zur Verwendung von VMware zum Testen des PXE-Batchinstallationsservers

Artikel empfehlen

Detaillierte Erläuterung der JavaScript-Implementierung der Hash-Tabelle

Inhaltsverzeichnis 1. Hash-Tabellenprinzip 2. Das...

Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16

Inhaltsverzeichnis Über Kubernetes Grundlegende U...

Eine kurze Analyse des MySQL-Index

Ein Datenbankindex ist eine Datenstruktur, deren ...

Tabellenbezogene Anordnung und Javascript-Operationen table, tr, td

Gut funktionierende Einstellungen für Tabelleneige...

Die am häufigsten verwendeten HTML-Tags zum Erstellen von Webseiten

1. Optimierung häufig verwendeter HTML-Tags HTML ...

Leitfaden zur effizienten Nutzung von MySQL-Indizes

Vorwort Ich glaube, die meisten Leute haben MySQL...