Vue微信JSSDK使用方案

1、引用Vue依赖

yarn add weixin-js-sdk

2、新建wxConfig.js

//获取签名接口
import {requestData} from "@/api/request"; 
import {auth} from "@/api/urls";
import wx from "weixin-js-sdk";
const wxConfig = (resolve, reject) => {
    const url = window.location.href;
    requestData(auth.jsapi, {url: url, wxtype: "qy"}).then(({data, succeeded}) => {
        if (succeeded) {
            wx.config({
                beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appid, // 必填，企业微信的corpID
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.noncestr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
                jsApiList: [
                    'onMenuShareAppMessage',//获取“转发”按钮点击状态及自定义分享内容接口
                    'onMenuShareWechat',//获取“微信”按钮点击状态及自定义分享内容接口
                    'onMenuShareTimeline',//分享到朋友圈
                    'shareAppMessage',//自定义转发到微信
                    'shareWechatMessage', //自定义转发到微信
                    'hideMenuItems',//隐藏右上角菜单接口
                    'getLocation',//获取地理位置接口
                ] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.ready(res => {
                // 微信SDK准备就绪后执行的回调。
                wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
                    menuList: [
                        'menuItem:share:wechat',//分享微信
                        "menuItem:share:timeline",//分享到朋友圈
                        'menuItem:openWithSafari',//Safari打开
                        'menuItem:share:email',//邮箱
                        'menuItem:setFont',//调整字体
                        'menuItem:copyUrl',//复制链接
                        'menuItem:favorite',//收藏
                    ]
                });
                resolve && resolve(wx, res);
            })
            wx.error(function (res) {
                console.log(res);
            });
        } else {
            console.log("微信配置错误！");
        }
    })
};

export {wxConfig}

3、main.js全局引用

import {wxConfig} from '@/utils/wxjsApi.js';
app.config.globalProperties.$wxConfig = wxConfig;

4、页面组件使用

//微信分享和获取定位
const {proxy} = getCurrentInstance();
proxy.$wxConfig((wx, res) => {
  let shareData = {
    title: "分享标题", // 分享标题
    desc: "分享描述分享描述分享描述分享描述", // 分享描述
    link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: host + "/heard.png", // 分享图标
  };
  // 转发
  wx.onMenuShareAppMessage(shareData);
  // 分享到朋友圈
  wx.onMenuShareTimeline(shareData)
  // 获取地理位置
  wx.getLocation({
    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
    success: function (res) {
    }
  });
});