微信公众号JS-SDK对接

直接上代码

//接口请求方法
import $ajax from '@/config/ajax';
//页面引入微信sdk文件
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "https://res2.wx.qq.com/open/js/jweixin-1.4.0.js");
document.body.appendChild(script);
window.onload = function () {
    //获取当前页面地址
    let url = window.location.href;
    url = url.substring(0, url.indexOf("#"));
    //获取签名、随机数、时间戳
    $ajax.post("api/open/signature", {
        url: url
    }).then(res => {
        // 微信SDK配置
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: config.weiXinAppId, // 必填，公众号的唯一标识
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.noncestr, // 必填，生成签名的随机串
            signature: res.signature,// 必填，签名
            jsApiList: ["getLocation", "updateAppMessageShareData","updateTimelineShareData"] // 必填，需要使用的JS接口列表
        });
    });
    //配置校验失败后执行
    wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log(res);
    });
}
//获取地理位置
export const getLocation = (callback) => {
    //配置校验成功后执行
    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                console.log(res);
                callback && callback(res);
            }
        });
    });
}
//设置分享信息
export const setShare = (data,callback) => {
    //配置校验成功后执行
    wx.ready(function () {
        if (!data.link) {
            data.link = window.location.href;
        }
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.updateAppMessageShareData({
            title: data.title, // 分享标题
            desc: data.desc, // 分享描述
            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: data.imgUrl, // 分享图标
            success: function () {
                // 设置成功
                callback && callback();
            }
        });
        wx.updateTimelineShareData({
            title: data.title, // 分享标题
            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: data.imgUrl, // 分享图标
            success: function () {
                // 设置成功
                callback && callback();
            }
        })
    });
}