Übrigens haben Apps in der Regel Eingänge, um auf sozialen Plattformen zu teilen, und es gibt auch einen guten Rahmen für das Teilen von Webseiten. Mit der kontinuierlichen Entwicklung von HTML5 werden mobile Webseiten jedoch in unserem Leben immer beliebter. Wie schließe ich also unsere Mobiltelefone aus? Apropos, wichtige Teilenplattformen haben SDKs für Android und iOS. Als Entwickler müssen wir das SDK nur in unser Projekt integrieren. Über die vorhandene externe Schnittstelle können wir die Freihaufefunktion problemlos ausfüllen. Bei Webseiten gibt es im Internet viele hervorragende Freigabes -Frameworks, wie z. Wir können uns leicht in unser Projekt integrieren. Wir müssen jedoch einige Anstrengungen unternehmen, um die Freigabe auf mobilen Webseiten zu implementieren. Ich denke, dass wir zu diesem Zeitpunkt frei teilen können, indem wir den vom Benutzer installierten Client aufrufen. Was hier erwähnt werden muss, ist das Teilen von WeChat. Wenn wir auf der Webseite teilen, wird normalerweise ein Freigabemode -Code angezeigt. Wir verwenden die Wechat -App, um zu scannen und zu teilen. Wir können nicht auf dem Handy arbeiten. Wir müssen die App direkt zum Freigeben öffnen, wenn der Benutzer die WeChat -Freigabe auswählt. Hier beschweren wir uns über WeChat, JS SDK zu teilen. Als ich mit diesem Ding zum ersten Mal in Kontakt kam, dachte ich, solange ich die Operation abgeschlossen habe, konnte ich die benutzerdefinierte Freigabe erkennen. Bei allen Arten von Fallstricken stellte ich schließlich fest, dass der Wechat JS SDK nur vorübergehend unseren benutzerdefinierten Inhalt zwischengespeichert. Wenn wir teilen müssen, müssen wir den Betrieb noch durch die Taste in der oberen rechten Ecke von WeChat abschließen. Ok, ich werde keinen Unsinn mehr reden. Geben wir das heutige Thema ein. Als nächstes werde ich die gemeinsame Nutzung von Sina, QQ, QQ Space und Tencent Weibo über Hyperlinks abschließen und Ihnen dann die Signaturlogik des WeChat JS SDK -Sharing -Komponenten basierend auf der C# -Plattform zur Verfügung stellen und schließlich dazu führen, dass Sie die Freigabe des mobilen Webs abschließen.
Geben Sie den ersten Punkt ein: Vervollständigen Sie das Teilen durch den Hyperlink
Für häufig verwendete soziale Plattformen können wir Inhalte im Grunde genommen über Hyperlinks teilen, mit Ausnahme von WeChat, was diese Freigabemethode nicht unterstützt. Diese Freigabemethode kann uns erleichtern, die Freigabe anzupassen, und ist sehr bequem zu bedienen.
Funktion Sharessina () {// Teilen Sie Sina Weibo Var Sharessinastring = 'http://service.weibo.com/share/share.php?title=' + $ ("#title"). val () + '& url =' + $ ("##########$ $ $ $ $ $ $ @ @ $ @ $ @ $ @ $ @ $ @ @ $ @ $ @ @ $’; Shareqqzone () {var p = {url: location.href, showcount: '0',/*Ob die Gesamtzahl der Aktien angezeigt wird, anzeigen: '1', nicht anzeigen: '0'*/Desc: '',/*Default Sharing Reason (optional)*/Zusammenfassung: '' (Optional)*/Site: 'Manyi.com',/*Quelle teilen, z. 'http://sns.qzone.qqq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + $ ("#title"). val () + '& url =' + $ ("#url"). p = {url: location.href, /*URL erhalten, Sie können von der Freigabe zum QQ -Logo für bequeme Statistiken hinzufügen* /Desc: '' (optional)*/flash: '',/*Videoadresse (optional)*/seiten: 'misgei.com',/*Quelle teilen (optional) zum Beispiel: QQ -Freigabe*/style: '201', width: 32, Höhe: 32}; // Teilen an qqvar Sharessinastring = 'http:/connect.qq.com/widget + $ ("#title"). val () + '& summary =' + $ ("#url"). val () + '& url =' + $ ("#url"). Val () + '& seiten = "misgei.com"'; Shared QQ -Logo aus dem QQ, um Statistiken zu erleichtern 'http://vtqqq.com/share/share.php?title=' + $ ("#title"). val () + '& url =' + $ ("#url"). val () + '& seiten = "misgei.com"';Das obige sind die JS -Codes für das Teilen von Sina Weibo, QQ, QQ Space und Tencent Weibo. Wir müssen sie nur an dem Ort anrufen, an dem die Seite gemeinsam genutzt werden muss. Natürlich gibt es viele Plattformen, die diese Form des Teilens von Inhalten unterstützen. Bitte erkunden Sie es selbst. Wir werden hier nacheinander nicht eingehen.
Hier sind einige WeChat -Aktien:
Zu Beginn sagten wir, dass der eingebaute Browser von WeChat in der oberen rechten Ecke eine Freigabefunktion hat, die es uns auch unmöglich macht, direkt auf unseren Webseiten an WeChats Freundeskreis zu teilen. WeChat bietet uns einen JS SDK für die benutzerdefinierte Freigabe von WeChat. Können Sie Ihre Leidenschaft nicht zurückhalten? Schauen wir uns einen kurzen Blick auf das, was dieser JS SDK ist? Die von WeChat bereitgestellten Dokumente sind zu diesem Zeitpunkt recht detailliert. Wenn Sie jedoch das JS SDK entwickeln möchten, benötigen wir zunächst ein offizielles WeChat -Konto, und dann klicken wir wie folgt auf "Schnittstellenberechtigungen", um die Berechtigungen anzuzeigen, wie folgt:
Ich werde nicht über die obigen grundlegenden Dinge sprechen. Konzentrieren wir uns darauf, wie Sie JSAPI_TICKET und unterschreiben können. Die von der offiziellen Dokumentation aufgeführten Schritte sollen zuerst Access_Token erhalten, dann JSAPI_TICKET über Access_Token erhalten und schließlich über JSAPI_TICKET unterschreiben. Lassen Sie uns Schritt für Schritt die oben genannten Arbeiten abschließen. Hinweis: Der Beamte bietet Beispielprogramme für PHP, Java, Python und NodeJs. Hier werde ich C# als Beispiel verwenden, um die obigen Operationen für Sie zu beenden.
Schritt 1: Access_token abrufen
In dem offiziellen Dokument heißt es: Access_Token ist die weltweit eindeutige Schnittstelle, die die Anmeldeinformationen des offiziellen Kontos bezeichnet. Access_Token ist erforderlich, wenn jede Schnittstelle nach dem offiziellen Konto angerufen wird. Entwickler müssen es richtig sparen. Die Speicherung von Access_Token muss mindestens 512 Zeichenraum behalten. Die Gültigkeitsdauer von Access_Token beträgt derzeit 2 Stunden und muss regelmäßig aktualisiert werden. Die wiederholte Erfassung führt dazu, dass das, das Sie beim letzten Mal erhalten haben, ungültig ist.
Schritt 2, um JSAPI_TICKET zu erhalten
Das offizielle Dokument besagt: JSAPI_TICKET ist ein temporäres Ticket, das vom offiziellen Konto verwendet wird, um die WeChat JS -Schnittstelle anzurufen. Unter normalen Umständen beträgt die Gültigkeitsdauer von JSAPI_Ticket 7200 Sekunden, was über Access_Token erhalten wird. Da die Anzahl der API -Aufrufe, um JSAPI_TICKET zu erhalten, sehr begrenzt ist, führt die häufige Aktualisierung von JSAPI_Ticket zu einer begrenzten API -Aufrufe und beeinträchtigt ihr eigenes Geschäft. Entwickler müssen in ihren Diensten jsapi_ticket weltweit zwischenspeichern.
1. Siehe das folgende Dokument, um Access_Token zu erhalten (für 7200 Sekunden gültig, Entwickler müssen in ihrem Service Access_Token global Cache Cache Cache haben): ../15/54ce45d8d30b6bf6758f68d2e95bc627.html
2. Verwenden Sie den im ersten Schritt erhaltenen Access_Token, um das jsapi_ticket (für 7200 Sekunden gültig zu gültig).
Nachdem Sie JSAPI_TICKET erhalten haben, können Sie eine Signatur für die Überprüfung der Berechtigungsverifizierung von JS-SDK generieren.
Der dritte Schritt besteht darin, die Signatur für JS-SDK-Berechtigungsüberprüfung zu generieren
Die Regeln für die Erzeugung von Signaturen lauten wie folgt: Die an der Signatur teilnehmenden Felder umfassen Noncestern (zufällige Zeichenfolge), gültiges JSAPI_TICKET, TIMESTAMP (TIMESTAMP), URL (die URL der aktuellen Webseite, nicht einschließlich # und ihre nachfolgenden Teile). Nachdem alle Parameter sortiert werden sollen, die gemäß dem ASCII-Code des Feldnamens von klein bis groß (Wörterbuchauftrag) signiert werden, wird das Format des URL-Schlüsselwertpaares (dh KEY1 = Value1 & Key2 = value2…) verwendet, um sich in eine String-String1 zu spleißen. Es ist hier zu beachten, dass alle Parameternamen Kleinbuchstaben sind. String1 ist verschlüsselt, und der Feldname und der Feldwert sind beide ursprüngliche Werte und es wird keine URL -Flucht durchgeführt.
Dinge zu beachten
1. Die für die Signatur verwendete Nicht -Zeugerin und der Zeitstempel müssen mit dem Nichtcestern und dem Zeitstempel in WX.Config übereinstimmen.
2. Die für die Signatur verwendete URL muss die vollständige URL der Seite sein, die die JS -Schnittstelle aufruft.
3. Aus Sicherheitsgründen müssen Entwickler die Signaturlogik auf der Serverseite implementieren.
Das obige ist der Signaturlogikteil des WeChat JS SDK, und das Folgende ist die spezifische Code -Implementierung:
using System;using System.Net;using System.Web.Mvc;using System.IO;using System.Text;using System.Web.Script.Serialization;using ManYiAbyWAP.Models;/// <summary>//// Get jsapi_ticket//// </summary>namespace ManYiAbyWAP.Controllers{public class WXMessageController: Controller{private static String appid = "Appid bereitgestellt von WeChat"; private static String secrect = "Geheimnis von Wechat"; Public static WxInfo AccessToken = NULL; // Global Object, alle 7200 Sekunden aktualisiert, wechat hat Anfragen und Zeitlimits für tägliche Token Acquisition Public static static übertime. {if (accessToken! Datetime.now;} // generieren Sie die Signature Timestamp TimesPan ts = datetime.utcnow - New DateTime (1970, 1, 1, 0, 0, 0, 0); "jsapi_ticket ="+ AccessToken .Ticket+ "& noncestern ="+ AccessToken.noncestr. JsonRequestBehavior.AllowGet);} // Erzeugen Sie eine zufällige Zeichenfolge private String createNoncestern (int länge = 16) {String str = "abcdefghijklMnopqrstuvwxyzabcDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; 8-Bit-langer zufälliger Charakter. Die spezifische Länge kann für sich selbst geändert werden für (int i = 0; i <Länge; i ++) {int m = r.Next (0, 62); // Hier ist die untere Grenze 0, die Zufallszahl kann erhalten werden, und die obere Grenze sollte 62 sein, da die zufällige Zahl nicht abgerufen werden kann, das Maximum 62, 62, in Bezug auf unsere Frage -String S = Str. Ergebnis;} // Hash -Algorithmus private statische String SHA1 (String Text) {byte [] cleanBytes = coding.default.getBytes (text); byte [] HashedBytes = system.security.cryptography.sha1.create (). computeHash (CleanByTes (CleanByTes); Bitconverter.toString (HashedBytes) .Replace ("-", "");} // Erhalten Sie tokenprivate statische WxInfo getWinxIne () {// Access_TokenHttpWebresponse-Response = erhalten CreateGethttPesponse ("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "& secret =" + Secret, 5000); ((line = reader.readline ())! CreateGethttPesponse ("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken.access_Token + "& type = jsapi", 5000); Reader.Readline ())! /// <param name = "timeout"> angeforderte timeout </param> /// <param name = "userAgent"> Die angeforderten Client -Browser -Informationen können leer sein Timeout, String userAgent = null, CookieRection -Cookies = null) {if (string.isnullorempty (url)) {neue argumentNulLexception ("url");} httpwebRequest request = webRequest.create (url) als httpwebRequest; (! String.IsnullorEmpty (userAgent)) {request.useragent = userAgent;} if (timeout.hasValue) {request.timeout = timeout.Value;} if (cookies! HttpwebResponse;}}}WxInfo.cs globales Objekt zum Speichern von Token -Informationen
Namespace ManyiAnywap.models {/// <summary> /// Wechat, um Token -Rückgabe -Parameterklasse zu erhalten /// </summary> public class wxInfo {public String appid {get; Satz; } public String access_token {get; Satz; } // access_tokenpublic String expires_in {get; Satz; } // Token -Ablaufzeit, gültig innerhalb von 7200 Sekunden öffentlicher String -Ticket {get; Satz; } // jsapi_ticketpublic String errmsg {get; Satz; } public int errcode {get; Satz; } public String noncestern {get; Satz; } // generieren Sie eine zufällige Zeichenfolge von Signaturen öffentlicher String -Zeitstempel {get; Satz; } // generieren Sie einen Zeitstempel von Signature Public String Signature {get; Satz; } // Signaturrückgabewert}}JS -Code für die Initialisierung auf der Webseite:
// WeChat JS SDK Request Status var requestStatus = 0; Funktion ShareWx () {if (RequestStatus! '/WxMessage/GetToken', DataType: 'JSON', Daten: ajaxpara, Erfolg: Funktion (json) {if (undefiniert! = Json && json! Parameter können Sie auf der PC -Seite öffnen. jsonobjs.Signature, // Erforderlich, siehe Anhang 1JSAPILIST: ['checkjsapi', 'Onmenusharetimeline', 'OnmenushAeAppMessage', 'Onmenushareqq', 'Onmenushareweibo', Onmenushareqzone '] // // erfordert, die Liste der JS -Interfaces, die verwendet werden. 2}); Das werden nur dann aufgerufen, wenn der Benutzer direkt aufgerufen werden kann, und müssen nicht in die Bereitschaftsfunktion platziert werden. Von JS-Schnittstellen, die erkannt werden müssen. {"checkResult": {"sumimage": trum}, "errmsg": "checkjsapi: ok"}}}); 'http://www.manyiasy.com/img/logo_2.jpg', // icon Erfolg: function () {// Die Rückruffunktion alert ("erfolgreich geteilt"; verification failed res:"+res);// After config information verification, the ready method will be executed. All interface calls must be obtained after the config interface obtains the result. config is an asynchronous operation of a client, so if you need to call the relevant interface when the page is loaded, the relevant interface must be placed in the ready function to ensure correct execution. For interfaces that are called only when the user triggers, they can be called directly, and do not need in die fertige Funktion platziert werden.Hier werde ich die Verwendung des Wechat -Sharing JS SDK einführen. Sie können sich darauf beziehen, basierend auf Ihren eigenen Bedürfnissen. Ich habe es Ihnen zu Beginn vorgestellt, dass der von WeChat bereitgestellte Sharing JS SDK nur eine Cache -Verarbeitung für den internen Browser von WeChat ist. Die reale Freigabe erfordert immer noch, dass wir in der oberen rechten Ecke auf die Schaltfläche Freigabe klicken.
Die oben genannten sind keine perfekten Lösungen für mobile Web -Sharing -Lösungen. Schließlich werde ich Ihnen einige Komponenten für soziale gemeinsame Nutzung vorstellen. Wenn ich diese Komponente sehe, weiß ich, dass dies das ist, was ich brauche, eine einfache Schnittstelle, und dies kann unsere Website elegant und komfortabel aussehen lassen. OK, ohne weiteres geben Sie das Thema ein:
Das oben genannte ist die Einführung des Editors zur Freigabe von Multi-Plattform-Funktionen in der mobilen Web-App. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!