美文网首页
关于微信自定义分享及二次分享的问题

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

作者: 来一罐可乐 | 来源:发表于2019-04-05 20:19 被阅读0次

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

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

    需要引入微信的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即可 。

    相关文章

      网友评论

          本文标题:关于微信自定义分享及二次分享的问题

          本文链接:https://www.haomeiwen.com/subject/gswwbqtx.html