VueH5公众号分享到微信朋友圈或好友

场景需求：

一般分享场景是在当前页面分享当前页面，但是业务需求是，在当前页面分享好几个其他页面的链接到朋友圈和好友。

PS：微信自带的分享面板是无法第三方唤起的，只能点三个点。

其次在微信公众号页也不支持自定义的按钮来唤起分享好友的列表。 因此只能提示用户自己去点右上方三个点来唤起！！！

解决方法： 

在点击分享后，弹出指示图片遮罩，暗地跳转到新的页面。

前期准备：

1.绑定域名

先登录微信公众平台进入"公众号设置"—>"功能设置"里填写如下的JS接口安全域名 备注：登录后可在“开发者中心”查看对应的接口权限。

ps:可能还有公众号权限、ip白名单的配置。

2.安装weixin-js-sdk

npm i weixin-js-sdk 

3.调用微信配置的文件，直接复制即可。

在utils下面新建wxShare.js
/* eslint-disable*/
import wx from "weixin-js-sdk"; //微信sdk依赖
const jsApiList = ["onMenuShareAppMessage", "onMenuShareTimeline"];
//要用到微信API
function getJSSDK(data, dataForWeixin) {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: "wx8f663359de28f56c", // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature, // 必填，签名
    jsApiList: jsApiList, // 必填，需要使用的JS接口列表
    success: () => {
      alert("success");
    },
  });
  wx.ready(function () {
    wx.onMenuShareAppMessage({
      title: dataForWeixin.title,
      desc: dataForWeixin.desc,
      link: dataForWeixin.link,
      imgUrl: dataForWeixin.imgUrl,
      trigger: function trigger(res) {
        // alert(111);
      },
      success: function success(res) {
        // alert('已分享');
      },
      cancel: function cancel(res) {
        // alert('已取消');
      },
      fail: function fail(res) {
        // alert('进来了');
      },
    });
    // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
    wx.onMenuShareTimeline({
      title: dataForWeixin.title,
      link: dataForWeixin.link,
      imgUrl: dataForWeixin.imgUrl,
      trigger: function trigger(res) {
        // alert(11);
        // alert('用户点击分享到朋友圈');
      },
      success: function success(res) {
        // alert('已分享');
      },
      cancel: function cancel(res) {
        //alert('已取消');
      },
      fail: function fail(res) {
        // alert(JSON.stringify(res));
      },
    });
  });
  wx.error((res) => {
    alert(stringify(res));
    console.log(JSON.stringify(res) + "微信验证失败");
  });
}
export default {
  // 获取JSSDK
  getJSSDK: getJSSDK,
};

4. 后端接口返回wx.config所需的配置信息。

5.页面调用。

关键点：

1.调用接口时的url是当前页面的url。

2.在跳转到所要分享的页面时候，不能用router.push，为了兼容ios,需要使用window.location.replace。

3.分享的图标，放置在assets下面。但是配置需要放置网络地址。当项目打包完成后所有的图片都会在dist的img文件夹里面，所以可以直接在配置时写{{域名.com/img/图片名}}。

4.如果有二维码图片的话想长按识别二维码，不能放置为背景图片，只能放做img。

5.微信公众号的H5会自带缓存,所以需要去掉缓存。在dist文件加时间戳。

在Vue.config.js里面
const version = new Date().getTime();
const mode = process.env.NODE_ENV;
const isDev = mode === "development";
在mudule.export上面

  // CSS 相关选项

  css: {
    extract: {
      // 打包后css文件名称添加时间戳
      filename: isDev ? "[name].css" : `css/[name].${version}.css`,
      chunkFilename: isDev ? "[name].css" : `css/chunk.[id].${version}.css`,
    },

    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 37.5,
          }),
        ],
      },
    },
  },

  configureWebpack: {
    output: {
      filename: isDev ? "[name].js" : `js/[name].[chunkhash:10].${version}.js`,
      chunkFilename: isDev
        ? "[name].js"
        : `js/[id].[chunkhash:10].${version}.js`,
    },
  },

import { shareWx } from "@/api/port";

  mounted() {
    this.toWxAgentShare();
  },
  methods: {
    //招募代理的分享到朋友圈
    toWxAgentShare() {
      let url = window.location.href.split("#")[0];
      shareWx({ url }).then((res) => {
        if (res.data.code == 200) {
          const { data } = res.data;
          let bankShare = {
            title: "自定义标题",
            desc: "自定义描述",
            link: `需要分享的链接?phone=${this.phone}&code=${this.code}`,
            imgUrl: "域名/img/Share.png", 分享的图片
          };
          wxShare.getJSSDK(data, bankShare);
        }
      });
    },

   toWxAgentShare() {
      window.location.replace(`${process.env.VUE_APP_H_URL}insure/bankShare`);
    },
}