教你傻瓜式使用vue开发网页微信分享功能

落日映苍穹つ 2021-11-10 07:26 193阅读 0赞

首先，你会vue 其次你要有 微信公众号1. appid 2. 密钥 相当于你的微信认证身份证  
不废话了！！  
下面直接怼方法  
`没有公众号的先看这个 [公众号开通教程]`添加链接描述  
在公众号 基本配置里面看自己的id 记得设置ip白名单 也就是你的安全域名  
下面就直接怼vue代码  
配置

npm install weixin-js-sdk   下载报错的用cnpm也行

要分享的页面引入// 微信
     import wx from 'weixin-js-sdk';
     也可以main.js引入

// import WXConfig from './assets/js/sdk' // 微信分享

// Vue.prototype.WXConfig = WXConfig;

接着首先创建sdk.js

import wx from 'weixin-js-sdk'			//微信sdk依赖
    
    const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo']
    										//要用到微信API
    import axios from 'axios'
    // 
     
    // var getMsg = res.data.data;
    function getJSSDK(url, dataForWeixin) { 
        // axios.get('').then(function(res) { encodeURIComponent(url)
        axios.get(' ' ).then(res => { 
          console.log(res)
          window.wx.config({ 
           
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //下面这里不用管 让后台看一下 让他返给你 
            appId: 'wx8beb9047b24697e2', // 必填，公众号的唯一标识
            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature, // 必填，签名
            jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareQQ'
            ] // 必填，需要使用的JS接口列表
          })
          console.log(res) //打印测试
          window.wx.ready(function () { 
            window.wx.onMenuShareAppMessage({ 
              title: dataForWeixin.title,
              desc: dataForWeixin.desc,
              link: dataForWeixin.linkurl,
              imgUrl: dataForWeixin.img,
              trigger: function trigger(res) {  },
              success: function success(res) { 
                console.log('已分享');
              },
              cancel: function cancel(res) { 
                console.log('已取消');
              },
              fail: function fail(res) { 
                alert(JSON.stringify(res));
              }
            });
            // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
            window.wx.onMenuShareTimeline({ 
              title: dataForWeixin.title,
              link: dataForWeixin.linkurl,
              imgUrl: dataForWeixin.img,
              trigger: function trigger(res) { 
                // alert('用户点击分享到朋友圈');
              },
              success: function success(res) { 
                //alert('已分享');
              },
              cancel: function cancel(res) { 
                //alert('已取消');
              },
              fail: function fail(res) { 
                alert(JSON.stringify(res));
              }
            });
          // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
          window.wx.onMenuShareQQ({ 
              title: dataForWeixin.title,
              desc: dataForWeixin.desc,
              link: dataForWeixin.linkurl,
              imgUrl: dataForWeixin.img,
              trigger: function trigger(res) { 
                //alert('用户点击分享到QQ');
              },
              complete: function complete(res) { 
                alert(JSON.stringify(res));
              },
              success: function success(res) { 
                //alert('已分享');
              },
              cancel: function cancel(res) { 
                //alert('已取消');
              },
              fail: function fail(res) { 
                //alert(JSON.stringify(res));
              }
            });
            // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
            window.wx.onMenuShareWeibo({ 
              title: dataForWeixin.title,
              desc: dataForWeixin.desc,
              link: dataForWeixin.linkurl,
              imgUrl: dataForWeixin.img,
              trigger: function trigger(res) { 
                alert('用户点击分享到微博');
              },
              complete: function complete(res) { 
                alert(JSON.stringify(res));
              },
              success: function success(res) { 
                alert('已分享');
              },
              cancel: function cancel(res) { 
                alert('已取消');
              },
              fail: function fail(res) { 
              alert(JSON.stringify(res));
              }
            });
          })
          window.wx.error(function (res) { 
            alert("微信验证失败");
          });
        })
      }
      export default { 
        // 获取JSSDK
        getJSSDK: getJSSDK
      }
    
    ```javascript

index.html文件引入  
最好去用官方看看最新接口，自己看着修改对应接口  
\`\`  
vue分享模块里面创建一个事件 自己调用

// 微信分享到好友
        weihao(){ 
            let url = window.location.href.split('#')[0];
            let obj = { 
            title: this.userInfo.UserName,		//分享标题
            desc: '个人资料',						//分享内容
            linkurl: location.protocol+"//"+location.host+'/dist/#/show?id=' + this.userInfo.Id,//分享链接
            img: this.userInfo.Photo,				//分享内容显示的图片
          }
          sdk.getJSSDK(url, obj)
        }
        看着修改  这里面的值你需要传给后台  后台拿到这些值返给你sdk里面的数据
        记得叫你后台一起看看这个  不需要的不要传

注意：这是一般的分享 不是做打包app的分享支付 app的后面我会整理整理继续发给大家 同样也是vue开发的app 希望广大vue做app的同志加入vue开发原生app的行列 希望大家加入vue开发app的行列中 qq群：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190805113304472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA==,size_16,color_FFFFFF,t_70