Soit dit en passant, les applications ont généralement des entrées à partager sur les plateformes sociales, et il existe également un bon cadre pour partager les pages Web. Cependant, avec le développement continu de HTML5, les pages Web mobiles deviennent de plus en plus populaires dans nos vies. Alors, comment terminer le partage sur nos téléphones mobiles? En parlant de cela, les principales plateformes de partage ont des SDK pour Android et iOS. En tant que développeurs, nous n'avons qu'à intégrer le SDK dans notre projet. Grâce à l'interface externe fournie, nous pouvons facilement compléter la fonction de partage; En ce qui concerne les pages Web, il existe de nombreux excellents cadres de partage sur Internet, tels que: le partage BShare et le partage de Jiathis; Nous pouvons facilement nous intégrer à notre projet; Mais nous devons faire un certain effort dans la mise en œuvre du partage sur les pages Web mobiles. Je pense qu'à ce moment, nous pouvons partager en appelant le client installé par l'utilisateur. Ce qui doit être mentionné ici, c'est le partage de WeChat. Lorsque nous partageons sur la page Web, un code QR de partage apparaît généralement. Nous utilisons l'application WeChat pour scanner et partager. Nous ne pouvons pas fonctionner sur le téléphone mobile. Nous devons ouvrir l'application directement pour partager lorsque l'utilisateur sélectionne le partage de WeChat. Ici, nous nous plaindrons de WeChat Partage JS SDK. Lorsque je suis entré en contact avec cette chose, j'ai pensé que tant que j'avais terminé l'opération, je pouvais réaliser un partage personnalisé. Avec toutes sortes de pièges, j'ai finalement découvert que le SDK WeChat JS ne met temporairement que temporairement notre contenu personnalisé. Lorsque nous devons partager, nous devons encore terminer l'opération à travers le bouton dans le coin supérieur droit de WeChat. Ok, je ne parlerai plus de bêtises. Entrons le sujet d'aujourd'hui. Ensuite, je terminerai le partage de SINA, QQ, QQ Space et Tencent Weibo via des hyperliens, puis vous fournirai la logique de signature du composant de partage SDK WeChat JS basé sur la plate-forme C #, et vous mène enfin à terminer le partage du Web mobile.
Entrez le premier point: Complétez le partage via l'hyperlien
Pour les plateformes sociales couramment utilisées, nous pouvons essentiellement partager du contenu via des hyperliens, à l'exception de WeChat, qui ne prend pas en charge cette méthode de partage. Cette méthode de partage peut nous faciliter la personnalisation du partage et est très pratique à utiliser.
fonction shareSina () {// partager avec sina weibo var shareSinastring = 'http://service.weibo.com/share/share.php?title=' + $ ("# title"). Val () + '& url =' + $ ("# url"). {url: location.href, showCount: '0', / * Si le nombre total de partages s'affiche, affichez: '1', non afficher: '0' * / desc: '', / * Raison de partage par défaut (facultatif) * / Résumé: '', / * SAVARE RÉSUMAGE (MOTÉRIEL) * / Title: '', / * Titre (Tencental) * / Site: 'Manyi.com', / * Share Source tel: Tencent.com) * / site: ' (Facultatif) * / Pics: '', / * Chemin pour partager des images (facultatif) * / style: '203', largeur: 98, hauteur: 22}; // partager à QQ Space var ShareSinastring = 'http://snsshare_onekey?Title=' + $ ("). '& url =' + $ ("# url"). val () + '& site = "Manyi.com"'; window.location.href = shareSinastring;} fonction partageqqq () {var p = {url: location.href, / * get url, vous pouvez ajouter du partage au logo QQ pour les statistiques aléatoires * / DeSc: '' ', / * partage de la raison (le style doit simuler des statistiques de pands) multiple sharing languages (using|separation)*/title: '', /*Share title (optional)*/summary: '', /*Share summary (optional)*/pics: '', /*Share picture (optional)*/flash: '', /*Video address (optional)*/site: 'Manyi.com', /*Share source (optional) For example: QQ sharing*/style: '201',width: 32,height: 32}? '& Site = "Manyi.com"'; window.location.href = sharesinastring;} fonction partageqqweibo () {var p = {url: location.href, / * Obtenez l'URL, et ajoutez le logo QQ partagé à partir du QQ pour faciliter les statistiques * / titre: '', / * Titre de partage (optionnel) * / PIC: '', / * Partage facultatif) / * Partager Source (facultatif) Par exemple: QQ Partage * /}; // Partager à Tencent Weibo var ShareSinastring = 'http://vtqq.com/share/share.php?title=' + $ ("# title"). Val () + '& url =' + $ ("# url"). ShareSinastring;}Ce qui précède est les codes JS pour partager Sina Weibo, QQ, QQ Space et Tencent Weibo. Nous n'avons qu'à les appeler à l'endroit où la page doit être partagée. Bien sûr, il existe de nombreuses plateformes qui prennent également en charge cette forme de partage de contenu. Veuillez l'explorer vous-même. Nous n'élaborerons pas ici un par un ici.
Voici quelques actions WeChat:
Au début, nous avons dit que le navigateur intégré de WeChat avait une fonction de partage dans le coin supérieur droit, ce qui nous empêche également de partager directement sur nos pages Web vers le cercle d'amis de Wechat. WeChat nous fournit un SDK JS pour le partage personnalisé de WeChat. Êtes-vous incapable de retenir votre passion? Jetons un bref aperçu de ce qu'est ce SDK JS? Les documents fournis par WeChat sont assez détaillés à ce moment-là, mais si vous souhaitez développer le SDK JS, nous avons d'abord besoin d'un compte officiel de WeChat, puis nous cliquons "Interface Autorisations" pour afficher les autorisations que nous avons, comme suit:
Je ne parlerai pas des choses de base ci-dessus. Concentrons-nous sur la façon d'obtenir JSAPI_TICKET et comment signer. Les étapes provoquées par la documentation officielle sont d'abord d'obtenir Access_token, puis d'obtenir JSAPI_TICKET via Access_token, et enfin signer via JSAPI_TICKET. Complétons les travaux ci-dessus étape par étape. Remarque: Le fonctionnaire fournit des exemples de programmes pour PHP, Java, Python et NodeJS. Ici, j'utiliserai C # comme exemple pour mettre fin aux opérations ci-dessus pour vous.
Étape 1: Obtenez Access_token
Le document officiel indique ceci: Access_token est l'interface globalement unique appelant les informations d'identification du compte officiel. Access_token est requis lors de l'appel de chaque interface par le compte officiel. Les développeurs doivent le sauver correctement. Le stockage d'accès_token doit conserver au moins 512 espaces de caractères. La période de validité de Access_token est actuellement de 2 heures et doit être rafraîchie régulièrement. L'acquisition répétée provoquera l'accès à l'accès_token que vous avez obtenu la dernière fois invalide.
Étape 2 pour obtenir JSAPI_TICKET
Le document officiel indique ceci: JSAPI_TICKET est un billet temporaire utilisé par le compte officiel pour appeler l'interface WeChat JS. Dans des circonstances normales, la période de validité de JSAPI_TICKET est de 7200 secondes, qui est obtenue via Access_token. Étant donné que le nombre d'appels API pour obtenir JSAPI_TICKET est très limité, un rafraîchissement fréquent de JSAPI_TICKET entraînera limité les appels d'API et affectera leur propre entreprise. Les développeurs doivent mettre en cache JSAPI_TICKET dans le monde dans leurs services.
1. Reportez-vous au document suivant pour obtenir Access_token (valide pendant 7200 secondes, les développeurs doivent mettre en cache Access_token à l'échelle mondiale dans leur service): ../15/54CE45D8D30B6BF6758F68D2E95BC627.html
2. Utilisez l'accès_token obtenu dans la première étape pour demander le jsapi_ticket (valide pendant 7200 secondes, le développeur doit mettre en cache JSAPI_TICKET dans le monde entier dans son service): https://api.weixin.qq.com/cgi-bin/ticket/getticket?ccess_token=Access_Token&type=jsapisi
Après avoir obtenu JSAPI_TICKET, vous pouvez générer une signature pour la vérification d'autorisation JS-SDK.
La troisième étape consiste à générer la signature pour la vérification de l'autorisation JS-SDK
Les règles de génération de signature sont les suivantes: les champs participant à la signature incluent NONCESTR (chaîne aléatoire), JSAPI_TICKET valide, horodatage (horodatage), URL (l'URL de la page Web actuelle, sans compter # et ses parties suivantes). Après avoir trié tous les paramètres à signer du petit à grand (ordre du dictionnaire) en fonction du code ASCII du nom du champ, le format de la paire de valeurs de clé URL (c'est-à-dire, key1 = value1 & key2 = value2…) est utilisé pour épisser une chaîne String1. Il convient de noter ici que tous les noms de paramètres sont des caractères minuscules. String1 est chiffré et le nom de champ et la valeur du champ sont à la fois des valeurs d'origine et aucune évasion d'URL n'est effectuée.
Choses à noter
1. Le non-claim et l'horodatage utilisé pour la signature doivent être les mêmes que le non-claire et l'horodatage dans wx.config;
2. L'URL utilisée pour la signature doit être l'URL complète de la page appelant l'interface JS;
3. Pour des raisons de sécurité, les développeurs doivent implémenter la logique de signature du côté du serveur.
Ce qui précède est la partie logique de signature du SDK WeChat JS, et ce qui suit est l'implémentation de code spécifique:
Utilisation du System; Utilisation de System.net; Utilisation de System.Web.Mvc; Utilisation de System.io; Utilisation de System.Text; Utilisation de System.Web.Script.Serialization; Utilisation de ManyIaByWap.Models; /// <summary> /// Get JSAPI_TICKET ///// </summary> NamespaceS Appid = "appid fourni par WeChat"; private static String secrect = "Secret fourni par WeChat"; public static wxinfo AccessToken = null; // objet global, mis à jour toutes les 7200 secondes, WeChat a des demandes et des limites de temps pour la vérification de la réalisation quotidienne de la publication publique ActionnulSult GetToken (si une vérification à la mise à jour de l'action publique est-ce (AccessToken! = null) {TimesPan Span = convert.TodateTime (HEURS) .SURTRAT (convert.todatetime (dateTime.Now)); if (span.totalHours> 2) {AccessToken = getWinxintoken (); E-temps = DateTime.Nown DateTime.Now;} // Générez l'horodatage de signature Timespan ts = DateTime.UtcNow - New DateTime (1970, 1, 1, 0, 0, 0, 0); AccessToken.Timestamp = convert.toint64 (Ts.TotalSeconds) .ToString (); // Get the Random String AccessToken.NonCerm = Creenoncrestr (16); "JSAPI_TICKET =" + AccessToken .Ticket + "& nonCestr =" + AccessToken.Noncestr + "× Tamp =" + AccessToken.timestamp + "& url =" + url; AccessToken.Signature = sha1 (Str) .Tolower (); AccessToken.Appid = appid; return json (AccessToken,. JsonRequestBehavior.Allowget);} // générer une chaîne aléatoire String Private CreenOnCestr (int length = 16) {String str = "Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrsvwxyz0123456789"; random r = new Caractère aléatoire de long 8 bits. La longueur spécifique peut être modifiée par elle-même pour (int i = 0; i <longueur; i ++) {int m = r.next (0, 62); // ici la borne inférieure est 0, le nombre aléatoire peut être obtenu, et la limite supérieure doit être 62, car le nombre aléatoire ne peut pas être récupéré, c'est-à-dire le maximum est 62, qui est en ligne avec notre interrogatoire S = Str.Subsubstring (m, 1);}} Résultat;} // Algorithme de hachage String statique privé Sha1 (Texte de chaîne) {BYTE [] CleanBytes = Encoding.Default.getBytes (texte); Byte [] HashedBytes = System.Security.Cryptography.sha1.create (). ComputeHash (Cleanbytes); BitConverter.ToString (HashEdBytes) .replace ("-", "");} // Get tokenPrivate static wxinfo getwinxintoken () {// obtenir access_tokenhttpwebresponse réponse = CreateGethTTPResponse ("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credent&appid=" + appid + "& secret =" + secrect, 5000); StreamReder Reader = new streamReader (newing.getReSponSeMeram ()); Line de chaîne; StringbuIilder SB SB SB SB SB SB = New StringBuilder (); while ((line = reader.readline ())! = Null) {sb.append (line.toString ());} javascriptSerializer js = new javascriptSerializer (); wxinfo accessToken = Js JSAPI_TICKETRESPONCE = CREEGETHTTPRESPONSE ("https://api.weixin.qq.com/cgi-bin/ticket/GetTicket?access_token=" + AccessToken.Access_Token + "& Type = JSAPI", 5000); SB = new StreamReader (Response.getResPonSeSTRARE (); StringBuilder (); while ((line = reader.readline ())! = Null) {sb.append (line.toString ());} AccessToken = jsydeserialize <wxinfo> (sb.tostring ()); return accessToken;} /// <sumary> // Create a Get HTTP name = "URL"> URL demandé </ param> /// <param name = "Timeout"> Timeout </ param> /////// <param name = "UserAgent"> Les informations du navigateur client demandé peuvent être vides </ param> /// <Param Name = "Cookies"> Cookie Informations envoyées avec la demande HTTP, il peut être vide </ param> // <RETOURS> CreateEgethttpResponse (URL de chaîne, int? Timeout, String UserAgent = NULL, CookieCollection Cookies = Null) {if (String.isnullorempty (URL)) {Throw New ArgumentNullexception ("URL");} httpwebrequest request = webrequest.Create (url) as httpwebrequest; (! String.isnullorempty (userAgent)) {request.UserAgent = UserAgent;} if (timeout.hasvalue) {request.timeout = timeout.value;} if (cookies! = null) {request.cookieContainer = new CookieConainer (); request.cookieConTainer.Addd (cookies);} request. HttpwebResponse;}}}Objet global wxinfo.cs utilisé pour stocker des informations de jeton
Espace de noms ManyIaByWap.Models {/// <summary> /// weChat to Get Token Return Paramet class /// </summary> public class wxinfo {public String AppID {get; ensemble; } public String Access_token {get; ensemble; } // Access_tokenPublic String expires_in {get; ensemble; } // Temps d'expiration du jetons, valide dans les 7200 secondes du billet de chaîne publique {get; ensemble; } // JSAPI_TICKETPUBLIC String errmsg {get; ensemble; } public int errcode {get; ensemble; } public String NONCESTR {get; ensemble; } // Générez une chaîne aléatoire de TimeStamp de chaîne publique de signature {get; ensemble; } // générer un horodatage de signature de chaîne publique de signature {get; ensemble; } // Valeur de retour de signature}}Code JS pour l'initialisation sur la page Web:
// wechat js sdk request status var var dequeststatus = 0; function sharewx () {if (requeststatus! = 1) {requeststatus = 1; // demandant var ajaxpara = "url =" + encodeuriComponent (window.Location.href.split ('#') [0]); $. Ajax ({url: '/ WxMessage / GetToken', DataType: 'json', data: ajaxpara, succès: function (json) {if (undefined! = Json && json! == "") {var jsonObjs = eval (json); wx.config ({debug: false, // tourner le mode de débug Paramètres, vous pouvez les ouvrir du côté du PC. JSONOBJS.Signature, // requis, voir l'annexe 1JSapilist: ['Checkjsapi', 'OnmenushareTimeline', 'OnmenushareAppMessage', 'Onmenushareqq', 'Onmenushareweibo', `` OnMenushareQZone ''] 2}); wx.ready (function () {// alert ("La vérification WeChat est réussie"); // après la vérification des informations de configuration, la méthode prête sera exécutée. Tous les appels d'interface doivent être obtenus après l'interface de configuration obtenu le résultat. La configuration est un fonctionnement asynchrone d'un client. Interfaces qui sont appelées uniquement lorsque l'utilisateur se déclenche, ils peuvent être appelés directement et n'ont pas besoin d'être placés dans la fonction Ready. Liste des interfaces JS qui doivent être détectées. {"CheckResult": {"ChooseImage": true}, "errmsg": "checkjsapi: ok"}}}); wx.onmenushareweibo ({title: 'Manyi.com Partager Test', // partager le titre dec: 'Manyi.com Partager Description Test', // Partager le lien: 'http://www..manyiaby.com', // Sortie: 'Http://www. 'http://www.manyiaby.com/img/logo_2.jpg', // partager l'icône Success: function () {// La fonction de rappel alerte ("partagé avec succès");}, annuler: function () {// la fonction de rappel alerte (partage 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 to be placé dans la fonction prête.Ici, je présenterai l'utilisation du SDK JS Partage WeChat. Vous pouvez vous y référer en fonction de vos propres besoins. Je vous l'ai présenté au début que le SDK JS de partage fourni par WeChat n'est qu'un traitement de cache pour le navigateur interne de WeChat. Le véritable partage nous oblige toujours à cliquer sur le bouton de partage dans le coin supérieur droit.
Ce qui précède n'est pas des solutions de partage Web mobile parfaites. Enfin, je vais vous présenter des composants de partage social sosh. Quand je vois ce composant, je sais que c'est ce dont j'ai besoin, une interface simple, et cela peut rendre notre site Web élégant et confortable. Ok, sans plus tarder, entrez le sujet:
Ce qui précède est l'introduction de l'éditeur sur la façon de partager des fonctions multiplateformes sur l'application Web mobile. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!