Página web H5 vue llame a WeChat para compartir con el círculo de amigos, compartir con la función del círculo de amigos pisando el hoyo, con notas y soluciones

Recientemente, existe una función para compartir WeChat, que coincide con la oficina remota durante la epidemia. Luego, la computadora portátil en el hogar está relativamente cerrada. El entorno local es imperfecto. Luego, la oficina remota solo puede enviar el código al entorno de prueba para la depuración. El blogger también es más incómodo. El problema de la buena conexión, afortunadamente, se solucionó por la tarde después de llegar a la empresa.

La captura de pantalla de la comparación WeChat para un intercambio exitoso y fallido es la siguiente:
Inserte la descripción de la imagen aquí
antes de esto, el
código principal

 getShareInfo (tit, fxUrl) {//如果分享的内容会根据情况变化,那么这里可以传入分享标题及url
      let urlPath = location.href.split("#")[0] || "";
      var data = {//请求参数
        url: encodeURIComponent(urlPath),  // keyi
      }
      getWxJSSDKConfig(data)//这里我写了一个公用的接口请求js,这里正常axios请求就可以,只要拿到数据都可以
        .then(res => {
          res.data.debug = true
          console.log("jsapi_ticket", res.data)
          localStorage.setItem("jsapi_ticket", res.data);
          window.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: res.data.appId, // 必填,公众号的唯一标识
            timestamp: res.data.timestamp, // 必填,生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
            signature: res.data.signature, // 必填,签名,见附录1
            jsApiList: res.data.jsApiList // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            // jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
          })
          let urlPath = this.url.split("#")[0] || "";
          window.wx.ready(() => {
            // alert("准备完毕,加载方法");
            //分享到朋友圈
            window.wx.updateTimelineShareData({
              title: '共克疫情,四喜在线服务',   // 分享时的标题
              link: urlPath,     // 分享时的链接 // keyi
              imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'),   // 分享时的图标
              success: function () {
                console.log("分享成功");
              },
              cancel: function () {
                console.log("取消分享");
              }
            });
            //分享给朋友
            window.wx.updateAppMessageShareData({
              title: '共克疫情,四喜在线服务',
              desc: '千人专业电商运营公司,深耕行业12年,一键免费制定电商解决方案。',
              link: urlPath, // keyi
              imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'),
              type: '',
              dataUrl: '',
              success: function (n) {
                console.log("分享成功", n);
              },
              complete: function (n) {
                console.log(n);
              }
            });
          })
        })
    },

Antes de esto
1.
Requisitos técnicos de este nodo de tiempo a las 10:27:41 del 16 de marzo de 2020, esta función debe basarse en la cuenta pública de WeChat
2.
Configurar la lista blanca de nombres de dominio api y js
3.
Verifique la firma, blogger aquí es el ajuste frontal La interfaz, la verificación de back-end y el funcionamiento normal son así, pero el frontend también puede verificarlo usted mismo, pero esto es relativamente raro. Dependiendo de su situación, debería haber muchos tutoriales sobre la verificación de frontend en línea, que no se detallarán aquí.
4. Verifique la url de la firma. let urlPath = location.href.split("#")[0] || "";Independientemente de si su proyecto tiene #, agréguelo y listo. Solicite los parámetros. Recuerde codificarURIComponent var data = {//请求参数 url: encodeURIComponent(urlPath), // keyi }
5.updateTimelineShareData es muy importante, no me dé ningún método inmune, debe ser abandonado, jsdk versión 1.4 .0 instaló 1.6.0 para mí, que npm no pudo instalar, index.html fue referenciado por la etiqueta del script, y fue llamado por una ventana como blogger. let urlPath = this.url.split("#")[0] || "";Agrega aquí let urlPath = this.url.split("#")[0] || ""; window.wx.ready(() => { // alert("准备完毕,加载方法"); //分享到朋友圈 window.wx.updateTimelineShareData({ title: '共克疫情,四喜在线服务', // 分享时的标题 link: urlPath, // 分享时的链接 // keyi imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), // 分享时的图标 success: function () { console.log("分享成功"); }, cancel: function () { console.log("取消分享"); } }); //分享给朋友 window.wx.updateAppMessageShareData({ title: '共克疫情,四喜在线服务', desc: '千人专业电商运营公司,深耕行业12年,一键免费制定电商解决方案。', link: urlPath, // keyi imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), type: '', dataUrl: '', success: function (n) { console.log("分享成功", n); }, complete: function (n) { console.log(n); } });
para jugar así.
El proceso normal se desactiva, si no tiene problemas con la operación, el intercambio será exitoso.
Luego, la siguiente charla sobre los pozos que pisan varios bloggers, solo como referencia

Si no tiene éxito y no sabe qué está mal, use las herramientas de desarrollo de WeChat para depurarme
. 1. El
uso compartido de WeChat en el lado de la PC es exitoso y el teléfono no funciona. Usaré jsdk1.6.0 versión
2.
63004. Varios errores comunes
js y api La lista blanca de nombres de dominio debe configurarse,
y luego la verificación del backend tiene un sitio web especial para verificar, y los otros pasos son correctos, vaya a depurar esto
3. Si
hay un error de URL, míreme arriba. # 去 没 去 cifrado más no más

89 artículos originales publicados · Me gusta 103 · Visita 130,000+

Supongo que te gusta

Origin blog.csdn.net/qq_39517820/article/details/104893166
Recomendado
Clasificación