First of all, you will have vue. Second, you will have Wechat Public Number 1. Appid 2. The key is equivalent to your Wechat Authentication ID Card.
No nonsense!!
The following direct approach
Look at this first without a public number Public Number Opens Course
Look at your id in the basic configuration of public number. Remember to set up the white list of ip, which is your secure domain name.
Here's the direct vue code
To configure
npm install weixin-js-sdk download error using cnpm
Introducing // Wechat to Share Pages
import wx from 'weixin-js-sdk';
You can also introduce main.js
// import WXConfig from'. / assets/js/sdk'// Wechat Sharing

// Vue.prototype.WXConfig = WXConfig;

Next, create sdk.js

import wx from 'weixin-js-sdk'			//Wechat sdk dependence

const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo']
										//To use Wechat 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, // When debugging mode is turned on, the return values of all APIs invoked will be displayed in alert on the client side. To view the incoming parameters, it can be opened on the pc side. The parameter information will be typed out through the log and printed only on the pc side.
        //Next, let's take a look behind the scenes and ask him to come back to you. 
        appId: 'wx8beb9047b24697e2', // Mandatory, Unique Identification of Public Number
        timestamp: res.data.data.timestamp, // Mandatory, time stamp for signature generation
        nonceStr: res.data.data.nonceStr, // Compulsory, generating random strings of signatures
        signature: res.data.data.signature, // Must fill in, sign
        jsApiList: [
            'onMenuShareAppMessage',
            'onMenuShareQQ'
        ] // Mandatory, list of JS interfaces to use
      })
      console.log(res) //Print test
      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('Shared');
          },
          cancel: function cancel(res) {
            console.log('Cancelled');
          },
          fail: function fail(res) {
            alert(JSON.stringify(res));
          }
        });
        // 2.2 Monitor "Share to Friends" button click, customize sharing content and sharing result interface
        window.wx.onMenuShareTimeline({
          title: dataForWeixin.title,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            // alert('User clicks to share in the circle of friends');
          },
          success: function success(res) {
            //alert('shared');
          },
          cancel: function cancel(res) {
            //alert('cancelled');
          },
          fail: function fail(res) {
            alert(JSON.stringify(res));
          }
        });
      // 2.3 Monitor "Share to QQ" button click, customize sharing content and sharing result interface
      window.wx.onMenuShareQQ({
          title: dataForWeixin.title,
          desc: dataForWeixin.desc,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            //alert('user clicks to share to QQ');
          },
          complete: function complete(res) {
            alert(JSON.stringify(res));
          },
          success: function success(res) {
            //alert('shared');
          },
          cancel: function cancel(res) {
            //alert('cancelled');
          },
          fail: function fail(res) {
            //alert(JSON.stringify(res));
          }
        });
        // 2.4 Monitor "Share to Weibo" Button Click, Customize Share Content and Share Result Interface
        window.wx.onMenuShareWeibo({
          title: dataForWeixin.title,
          desc: dataForWeixin.desc,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            alert('Users click and share to Weibo');
          },
          complete: function complete(res) {
            alert(JSON.stringify(res));
          },
          success: function success(res) {
            alert('Shared');
          },
          cancel: function cancel(res) {
            alert('Cancelled');
          },
          fail: function fail(res) {
          alert(JSON.stringify(res));
          }
        });
      })
      window.wx.error(function (res) {
        alert("Wechat authentication failed");
      });
    })
  }
  export default {
    // Get JSSDK
    getJSSDK: getJSSDK
  }

Introduction of index.html file
     <script type= "text/javascript" src= "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script> It's better to use the official to look at the latest interface and see for yourself how to modify the corresponding interface.
``
Create an event in the vue share module and call it by itself

// Wechat Shares with Friends
weihao(){
let url = window.location.href.split('#')[0];
let obj = {
title: this.userInfo.UserName, // share title
desc:'Personal Data', / / Sharing Content
linkurl: location.protocol+"//"+location.host+'/dist/#/show?id=' + this.userInfo.Id //Share Links
img: this.userInfo.Photo, // Share the pictures displayed in the content
}
sdk.getJSSDK(url, obj)
}
Looking at the changes in the values you need to pass to the background to get the data back to your sdk
Remember to ask you to look behind the scenes at this unnecessary non-biography

Note: This is a general sharing, not a shared payment app for packaged apps. I will sort out and continue to send you apps that are also developed by vue. I hope that the majority of Vue app comrades join the ranks of Vue developing native apps. I hope you join the qq group in the ranks of Vue developing apps.