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

Analyse und Lösung des beim Start von MySQL gemeldeten Fehlers „ERROR:2002“

Vorwort Dieser Artikel stellt hauptsächlich die A...

So passen Sie geplante AT- und Cron-Aufgaben in Linux an

Es gibt zwei Arten von geplanten Tasks im Linux-S...

Detaillierte Analyse von Javascript-Datenproxys und Ereignissen

Inhaltsverzeichnis Datenbroker und Events Überprü...

Beispiel für die Konfiguration der domänenübergreifenden Fehlerbehebung in nginx

Die domänenübergreifende Nginx-Konfiguration wird...

VUE Erste Schritte Erlernen der Ereignisbehandlung

Inhaltsverzeichnis 1. Funktionsbindung 2. Mit Par...

Beispielcode zur Implementierung des Regentropfen-Animationseffekts mit CSS

Glasfenster Was wir heute erreichen werden, ist d...

Tools zum Konvertieren statischer Websites in RSS

<br /> Dieser Artikel wurde von Rachel Golds...

So verwenden Sie mysqldump zum Sichern von MySQL-Daten

1. Einführung in mysqldump mysqldump ist ein logi...

WeChat-Applet implementiert Anmeldeschnittstelle

Die Anmeldeoberfläche des WeChat-Applets ist zu I...

Mehrere Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS

Inhaltsverzeichnis 1. Selbstaufzählbare Eigenscha...

Vue implementiert unregelmäßige Screenshots

Inhaltsverzeichnis Bilderfassung durch SVG CSS-Te...

Eine kurze Diskussion über den virtuellen Speicher von Linux

Inhaltsverzeichnis Herkunft Virtueller Speicher P...