A propósito, os aplicativos geralmente têm entradas para compartilhar em plataformas sociais e também há uma boa estrutura para compartilhar páginas da web. No entanto, com o desenvolvimento contínuo do HTML5, as páginas da web móveis estão se tornando cada vez mais populares em nossas vidas. Então, como concluir o compartilhamento em nossos telefones celulares? Falando nisso, as principais plataformas de compartilhamento têm SDKs para Android e iOS. Como desenvolvedores, precisamos apenas integrar o SDK em nosso projeto. Através da interface externa fornecida, podemos concluir facilmente a função de compartilhamento; Quanto às páginas da web, existem muitas excelentes estruturas de compartilhamento na internet, como: compartilhamento de Bshare e compartilhamento de Jiathis; Podemos facilmente nos integrar ao nosso projeto; Mas precisamos nos esforçar para implementar o compartilhamento em páginas da web móveis. Eu acho que, neste momento, podemos compartilhar ligando para o cliente instalado pelo usuário. O que precisa ser mencionado aqui é o compartilhamento do WeChat. Quando compartilhamos na página da web, um código QR de compartilhamento geralmente aparece. Usamos o aplicativo WeChat para digitalizar e compartilhar. Não podemos operar no telefone celular. Precisamos abrir o aplicativo diretamente para compartilhar quando o usuário selecionar o compartilhamento do WeChat. Aqui vamos reclamar do WeChat compartilhando o JS SDK. Quando entrei em contato com essa coisa, pensei que, desde que concluísse a operação, conseguia realizar o compartilhamento personalizado. Com todos os tipos de armadilhas, finalmente descobri que o WeChat JS SDK apenas armazena temporariamente nosso conteúdo personalizado. Quando precisamos compartilhar, ainda precisamos concluir a operação através do botão no canto superior direito do WeChat. Ok, eu não vou mais falar bobagem. Vamos entrar no tópico de hoje. Em seguida, completarei o compartilhamento de Sina, QQ, QQ Space e Tencent Weibo através de hiperlinks e, em seguida, fornecerá a você a lógica de assinatura do componente de compartilhamento do WeChat JS SDK com base na plataforma C# e, finalmente, o levará a concluir o compartilhamento da web móvel.
Digite o primeiro ponto: Compartilhamento completo através do hiperlink
Para plataformas sociais comumente usadas, podemos basicamente compartilhar conteúdo por meio de hiperlinks, exceto o WeChat, que não suporta esse método de compartilhamento. Esse método de compartilhamento pode nos facilitar a personalizar o compartilhamento e é muito conveniente de usar.
Função açõesina () {// Compartilhe com sina weibo var sharesinsastring = 'http://service.weibo.com/share/share.php?title=' + $ ("#title"). {url: location.href, showcount: '0',/*se o número total de ações é exibido, exibir: '1', não exibir: '0'*/desc: '',/*compartilhamento padrão (opcional)*/slowary: '',/*slowary (sítio (opcional)*/título: '',/*compartilhar (título opcional)*/sítio/*sítio (sítio)*/title (Opcional)*/Fotos: '',/*PATH PARA COMPARTILHAR PICS (OPCIONAL)*/STILO: '203', LIDUTA: 98, Altura: 22}; // Compartilhe com qq Space var sharesinstring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzhare_qzone_ones. '& url =' + $ ("#url"). 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}; // Compartilhe com QQVAR ShareSAstring = 'http://connect.qq.com/widget/shareqq/index.html?title=' + $ ("#title"). '&site="Manyi.com"';window.location.href = sharesinastring;}function shareQQweibo() {var p = {url: location.href, /*Get the URL, and add the shared QQ logo from the QQ to facilitate statistics*/title: '', /*Share title (optional)*/pic: '', /*Share picture (optional)*/site: 'Manyi.com' /*Compartilhar fonte (opcional) por exemplo: compartilhamento qq*/}; // Compartilhe com tencent weibo var sharesinsastring = 'http://vtqq.com/share/share.php?title=' + $ ("#title"). SharesIstring;}O exposto acima são os códigos JS para compartilhar Sina Weibo, QQ, QQ Space e Tencent Weibo. Só precisamos ligar para eles no local onde a página precisa ser compartilhada. Obviamente, existem muitas plataformas que também suportam essa forma de compartilhamento de conteúdo. Por favor, explore você mesmo. Não vamos elaborar um a um aqui.
Aqui estão algumas ações do WeChat:
No começo, dissemos que o navegador embutido do WeChat tem uma função de compartilhamento no canto superior direito, o que também torna impossível compartilhar diretamente em nossas páginas da web com o círculo de amigos de WeChat. O WeChat nos fornece um JS SDK para compartilhamento personalizado do WeChat. Você não consegue segurar sua paixão? Vamos dar uma breve olhada no que é este JS SDK? Os documentos fornecidos pelo WeChat são bastante detalhados naquele momento, mas se você deseja desenvolver o JS SDK, primeiro precisamos de uma conta oficial do WeChat e, em seguida, clicamos em "Permissões de interface" para visualizar as permissões que temos, como segue:
Não vou falar sobre as coisas básicas acima. Vamos nos concentrar em como obter JSAPI_TICKET e como assinar. As etapas solicitadas pela documentação oficial são primeiro obter access_token, depois obter JSAPI_TICKET através do Access_Token e, finalmente, assinar através do JSAPI_TICKET. Vamos completar o trabalho acima passo a passo. Nota: O oficial fornece programas de exemplo para PHP, Java, Python e NodeJs. Aqui vou usar o C# como exemplo para encerrar as operações acima para você.
Etapa 1: Get Access_Token
O documento oficial diz o seguinte: Access_Token é a credencial de chamada de interface globalmente exclusiva da conta oficial. Access_Token é necessário ao ligar para cada interface pela conta oficial. Os desenvolvedores precisam salvá -lo corretamente. O armazenamento de access_token deve reter pelo menos 512 espaço de caracteres. O período de validade do Access_Token é atualmente 2 horas e precisa ser atualizado regularmente. Aquisição repetida fará com que o Access_Token obteve da última vez que seja inválido.
Etapa 2 para obter jsapi_ticket
O documento oficial diz o seguinte: JSAPI_TICKET é um ingresso temporário usado pela conta oficial para ligar para a interface WeChat JS. Em circunstâncias normais, o período de validade do JSAPI_Ticket é de 7200 segundos, o que é obtido através do Access_Token. Como o número de chamadas de API para obter JSAPI_Ticket é muito limitado, a atualização frequente do JSAPI_Ticket fará com que as chamadas da API sejam limitadas e afetem seus próprios negócios. Os desenvolvedores devem armazenar em cache jsapi_ticket globalmente em seus serviços.
1. Consulte o documento a seguir para obter access_token (válido por 7200 segundos, os desenvolvedores devem armazenar em cache access_token globalmente em seu serviço): ../15/54ce45d8d30b6bf6758f68d2e95bc627.html
2. Use o Access_token obtido na primeira etapa para solicitar o JSAPI_TICKET (válido por 7200 segundos, o desenvolvedor deve armazenar em cache jsapi_ticket globalmente em seu serviço): https://api.weixin.qq.com/cgi-bin/Ticket/GetTicket)
Depois de obter o JSAPI_TICKET, você pode gerar uma assinatura para a verificação de permissão JS-SDK.
O terceiro passo é gerar a assinatura para verificação de permissão JS-SDK
As regras de geração de assinatura são as seguintes: Os campos que participam da assinatura incluem não -CEST (string aleatória), JSAPI_TICKET válido, Timestamp (Timestamp), URL (o URL da página da web atual, sem incluir # e suas peças subsequentes). Depois de classificar todos os parâmetros a serem assinados de pequeno a grande (ordem do dicionário) de acordo com o código ASCII do nome do campo, o formato do par de valores de chave URL (ou seja, key1 = value1 e key2 = value2…) é usado para se unir em uma string string1. Deve -se notar aqui que todos os nomes de parâmetros são caracteres minúsculos. String1 é criptografado e o nome do campo e o valor do campo são valores originais e nenhuma escape de URL é executada.
Coisas a serem observadas
1. O não -CEST e o registro de data e hora usados para assinatura devem ser os mesmos que o não -CEST e o registro de data e hora em wx.config;
2. O URL usado para assinatura deve ser o URL completo da página chamando a interface JS;
3. Por motivos de segurança, os desenvolvedores devem implementar a lógica de assinatura no lado do servidor.
O exposto acima é a parte lógica da assinatura do WeChat JS SDK, e o seguinte é a implementação específica do código:
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: Controlador {String estática privada Appid = "Appid fornecido por WeChat"; private Static String secret = "Secret fornecido por WeChat"; public static wxinfo accessToken = null; // objeto global, atualizado a cada 7200 segundos, datetimen. GetToken (string url) {if (accessToken! = Null) {timespan span = convert.todateTime (horas extras) .subtract (convert.todatETime (dateTime.now)); if (span.totAlHours> 2) {AccessToken = »» GetwinxIntoken (); horas extras = DateTime.now;} // Gere o timestamp timespan TS = DATETime.utcNow - new DatETime (1970, 1, 1, 0, 0, 0, 0); accessToken.timestamp = convert.toint64 (T.TotalSecOnds). createNoCest (16); String str = "JSAPI_TICKET ="+ AccessToken .Ticket+ "& noncestr ="+ AccessToken.NoCest+ "× Tamp ="+ AccessToken.timestamp+ "& url ="+ url; accessToken.Signature = sha1 (stringt); JsonRequestBeHavior.AllowGet);} // Gere uma string aleatória String privada createNoCest (int length = 16) {string str = "abcdefghijklmnopqrstStuvwxyzabcdefghijklmnopqrstwxyz012345678"; caráter aleatório longo. O comprimento específico pode ser alterado por si mesmo para (int i = 0; i <comprimento; i ++) {int m = r.next (0, 62); // aqui o limite inferior é 0, o número aleatório pode ser obtido e o limite superior deve ser 62, porque o número aleatório não pode ser recuperado, ou seja, o máximo de 62, em str. resultado;} // algoritmo de hash private static string sha1 (text string) {byte [] limpebytes = coding.default.getbytes (text); byte [] hashedbytes = system.security.cryptography.sha1.create (). BitConverter.ToString (hashedBytes) .Rearplace ("-", "");} // Obtenha tokenprivate static wxinfo getwinxintoken () {// get Access_tokenHttpweBroSponse Response = CreateGethttPropSonse ("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + apídário + "e secret =" + segrecto, 5000); streamreader Liner = stringer; ((line = reader.readline ())! = null) {sb.append (line.toString ());} javascriptSserializer js = new javaScriptSserializer (); wxinfo accessToken = js.derialize <wxinfo> (sb.tostring (); CreateGethttPropSonse ("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken.access_token + "& type = jsapi", 5000); leitor = novo streamreader (resposta.GeTRESPONSTENSTRAM); reader.readline ())! = null) {sb.append (line.tostring ());} accessToken = js.deserialize <wxinfo> (sb.tostring ()); return AccessToken;} ////siply> /// cream a get htttp ///////////////t sobre o que /// <param name = "timeout"> Timeout solicitado </am Param> /// <param name = "userAgent"> As informações do navegador do cliente solicitado podem estar vazias </am Param> /// <param name = "cookies"> Informações de cookie enviadas com http htp, http, pode estar vazio </param> // <lortS> </recuperado Tempo limite, string userAgent = null, cookieCollection Cookies = null) {if (string.isnullorEmpty (url)) {tire new argumentnullexception ("url");} httpwebrequest request = webrequest.create (url) como httpwebrebest; (! string.isnullorEmpty (userAgent)) {request.userAgent = userAgent;} if (timeout.hasvalue) {request.Timeout = timeout.value;} if (cookies! Httpwebroponse;}}}Objeto global wxinfo.cs usado para armazenar informações de token
namespace haniabywap.models {/// <summary> /// wechat para obter token retornar parâmetro classe /// </summary> classe public wxinfo {public string appid {get; definir; } public string access_token {get; definir; } // access_tokenpublic string expira_in {get; definir; } // Tempo de validade do token, válido dentro de 7200 segundos Ticket de String Public {get; definir; } // jsapi_ticketpublic string errmsg {get; definir; } public int errcode {get; definir; } public string não -cest {get; definir; } // Gere uma sequência aleatória de assinatura public string timestamp {get; definir; } // gerar um registro de data e hora da assinatura da string pública {get; definir; } // Valor de retorno da assinatura}}Código JS para inicialização na página da web:
// weChat js sdk solicitação status var requestStatus = 0; function sharewx () {if (requestStatus! = 1) {requestStatus = 1; // solicitando var ajaxpara = "url =" + codeuricomponent (window.location.href.split ('#') [0]; '/WxMessage/getToken', Datatype: 'json', dados: ajaxpara, sucesso: function (json) {if (indefinido! = Json && json! Parâmetros, você pode abrir -os no lado do PC. jsonObjs.signature, // Required, see Appendix 1jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // Required, the list of JS interfaces that need to be used, see Appendix 2}); wx.ready (function () {// alert ("A verificação do WeChat é bem -sucedida"); // Após a verificação da informação de configuração, o método pronto será executado. Todas as chamadas de interface devem ser obtidas após a interface de configuração que o interface é o que se relevante, a interface do resultado. Execução. ['checkjsapi', 'onmenusharetimeline', 'onMenushareAppMessage', 'onmenushareqq', 'onmenushareweibo', 'onmenushareqzone'], // lista de interfaces JS que precisam ser detectados. O valor da API é verdadeiro, não está disponível como falso // por exemplo: {"checkResult": {"CHOOHEIMAGE": true}, "errmsg": "checkjsapi: ok"}}}); wx.onmenushareweibo ({title: 'Many.com/ time', // Compartilhar title desced:'i..com (title: 'Many.com/ testi.com/ test', // Share title dess:'ii..com (title: 'Many.com/ testi.com/ test', // Share title descer: 'Manyi.com.com (title:' Many.com/ testi.com/ test ', // Share title desct:'ii..com (title:' Many.com/ testi.com/ test ', // compartilhe title' Manyi...com 'http://www.manyiaby.com', // Compartilhe o link imgurl: 'http://www.manyiaby.com/img/logo_2.jpg', // compartilhe icon success: function () {// a função de retorno de chamada ("compartilhou -se com sucesso"); Cancel");}});});wx.error(function (res) {//alert("WeChat 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 A interface deve ser colocada na função pronta para garantir a execução correta.Aqui, apresentarei o uso do WeChat compartilhando o JS SDK. Você pode se referir a ele com base em suas próprias necessidades. Eu o apresentei no início que o JS SDK compartilhado fornecido pelo WeChat é apenas um processamento de cache para o navegador interno do WeChat. O compartilhamento real ainda exige que cliquem no botão de compartilhamento no canto superior direito.
Os acima não são soluções perfeitas de compartilhamento de web móveis. Finalmente, apresentarei alguns componentes de compartilhamento social do SOSH. Quando vejo esse componente, sei que é isso que preciso, uma interface simples, e isso pode fazer com que nosso site pareça elegante e confortável. OK, sem mais delongas, insira o tópico:
O exposto acima é a introdução do editor a como compartilhar funções de várias plataformas no aplicativo da web móvel. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!