VUE H5页面微信/QQ/微博 分享连接设置

VUE H5页面微信/QQ/微博 分享连接设置

问题

想改变分享的标题、副标题、图片以及重定向打开的地址？

解决

第一步：在项目控制台里面 npm i -S weixin-js-sdk
( 然后视情况而定引入：npm install jquery / npm install --save-dev jquery )
第二步：在所需要的页面引入 import wx from “weixin-js-sdk”;
( 然后视情况而定引入：import $ from ‘jquery’）
第三步：在所需要的页面写入以下代码(以下代码需要视情况而改动，写中文的地方是要根据情况改动的，如果要复制下面代码需要导入第一步，第二步括号里面的内容)****

main.js 文件

let shareParam = {
  url: location.href.split('#')[0]
};
$.ajax({
  type: "post",  
  url: '你的接口的请求地址',
  cache: false,
  dataType: 'json',
  data: shareParam,
  success: function (res) {
    wx.config({
      debug: false,   // 代码调试的时候写true
      appId: '你的AppId',
      timestamp: 从你的接口请求来的 
      nonceStr: 从你的接口请求来的 
      signature: 从你的接口请求来的 
      jsApiList: [
        "onMenuShareTimeline",  // 分享给好友
        "onMenuShareAppMessage", // 分享到朋友圈
        "onMenuShareQQ",  // 分享到QQ
        "onMenuShareWeibo" // 分享到微博
      ]
    });
    wx.ready(()=>{
      wx.onMenuShareAppMessage({
        title: "标题",
        imgUrl: "图标",
        link: "重定向地址",
        desc: "副标题", 
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareTimeline({
        title: "标题",
        imgUrl: "图标",
        link: "重定向地址",
        desc: "副标题", 
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareQQ({
        title: "标题",
        imgUrl: "图标",
        link: "重定向地址",
        desc: "副标题", 
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      });
    })

  },