关于微信自定义分享及二次分享的问题

项目需要微信自定义分享页面的标题描述和图片,记录下。

注意:需要有一个公众号,在设置公众号的安全域名,这个不进行叙述

需要引入微信的sdk.js  或者通过npm 进行安装,因使用了npm,所以仅以npm安装的状态来描述

npm install weixin-js-sdk

在需要分享的页面内进行引入 import wx from 'weixin-js-sdk'

需要后端取得appId等一次参数

methods:{

    share(){

       //请求url,返回appid等参数,注意url需要和当前页面的路径保持一致

       //使用axios请求,例(getWx)

    getWx({url:window.localhost.href})

    .then(data=>{

        wx.config({

            debug:false,// 开启调试模式

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

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

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

            signature:data.data.signature,

             jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"

         });

    })

    .catch(err=>{

        console.log(err)

    })

wx.ready(function() {

    let shareD={

        title:'分享标题',

        desc:'分享描述',

        imgUrl:'缩略图',

        link: window.localhost.href

         };

    wx.onMenuShareAppMessage(shareD);

    wx.onMenuShareTimeline(shareD);

   })        

    }

}

至此便可实现微信自定义分享,但若再次进行转发给好友或朋友圈时,会造成分享失败的问题,原因是因为

微信会在该页面添加参数 ?from=singlemessage ,和我们通过发送url去得到(wx.config)的一些参数不符合,造成分享失败经尝试发现,只需在页面进入的时候我们检测的路径是否存在?from=singlemessage来进行强制转换我们的window.localhost.href即可 。

你可能感兴趣的:(关于微信自定义分享及二次分享的问题)