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 若是文中有錯誤，還請大佬多多指正！