Recientemente, la compañía creó una página H5 para que los estudiantes voten. Se usa principalmente en WeChat y necesita agregar la función para compartir WeChat;
Este artículo registra principalmente los asuntos que requieren atención al llamar a la interfaz para compartir de WeChat;
1. Para el marco angular1 utilizado en el front-end, primero debe introducir el archivo de interfaz WeChat en la página de índice;
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. Escriba la función para compartir WeChat en el archivo myApp.run. Tenga en cuenta que esta función necesita obtener y analizar la URL de la página actual, y luego enviarla al backend para generar la firma correspondiente y cargar el código directamente;
// Función de compartir de WeChat function wxShare() { var url = $location.absUrl().split('#')[0]; código == 0) { var respanse = res.data.data; wx.config({ depuración: falso, // Cuando el modo de depuración está activado, los valores de retorno de todas las llamadas API serán alertados en el lado del cliente. Si desea ver los parámetros entrantes, puede abrirlo en el lado de la PC. La información del parámetro se imprimirá a través de. log y appId se imprimirán solo en el lado de la PC respanse.appId, marca de tiempo: respanse.timestamp, // Obligatorio, genera la marca de tiempo de la firma nonceStr: respanse.nonceStr, // Obligatorio, genera la firma de cadena aleatoria de. firma: respanse.signature,// Requerido, firma jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// Requerido, lista de interfaces JS que deben usarse} } } ) }Después de analizar la URL actual, envíela a la interfaz de back-end. El back-end debe devolver el ID de aplicación, la marca de tiempo, la cadena aleatoria y la firma, y luego agregar la lista de interfaces (jsApiList) manualmente según sea necesario. la forma de una matriz. Solo la uso aquí. Necesito llamar a la interfaz para compartir;
Al depurar, puede cambiar la depuración a verdadero, de modo que cada vez que se llame a la interfaz WeChat, se alertará la información de la interfaz, lo que facilitará verificar si la llamada a la interfaz es normal;
3. Después de esta función, personalice el contenido para compartir, el código es el siguiente;
wx.ready(function () { var obj = { title: '¡La competencia por equipos de SPBCN ha comenzado a votar!', // Compartir título desc: 'La competencia por equipos de SPBCN ha comenzado a votar, ¡ven y anímanos!', // Compartir descripción enlace: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // Compartir enlace, el nombre de dominio o la ruta del enlace deben ser coherentes con el nombre de dominio de seguridad JS de la cuenta pública correspondiente al actual página // Este enlace es un enlace de redireccionamiento porque es necesario obtener el código de usuario, pero este enlace no puede escribir directamente el enlace a WeChat para obtener el código // Por lo tanto, debe hacer clic y volver a cargar la nueva página para implementar la redirección y volver a abrir la página. Enlace de WeChat para obtener el código, para implementar la función de obtener información del usuario; imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // Error en el icono de compartir: función (res) { alerta(JSON.stringify(res)); } }; // 2.1 Monitorear el uso compartido con amigos, clics en botones, contenido compartido personalizado e interfaz de resultados compartidos wx.onMenuShareAppMessage(obj); // 2.2 Monitoreo de clics en botones compartidos con amigos, contenido compartido personalizado e interfaz de resultados compartidos wx.onMenuShareTimeline (obj) ; // 2.3 Monitorear los clics en el botón Compartir a QQ, personalizar el contenido compartido y la interfaz de resultados compartidos wx.onMenuShareQQ(obj); 2.4 Supervise el clic del botón compartir en Weibo, personalice el contenido compartido y la interfaz de resultados compartidos wx.onMenuShareWeibo(obj); // 2.5 Supervise el clic del botón compartir en QZone, personalice el contenido compartido y la interfaz para compartir wx. onMenuShareQZone(obj})wx.ready se ejecuta automáticamente después de wx.config. Defino un objeto general para compartir contenido y luego lo llamo directamente. También puede definir contenido diferente para compartir amigos, círculo de amigos, Weibo, etc., según sea necesario. Documentación de la interfaz WeChat para más detalles;
El énfasis principal está en el enlace para compartir. El enlace debe estar bajo el nombre de dominio seguro JS establecido por su cuenta oficial; de lo contrario, el intercambio no se realizará correctamente;
Los síntomas de un error al compartir son que la imagen del enlace para compartir no puede cargar su imagen personalizada y el título para compartir es incorrecto;
5. Mi proyecto es para votación, por lo que necesito obtener el código de usuario cada vez que hago clic. Si simplemente comparte un artículo y no necesita información del usuario, simplemente cambie el enlace al enlace de su artículo;
6. Para la categoría de votación, he hecho un tratamiento especial aquí, es decir, redirigir el enlace. Todos saben que hay dos formas para que H5 obtenga la información del usuario de WeChat. Una es seguir la cuenta oficial de WeChat y la otra. usuario para obtener la información pública del usuario. El usuario hace clic en Aceptar. Sin embargo, ambos deben fusionarse en un enlace especial de WeChat de acuerdo con los requisitos de WeChat. Por lo tanto, el nombre de dominio viene con WeChat y no es el nombre de dominio seguro JS de nuestra cuenta oficial;
7. Por lo tanto, para el enlace compartido, si aún necesita obtener el código de usuario, debe usar otros métodos para lograrlo. Lo que usé fue agregar una página en blanco y, una vez cargada la página, saltar a WeChat para obtenerla. el enlace del código, http://dev.spbcn.org/wechat-vote-phone/redirect.html Este enlace es una página en blanco. El código para esta página es el siguiente;
ventana.onload = función () { // Enlace de redireccionamiento, que es el mismo que el enlace para obtener el código de usuario en la cuenta oficial de WeChat window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=cuenta pública appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. Este método tiene desventajas, es decir, agrega una página en blanco adicional. Todavía no he pensado en una buena manera. Todos pueden dejar un mensaje;
9. Si no se agrega este paso, el enlace compartido se mostrará normalmente, pero no se puede obtener el código y el backend no puede determinar el usuario, lo que resulta en la imposibilidad de restringir la votación de los usuarios;
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.