Un proyecto reciente necesitaba compartir WeChat y personalizar el contenido de WeChat. Dado que esta fue la primera vez que estuve expuesto a compartir WeChat, registré algunos de los problemas encontrados durante el proceso, así como todo el proceso. de completar la función.
El siguiente es el proceso general (los detalles se colocan en cada etapa)
npm install weixin-js-sdk --save-dev
Para obtener instrucciones específicas, consulte la documentación oficial de WeChat.
2. Inicialice el uso compartido de WeChatDebido a que muchos de los proyectos en los que estoy trabajando requieren el uso de la función para compartir de WeChat, el código compartido en WeChat se encapsulará aquí.
La API en el código siguiente es en realidad una solicitud de axios.
importar wx desde 'weixin-js-sdk' importar api desde '@/api'const wxApi = { /** * [inicialización de wxRegister WeChat Api] * @param {Función} devolución de llamada [función de devolución de llamada lista] */ wxRegister (devolución de llamada, url) { let query = { // La URL aquí debe ser la URL que corresponde exactamente a la página que desea compartir, y la URL base64 debe convertirse: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // Activa el modo de depuración appId: data.appId, // Obligatorio, el identificador único del marca de tiempo de la cuenta oficial: data.timestamp, // Requerido, generar la marca de tiempo de la firma nonceStr: data.nonceStr, // Requerido, generar la cadena aleatoria de la firma firma: data.signature, // Requerido, firma, consulte el Apéndice 1 jsApiList: data.jsApiList // Requerido, una lista de interfaces JS que deben usarse, consulte el Apéndice 2 para obtener una lista de todas las interfaces JS }) }) wx.ready((res) => { // Si es necesario, personaliza el método de devolución de llamada listo if (callback) { callback() } }) },}Nota: Si necesita convertir base64 arriba, puede usar js-base64
3. Configure WeChat para compartir contenido personalizado (enviar a amigos, enviar a Momentos)
El segundo paso es inicializar la configuración del paquete para WeChat, pero aún le faltan las funciones correspondientes para compartir y otras, mejorémoslo aquí.
//Agregar /*** después de la función wxRegister [ShareTimeline compartir WeChat personalizado en Momentos]* @param {[tipo]} opción [compartir información]* @param {[tipo]} éxito [devolución de llamada exitosa]* @param {[ tipo]} error [devolución de llamada fallida]*/ShareTimeline (opción) {wx.updateTimelineShareData({ título: opción.título, // Compartir enlace de título: opción.enlace, // Compartir enlace imgUrl: option.imgUrl, // Compartir ícono correctamente () { // Configuración exitosa}, cancelar () { // Configuración fallida}})},/*** [ShareAppMessage WeChat personalizado para compartir con amigos]* @ param {[tipo]} opción [compartir información]* @param {[tipo]} éxito [devolución de llamada exitosa]* @param {[tipo]} error [devolución de llamada fallida]*/ShareAppMessage (opción) {wx.updateAppMessageShareData({ título: option.title, // Compartir título desc: option.desc, // Compartir enlace de descripción: option.link, // Compartir enlace imgUrl: option.imgUrl, // Compartir ícono exitoso () { // Configuración exitosa}, cancelar () { // Configuración fallida}})}4. Al llamar a la página
// vue como ejemplo // Para los siguientes parámetros de función, consulte el método anterior import wx desde 'su archivo encapsulado' montado(){ let base64 = require('js-base64').Base64 let url = base64. codificar (ventana.ubicación.href) wx.wxRegister(this.wxRegCallback,url)},métodos:{ // Devolución de llamada jdk personalizada wxRegCallback () {}, // Función personalizada para compartir con amigos wxShareAppMessage(){ let option = { title:'', // Compartir título desc: '', // Compartir enlace de descripción: ' ', // Compartir enlace imgUrl: '' // Icono de compartir } // Inyecta el método general wx.ShareAppMessage(option) }, // Función personalizada para compartir con el círculo de amigos wxShareTimeline(){ let option = { title:'',// Compartir título desc: '', // Compartir enlace de descripción: '', // Compartir enlace imgUrl: '' // Compartir icono } // Inyecta el método general wx.ShareTimeline(opción) }}Lo anterior es el proceso de compartir en WeChat. Si hay alguna deficiencia, indíquela.
Nota:Compartir WeChat solo se puede probar en dispositivos reales
Los nombres de dominio que utilizan el formato localhost no pueden pasar la verificación de WeChat
ResumirLo anterior es la implementación HTML5 para compartir WeChat y el contenido personalizado presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo.