vue3.0使用微信分享功能

utils下面新建wxShare.js

import jweixin from 'weixin-js-sdk'  // npm install weixin-js-sdk -S下载命令

import {getShareTicketConfig} from '@/api/index.js' //后台接口返回公众号信息

import {HTTP_REQUEST_URL} from '@/config.js' // 请求

const wxShare =  async function (title,desc,link,img){

  let currentWebUrl = link;

  let imgUrls = img?window.location.origin+HTTP_REQUEST_URL+img:window.location.origin+'/static/images/logo.png'

  let res = await getShareTicketConfig({'currentWebUrl':link})

  if(res.code === 200){

    // 注入权限验证配置

    jweixin.config({

      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

      appId: res.data.appId, //后台 必填，公众号的唯一标识

      timestamp: res.data.timestamp, // 必填，后台生成签名的时间戳

      nonceStr: res.data.nonceStr, // 必填，后台生成签名的随机串

      signature: res.data.signature, // 必填，后台签名

      jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']

    });

    // 注入权限验证配置

    jweixin.ready(function() {

      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

      // 判断当前客户端版本是否支持指定JS接口

      jweixin.checkJsApi({

        jsApiList: ['updateAppMessageShareData','updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,

        success: function(res) {

          //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

          jweixin.updateAppMessageShareData({

            title: title, // 分享标题

            desc: desc?desc:'简介',

            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

            imgUrl: ''+imgUrls+'', // 分享图标

            success: function() {

              // 用户点击了分享后执行的回调函数

              // console.log("分享成功");

            },

            cancel: function() {

              // 用户取消分享后执行的回调函数

              console.log("分享取消");

            }

          });

          // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）

          jweixin.updateTimelineShareData({

            title: title, // 分享标题

            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

            imgUrl: imgUrls, // 分享图标

            success: function() {

              // 用户点击了分享后执行的回调函数

              // console.log("分享成功2");

              // alert(currentWebUrl)

            },

            cancel: function() {

              // 用户取消分享后执行的回调函数

              // console.log("分享取消2");

            }

          });

        }

      });

    });

         

    //必须放jweixin.ready后面 否则无法执行

    jweixin.error(function(res) {

      console.log('error',res)

      // alert("config error");

      //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

    });

  }

}

export default wxShare

main.js全局挂载

import wxShare from "./utils/wxShare.js"

app.config.globalProperties.$wxShare = wxShare;

要使用的页面

import {getCurrentInstance} form 'vue'

在onMounted里使用

const {proxy}:any = getCurrentInstance()

const newMethod = proxy.$wxShare;

newMethod('标题','简介','链接','封面图')