vue微信公众号页面分享

vue微信公众号页面分享

utils=>share.js

const wx = require("weixin-js-sdk");
// 这块因为我们业务是必须在公众号里面的，前期已经加过浏览器验证了，所以这个我没加wx判断
export const share = data => {
    let url = "";
    let ua = navigator.userAgent.toLowerCase();
    // 处理ios 分享链接问题
    if (/iphone|ipad|ipod/.test(ua)) {
        url = location.href.split("#")[0];
    } else if (/android/.test(ua)) {
        url = location.href;
    }
    //获取jsapi_ticket,参考https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
    api
        .getConfig({ url: url })
        .then(res => {
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.data.appId, // 必填，公众号的唯一标识
                timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                signature: res.data.signature, // 必填，签名，见附录1
                jsApiList: ["onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function () {
                // 需在用户可能点击分享按钮前就先调用
                wx.onMenuShareTimeline({
                    title: "",  // 分享标题
                    desc: "",   // 分享描述
                    link: "",   // 分享链接，链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "", // 分享图标
                    success: function () {  // 设置成功
                       console.log("分享方法");
                    }
                });
            });
        })
        .catch(err => { });
}

附：
更多js接口列表查看官方文档

验证微信浏览器

// let ua = navigator.userAgent.toLowerCase();
// let isWeixin = ua.indexOf('micromessenger') !== -1;