Por cierto, las aplicaciones generalmente tienen entradas para compartir en plataformas sociales, y también hay un buen marco para compartir páginas web. Sin embargo, con el desarrollo continuo de HTML5, las páginas web móviles se están volviendo cada vez más populares en nuestras vidas. Entonces, ¿cómo completar el intercambio en nuestros teléfonos móviles? Hablando de eso, las principales plataformas de intercambio tienen SDK para Android e iOS. Como desarrolladores, solo necesitamos integrar el SDK en nuestro proyecto. A través de la interfaz externa proporcionada, podemos completar fácilmente la función de intercambio; En cuanto a las páginas web, hay muchos excelentes marcos compartidos en Internet, como: Bshare compartiendo y jiatis compartiendo; Podemos integrarnos fácilmente en nuestro proyecto; Pero necesitamos hacer un esfuerzo para implementar compartir en páginas web móviles. Creo que en este momento, podemos compartir llamando al cliente instalado por el usuario. Lo que debe mencionarse aquí es compartir WeChat. Cuando compartimos en la página web, un código QR compartido generalmente aparece. Utilizamos la aplicación WeChat para escanear y compartir. No podemos operar en el teléfono móvil. Necesitamos abrir la aplicación directamente para compartir cuando el usuario selecciona WeChat Sharing. Aquí nos quejaremos de WeChat compartiendo JS SDK. Cuando entré en contacto por primera vez con esto, pensé que mientras completara la operación, podía darme cuenta de un intercambio personalizado. Con todo tipo de trampas, finalmente descubrí que el WeChat JS SDK solo almacena temporalmente nuestro contenido personalizado. Cuando necesitamos compartir, todavía necesitamos completar la operación a través del botón en la esquina superior derecha de WeChat. Ok, ya no hablaré tonterías. Entremos en el tema de hoy. A continuación, completaré el intercambio de Sina, QQ, QQ Space y Tencent Weibo a través de hipervínculos, y luego le proporcionaré la lógica de firma del componente compartido de WeChat JS SDK basado en la plataforma C#, y finalmente lo llevó a completar el intercambio de la web móvil.
Ingrese el primer punto: Complete compartir a través del hipervínculo
Para las plataformas sociales de uso común, básicamente podemos compartir contenido a través de hipervínculos, excepto WeChat, que no admite este método de intercambio. Este método de intercambio puede facilitarnos personalizar el intercambio y es muy conveniente de usar.
function sharesina () {// Compartir en Sina Weibo var SharesInastring = 'http://service.weibo.com/share/share.php?title=' + $ ("#title"). val () + '& url =' + $ ("#url"). val (); window.latation.href = sharesinString;} {url:location.href,showcount:'0',/*Whether the total number of shares is displayed, display: '1', not display: '0' */desc:'',/*Default sharing reason (optional)*/summary:'',/*Share summary (optional)*/title:'',/*Share title (optional)*/site:'Manyi.com',/*Share source such as: Tencent (Opcional)*/Pics: '',/*para compartir imágenes (opcional)*/style: '203', ancho: 98, altura: 22}; // Compartir en qq space var sharesastring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshee_onekey? '& url =' + $ ("#url"). Val () + '& Site = "Manyi.com"'; window.location.href = sharesAntring;} function shareqqq () {var p = {url: ubicación múltiples idiomas compartidos (usando | separación)*/título: '',/*compartir título (opcional)*/sumario: '',/*compartir resumen (opcional)*/pics: '',/*compartir imagen (opcional)*/flash: '',/*dirección de video (opcional)*/sitio: 'manyi.com',/*fuente (opcional) por ejemplo: Qq compartiendo*/estilo: '201', 201 ', 32, 32, altura: 32, altura: 32, 32, 32: 32}; // compartir a Qqvar SharesInastring = 'http://connect.qq.com/widget/shareqq/index.html?title=' + $ ("#title"). Val () + '& sumario =' + $ ("#url"). Val () + url = ' + $ ("#url"). '& Site = "Manyi.com"'; window.location.href = sharesAntring;} function shareQqweibo () {var p = {url: ubicación.href, /*Obtener la url, y agregar el logotipo de Qq compartido desde el qq para facilitar las estadísticas* /title: '', /*share title (opcional)* /pic: '', /*share pica (opción)* /sitio): '' '': '') /*Fuente de compartir (opcional) Por ejemplo: QQ Sharing*/}; // Compartir en Tencent Weibo Var SharesIntring = 'http://vtqq.com/share/share.php?title=' + $ ("#título"). Val () + '& url =' + $ ("#url"). Val () + '& Site = "Manyi.com"; Sharesinastring;}Lo anterior son los códigos JS para compartir Sina Weibo, QQ, QQ Space y Tencent Weibo. Solo necesitamos llamarlos a la ubicación donde se debe compartir la página. Por supuesto, hay muchas plataformas que también admiten esta forma de compartir contenido. Por favor explúrelo usted mismo. No lo explicaremos uno por uno aquí.
Aquí hay algunas acciones de WeChat:
Al principio, dijimos que el navegador incorporado de WeChat tiene una función de intercambio en la esquina superior derecha, lo que también nos hace imposible compartir directamente en nuestras páginas web al círculo de amigos de WeChat. WeChat nos proporciona un JS SDK para compartir a medida de WeChat. ¿No puedes contener tu pasión? Echemos un vistazo breve a lo que es este JS SDK. Los documentos proporcionados por WeChat son bastante detallados en ese momento, pero si desea desarrollar el JS SDK, primero necesitamos una cuenta oficial de WeChat, y luego hacemos clic en "Permisos de interfaz" para ver los permisos que tenemos, de la siguiente manera:
No hablaré sobre las cosas básicas anteriores. Centrémonos en cómo obtener JSAPI_Ticket y cómo firmar. Los pasos solicitados por la documentación oficial son obtener primero access_token, luego obtener jsapi_ticket a través de access_token y finalmente firmar a través de jsapi_ticket. Completemos el trabajo anterior paso a paso. Nota: El funcionario proporciona programas de ejemplo para PHP, Java, Python y NodeJS. Aquí usaré C# como ejemplo para finalizar las operaciones anteriores para usted.
Paso 1: Obtener access_token
El documento oficial dice esto: Access_token es la credencial de llamadas de interfaz globalmente única de la cuenta oficial. Access_token es necesario cuando llame a cada interfaz por la cuenta oficial. Los desarrolladores deben guardarlo correctamente. El almacenamiento de Access_Token debe retener al menos 512 espacio de caracteres. El período de validez de Access_Token es actualmente 2 horas y debe actualizarse regularmente. La adquisición repetida hará que el Access_Token que haya obtenido la última vez no sea válida.
Paso 2 para obtener jsapi_ticket
El documento oficial dice esto: JSAPI_Ticket es un boleto temporal utilizado por la cuenta oficial para llamar a la interfaz WeChat JS. En circunstancias normales, el período de validez de JSAPI_Ticket es de 7200 segundos, que se obtiene a través de Access_Token. Dado que el número de llamadas de API para obtener JSAPI_Ticket es muy limitado, la actualización frecuente de JSAPI_Ticket hará que las llamadas API sean limitadas y afecten su propio negocio. Los desarrolladores deben almacenar en caché JSAPI_Ticket a nivel mundial en sus servicios.
1. Consulte el siguiente documento para obtener Access_Token (válido para 7200 segundos, los desarrolladores deben almacenar en caché de acceso a nivel mundial en su servicio): ../15/54CE45D8D30B6BF6758F68D2E95BC627.HTML
2. Use el access_token obtenido en el primer paso para solicitar el jsapi_ticket (válido para 7200 segundos, el desarrollador debe almacenar en caché jsapi_ticket en su servicio): https://api.weixin.qq.com/cgi--bin/ticket/getticket?access_token=access_toke&type=jsapi
Después de obtener JSAPI_Ticket, puede generar una firma para la verificación del permiso JS-SDK.
El tercer paso es generar la firma para la verificación del permiso JS-SDK
Las reglas de generación de la firma son las siguientes: los campos que participan en la firma incluyen Non -Cestr (cadena aleatoria), JSAPI_Ticket válido, Timestamp (Timestamp), URL (la URL de la página web actual, sin incluir # y sus partes posteriores). Después de clasificar todos los parámetros que se firmarán de pequeño a grande (orden de diccionario) de acuerdo con el código ASCII del nombre del campo, el formato del par de valores clave de URL (es decir, Key1 = Value1 & Key2 = Value2 ...) se usa para empalmarse en una cadena String1. Cabe señalar aquí que todos los nombres de parámetros son caracteres en minúsculas. String1 está encriptado, y el nombre de campo y el valor de campo son valores originales y no se realiza un escape de URL.
Cosas a tener en cuenta
1. La marca de tiempo sin capar y el tiempo utilizada para la firma debe ser la misma que la marca de tiempo sin cocción y el tiempo en wx.config;
2. La URL utilizada para la firma debe ser la URL completa de la página que llama a la interfaz JS;
3. Por razones de seguridad, los desarrolladores deben implementar la lógica de firma en el lado del servidor.
Lo anterior es la parte lógica de firma del WeChat JS SDK, y la siguiente es la implementación específica del código:
utilizando System; usando System.net; Uso de System.Web.MVC; usando System.io; usando System.Text; usando System.Web.Script.Serialization; Uso de ManyiaBywap.models; /// <summary> //// get jsapi_ticket ///// </summary> namesiaByWap. compalter static static static staticontroller: stataterTroller: privado stataterTroller: privado stataterTroller: stataterTroller: controla: comporte de control de names cadena appid = "appid proporcionado por wechat"; private static string secrect = "secreto proporcionado por wechat"; public static static wxinfo accesstoken = null; // objeto global, actualizado cada 7200 segundos, wechat tiene solicitudes y límites de tiempo para la adquisición diaria de token de token. {if (accessToken! = null) {TimesPan span = convert.todateTime (extra de tiempo) .subtract (convert.todateTime (datetime.now)); if (span.totalhours> 2) {accesstoken = getwinxIntoken (); overtime = decheTime.now;}} {accessToKen = getwwewwoken (); Datetime.now;} // Genere la marca de tiempo de firma Timespan ts = datTime.utcNow - nueva Datetime (1970, 1, 1, 0, 0, 0, 0, 0, 0); AccessToken.timestamp = Convert.Toint64 (Ts.TotalSeconds .ToString (); // Obtener la cadena aleatoria AccessToken.nonCestry "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);} // Generar una cadena aleatoria de cadena privada CreateNOnCestr (int longitud = 16) {String str = "ABCDefghiJklmnopqrStuvWxyzAbcDefghIJKlmnopqrStuvWXYZ0123456789"; Random R = New Random (); String Resulty; Carácter aleatorio de 8 bits de largo. La longitud específica se puede cambiar por sí misma para (int i = 0; i <longitud; i ++) {int m = R.Next (0, 62); // Aquí el límite inferior es 0, el número aleatorio se puede obtener, y el límite superior debe ser 62, porque el número aleatorio no se puede recuperar, es decir, el máximo es 62, que está en línea con nuestra cadena de cuestiones = str.subring (m, 1); resultante; resultado;} // hash algoritmo cadena estática privada sha1 (texto de cadena) {byte [] cleanbytes = encoding.default.getBytes (text); byte [] hashedbytes = system.security.cryptography.sha1.create (). Computehash (Cleanbybytes); regreso BitConverter.ToString (Hashedbytes) .replace ("-", "");} // get tokenPrivate static wxinfo getWinxInToken () {// get access_tokinghttpwebresponse = CreateGethttPResponse ("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "& Secret =" + Secrect, 5000); StreamReader lector = new StreamReader (Response.getResponseSam (); = lector.readline ())! = null) {sb.append (line.ToString ());} javascriptserializer js = new javaScriptSerializer (); wxinfo accesstoken = js.deserialize <wxinfo> (sb.ToString ()); // CreateGethttPResponse ("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accesstoken.access_token + "& type = jsapi", 5000); lector = new StreamReader (Response.getResponsream ()); sb = new StringBuilder (); reader.readline ())! = null) {sb.append (line.ToString ());} accessToken = js.deserialize <wxinfo> (sb.ToString ()); return accessToken;} //// <summary> /// crea una solicitud de HTTP /// </ </ </ </ </ </ </ </ </ </ </ <</ </ </ <<mam name = "url" url "Usl"////<///////////////////¡Solicitar </parámetro </parámetro> /// <<param name = "timeOut"> Tiempo de espera solicitado </param> /// <param name = "userAgent"> La información del navegador del cliente solicitado puede estar vacío </marr> /// <param name = "Cookies"> Información de cookie enviada con la solicitud Http, puede estar vacía </amamr> /// <turners> <//devuelve> httpweBResponse createsponse de httpweResse de httponse de público. String userAgent = null, CookieCollection Cookies = null) {if (string.isNullorEmpty (url)) {throw new ArgumentNulLException ("url");} httpwebRequest request = WebRequest.Create (url) como httpwebRequest; request.method = "get"; if "; if"; if "; if"; if "; if"; if "; if"; if "; if"; if "; if"; if "; if"; if "; if"; if "; if"; if "; if"; if "; if"; if "; If (? HttpwebResponse;}}}Wxinfo.cs objeto global para almacenar información token
espacio de nombres ManyiaBywap.Models {/// <summary> /// weChat para obtener la clase de parámetro de retorno de token //// </summary> public class wxinfo {public String Appid {get; colocar; } public String access_token {get; colocar; } // access_tokenpublic string expires_in {get; colocar; } // Tiempo de caducidad de token, válido dentro de los 7200 segundos Ticket de cadena pública {get; colocar; } // jsapi_TicketPublic String Errmsg {get; colocar; } public int errcode {get; colocar; } Public String Non -Cestr {get; colocar; } // Generar una cadena aleatoria de marca de tiempo de cadena pública de firma {get; colocar; } // Generar una marca de tiempo de firma de cadena pública firma {get; colocar; } // valor de retorno de firma}}Código JS para la inicialización en la página web:
// WeChat JS SDK Solicitud de solicitud var requestStatus = 0; function shareWx () {if (requestStatus! = 1) {requestStatus = 1; // Solicitud de var ajaxpara = "url =" + encodeuricOponent (windows.location.href.split ('#' ') [0]); $. '/WxMessage/getToken', DataType: 'Json', Data: Ajaxpara, Success: Function (JSON) {if (Undefined! = JSON && JSON! == "") {var jsonObjs = Parámetros, puede abrirlos en el lado de la PC. jsonobjs.signature, // requerido, ver Apéndice 1jsapilist: ['checkjsapi', 'onMenusharetimeline', 'onMenushAREppMessage', 'onMenushareqq', 'OnMenushareweibo', 'OnMenushareqzone'] //, la lista de js interfaces que es necesario que se necesiten, vea que se requiere appendix, vea a Appendix. 2});wx.ready(function () {//alert("WeChat verification is successful");// 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. Therefore, if you need to call the relevant interface when the page is loaded, the relevant interface must be called in the ready function to ensure correct execution. For interfaces that are Llamado solo cuando el usuario se desencadena, se puede llamar directamente y no es necesario colocar en la función Ready. Interfaces que deben detectarse. {"checkResult": {"elimateImage": true}, "errmsg": "checkjSapi: ok"}}}); wx.onmenushareweibo ({title: 'manyi.com share test', // share desc: 'manyi.com share descripción prueba', // enlace de descripción: 'http://wwww.manyiabyby ° /////////////aquin de compartir. 'http://www.manyiaby.com/img/logo_2.jpg', // compartir icon éxito: function () {// La función de devolución de llamada alerta ("compartida con éxito");}, cancelar: function () {// la función de devolución de llamada alerta ("Cancel shared");}});}); wx.error (function (res) {//alerta de devolución de llamada ("Wequat" res: "+res); // Después de la verificación de información de configuración, se ejecutará el método listo. Se deben obtener todas las llamadas de interfaz después de que la interfaz de configuración obtenga el resultado. La configuración es una operación asíncrona de un cliente, por lo que si necesita llamar a la interfaz relevante cuando se cargue la página, la interfaz relevante debe colocarse en la función lista para garantizar la ejecución correcta. Para las interfaces que se llaman solo los que se llaman a los usuarios, se pueden llamar a los que se llaman a los usuarios, se pueden llamar a los usuarios, se pueden llamar a los que se llaman a los usuarios, se pueden llamar a los que se llaman a los usuarios. función lista.Aquí, presentaré el uso del WeChat Sharing JS SDK. Puede consultarlo según sus propias necesidades. Al principio, le he presentado que el SDK de compartir JS proporcionado por WeChat es solo un procesamiento de caché para el navegador interno de WeChat. El intercambio real todavía requiere que hagamos clic en el botón de intercambio en la esquina superior derecha.
Los anteriores no son soluciones de intercambio web móvil perfectas. Finalmente, te presentaré algunos componentes de intercambio social SOSH. Cuando veo este componente, sé que esto es lo que necesito, una interfaz simple, y puede hacer que nuestro sitio web se vea elegante y cómodo. Ok, sin más preámbulos, ingrese al tema:
Lo anterior es la introducción del editor a cómo compartir funciones multiplataforma en la aplicación web móvil. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!