Html5 implementiert den Prozess des Teilens und Anpassens von Inhalten auf WeChat

Bei einem kürzlich durchgeführten Projekt bestand Bedarf an der WeChat-Freigabe und der Notwendigkeit, den Inhalt der WeChat-Freigabe anzupassen. Da dies das erste Mal war, dass ich mit der WeChat-Freigabe in Kontakt kam, habe ich einige der während des Prozesses aufgetretenen Probleme sowie den gesamten Prozess aufgezeichnet der Vervollständigung der Funktion.

Das Folgende ist der allgemeine Prozess (Details werden in jeder Phase angegeben)

• Installieren Sie weixin-js-sdk
• Initialisieren Sie die WeChat-Freigabe
• Konfigurieren Sie WeChat zum Teilen benutzerdefinierter Inhalte (an Freunde senden, an Moments senden).

npm install weixin-js-sdk --save-dev

Spezifische Anweisungen finden Sie in der offiziellen Dokumentation von WeChat.

Da viele der Projekte, an denen ich arbeite, die Verwendung der WeChat-Freigabefunktion erfordern, wird der auf WeChat geteilte Code hier gekapselt.

Die API im folgenden Code ist eigentlich eine Axios-Anfrage

 import wx from 'weixin-js-sdk'import api from '@/api'const wxApi = { /** * [wxRegister WeChat Api initialization] * @param {Function} callback [ready callback function] */ wxRegister (callback, url) { let query = { // Die URL hier muss die URL sein, die genau der Seite entspricht, die Sie teilen möchten, und die Base64-URL muss konvertiert werden: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // Debugging-Modus aktivieren appId: data.appId, // Erforderlich, die eindeutige Kennung des Zeitstempel des offiziellen Kontos: data.timestamp, // Erforderlich, generiert den Zeitstempel der Signatur. nonceStr: data.nonceStr, // Erforderlich, generiert die zufällige Zeichenfolge der Signatur. Signatur: data.signature, // Erforderlich, Signatur, siehe Anhang 1 jsApiList: data.jsApiList // Erforderlich, eine Liste der JS-Schnittstellen, die verwendet werden müssen, siehe Anhang 2 für eine Liste aller JS-Schnittstellen }) }) wx.ready((res) => { // Bei Bedarf fertige Callback-Methode anpassen if (callback) { callback() } }) },}

Hinweis: Wenn Sie oben Base64 konvertieren müssen, können Sie js-base64 verwenden

3. Konfigurieren Sie WeChat zum Teilen benutzerdefinierter Inhalte (an Freunde senden, an Moments senden).

Der zweite Schritt besteht darin, die Paketkonfiguration für WeChat zu initialisieren, aber es fehlen noch die entsprechenden Freigabe- und anderen Funktionen. Lassen Sie uns sie hier verbessern.

 //Füge /*** nach der wxRegister-Funktion hinzu [ShareTimeline benutzerdefinierte WeChat-Freigabe für Momente]* @param {[type]} Option [Share Information]* @param {[type]} success [success callback]* @param {[ Typ]} Fehler [Fehlerrückruf]*/ShareTimeline (Option) {wx.updateTimelineShareData({ title: option.title, // Titellink teilen: option.link, // Link teilen imgUrl: option.imgUrl, // Symbol teilen erfolgreich () { // Einstellung erfolgreich}, cancel () { // Einstellung fehlgeschlagen}})},/*** [ShareAppMessage Angepasste WeChat-Freigabe an Freunde]* @ param {[Typ]} Option [Informationen teilen]* @param {[Typ]} Erfolg [Erfolgsrückruf]* @param {[Typ]} Fehler [Fehlerrückruf]*/ShareAppMessage (Option) {wx.updateAppMessageShareData({ title: option.title, // Titel teilen desc: option.desc, // Beschreibungslink teilen: option.link, // Link teilen imgUrl: option.imgUrl, // Symbol teilen erfolgreich () { // Einstellung erfolgreich}, cancel () { // Einstellung fehlgeschlagen}})}

4. Beim Aufruf der Seite

 // vue als Beispiel // Die folgenden Funktionsparameter finden Sie in der obigen Methode import wx from 'your encapsulated file' mount(){ let base64 = require('js-base64').Base64 let url = base64. encode( window.location.href) wx.wxRegister(this.wxRegCallback,url)},methods:{ // Angepasster JDK-Rückruf wxRegCallback () {}, // Angepasste Funktion zum Teilen mit Freunden wxShareAppMessage(){ let option = { title:'', // Titel teilen desc: '', // Link zur Beschreibung teilen: ' ', // Link teilen imgUrl: '' // Symbol teilen } // Die allgemeine Methode wx.ShareAppMessage(option) einfügen }, // Angepasste Funktion zum Teilen im Freundeskreis wxShareTimeline(){ let option = { title:'',// Titel teilen desc: '', // Beschreibungslink teilen: '', // Link teilen imgUrl: '' // Symbol teilen } // Injizieren Sie die allgemeine Methode wx.ShareTimeline(option) }}

Das Obige ist der Prozess des Teilens auf WeChat. Wenn es Mängel gibt, weisen Sie bitte darauf hin.

Die WeChat-Freigabe kann nur auf echten Geräten getestet werden

Domänennamen, die das Localhost-Format verwenden, können die WeChat-Verifizierung nicht bestehen

Das Obige ist die vom Herausgeber eingeführte HTML5-Implementierung der WeChat-Freigabe und des benutzerdefinierten Inhalts. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten.