vue-h5-分享（分享好友，分享朋友圈）

    最近做的一个需求h5分享微信好友，朋友圈，实现过程有几点注意事项，记录下来

步骤1：

首先在公共号中配置js安全域名，配置js安全域名，重点强调，js安全域名配置和你项目访问路径的域名一致。

步骤2：

安装wx jsdk

npm install weixin-js-sdk

然后配置wx.config

import wx from "weixin-js-sdk"

/*
 * 微信分享
 * 获取微信加签信息
 * @param{data}:获取的微信加签
 * @param{shareData}:分享配置参数
 */
export const wxConfig = (data) => {
    let appId = data.appId;
    let timestamp = data.timestamp;
    let nonceStr = data.noncestr;
    let signature = data.signature;
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.checkJsApi({
        jsApiList: ['chooseImage', 'updateAppMessageShareData','updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            console.log(res, 'checkJsApi')
        }
    });
    
    wx.error(function(res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log('验证失败返回的信息:', res);
    });
}

export const wxShare =(shareData)=> {
  wx.ready(function() {
    // //分享到朋友圈”及“分享到QQ空间”
    wx.updateTimelineShareData({
        title: shareData.title||'超级双十一，年终盛典', // 分享标题
        link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: shareData.imgUrl, // 分享图标
        success: function(res) {
            // 设置成功
            console.log("分享朋友圈成功返回的信息为:", res);
        }
    })

    //“分享给朋友”及“分享到QQ”
    wx.updateAppMessageShareData({
        title: shareData.title|| '超级双十一，年终盛典', // 分享标题
        desc: shareData.desc||'进店立领10元无门槛优惠券，数量有限，先到先得；下单硬件产品更有好礼相送', // 分享描述
        link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: shareData.imgUrl, // 分享图标
        success: function(res) {
            console.log("分享朋友成功返回的信息为:", res);;
        }
    })

});
}

在路由拦截里初始化wx.config 配置

/* 路由拦截： lenovoid 交互 */
router.beforeEach(async(to, from, next) => {
  let url = window.location.href.split('#')[0]
  axios.post(`wxconfig`,{url}).then(({data})=>{
    wxConfig(data.data)
  })
  
  next()
});

然后在需要分享的页面调用 分享方法，把需要的分享数据传入  wxShare(shareObj)

这样就可以了

注意：如果是url丑陋的链接形式打开，然后点击右上角的三个点去分享好友及朋友圈依然还是丑陋的链接

注意： 可以把链接收藏，从收藏夹中打开，再做分享就是卡片形式的，或者把链接生成二维码，扫描二维码打开也可以分享卡片形式

注意：

如果遇到无效的签名错误

1.检查配置里参数大小写。

2.appId是否是配置过js安全域名对应的你要的那个。

3.跟后台接口人员确认，获取签名的类型，类型定义错误，也会报签名无效

好了今天的分享就到这里，完结撒花！！！！