vue项目微信分享笔记

1、安装

npm install weixin-js-sdk --save-dev
npm install axios --save
复制代码

2、建立wxShare.js文件

import axios from 'axios'
import wx from 'weixin-js-sdk';
export default {

  wxShowMenu: function(shareInfo) {

    axios.post('后台接口-获取微信分享签名等', {
      url: window.location.href
    }).then(function(res) {
      console.log(res)
      var getMsg = res.data;

      wx.config({

        debug: false, //生产环境须要关闭debug模式

        appId: getMsg.appId, //appId经过微信服务号后台查看

        timestamp: getMsg.timestamp, //生成签名的时间戳

        nonceStr: getMsg.nonceStr, //生成签名的随机字符串

        signature: getMsg.signature, //签名

        jsApiList: [ //须要调用的JS接口列表

          'onMenuShareTimeline', //分享给好友

          'onMenuShareAppMessage', //分享到朋友圈

          'showMenuItems',

          'hideMenuItems'

        ]

      });

      wx.ready(function() {

        wx.checkJsApi({

          jsApiList: ["showMenuItems"],

          success: function(res) {

            wx.showMenuItems({

              menuList: [

                'menuItem:share:appMessage', //发送给朋友

                'menuItem:share:timeline' //分享到朋友圈

              ]

            });

          }

        });

        //分享到朋友圈

        wx.onMenuShareTimeline({

          title: shareInfo.title, // 分享标题

          desc: shareInfo.desc, // 分享描述

          link: shareInfo.linkurl, // 分享连接

          imgUrl: shareInfo.img // 分享图标

        });



        //分享给朋友

        wx.onMenuShareAppMessage({

          title: shareInfo.title, // 分享标题

          desc: shareInfo.desc, // 分享描述

          link: shareInfo.linkurl, // 分享连接

          imgUrl: shareInfo.img // 分享图标

        });

      });

    })

  }

}

复制代码

3、main.js中引入并挂在vue的原型上

个人wxShare.js在static/js目录下

import WXConfig from '../static/js/wxShare.js';
Vue.prototype.WXConfig = WXConfig;
复制代码

4、vue页面中使用

mounted() {
      let obj={
          title:'分享标题',
          desc:'分享描述',
          linkurl: '分享连接',
          img: '分享图片',
      }
      this.WXConfig.wxShowMenu(obj);
    },
复制代码

5、后记

网上找了好几种方法，要么说的不清不楚的，要么存在一些问题达不到要求，或许是我太菜了理解不了。总之，找了很久才找到一个合适的，很是感谢这位大佬，如下是原文连接 https://blog.csdn.net/web_xyk/article/details/80453068 若是文中有错误，还请大佬多多指正！