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

首先，你会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群：