vue2+h5 实现微信分享

1.先绑定域名，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。由于该自定义分享需要借助微信的jssdk来实现，所以这一步是必须的。

2. 让后端出接口来完成wx.config的配置

3. 下载 weixin-js-sdk 插件 npm install weixin-js-sdk -S

4.新建share.js文件

import { getWxConfig } from "@/utils/api";
import wx from "weixin-js-sdk";

const configFn = () => {
  return new Promise((resolve, reject) => {
    const url = location.href.split("#")[0];
    getWxConfig(url).then((res) => {
      const { appId, timestamp, nonceStr, signature, jsApiList } =
        res.data.data;
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
        appId, // 必填，公众号的唯一标识
        timestamp, // 必填，生成签名的时间戳
        nonceStr, // 必填，生成签名的随机串
        signature, // 必填，签名
        jsApiList, // 必填，需要使用的JS接口列表，分享会用到这两个接口
      });
      resolve();
    });
  });
};

// 处理分享信息
export const wxShare = async (data) => {
  // 微信接口配置
  await configFn();
  wx.ready(function () {
    wx.updateAppMessageShareData({
      title: data.title || "", // 分享标题
      desc: data.desc || "", // 分享描述
      link: data.link || "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl:
        data.imgUrl || "", // 分享图标
    });
    wx.updateTimelineShareData({
      title: data.title || "", // 分享标题
      link: data.link || "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: data.imgUrl || "", // 分享图标
    });
  });
};

5.应用

<template>
  <div></div>
</template>

<script>
import { wxShare } from '@/utils/share'
export default {
  name: 'Home',
  data() {
    return {
     
  },
  mounted() {
   wxShare({})
  },
}
</script>

<style lang="scss" scoped>

</style>