天天看点

微信分享——js-sdk接口的爬坑分享

有好东西,大家要一起分享

微信分享——js-sdk接口的爬坑分享

也是公司运营部门在某些时候做推广的一些方式。

那么我们平时用的这些分享接口怎么实现呢?

以下为微信公众平台为我们提供的微信页面开发js-sdk说明文档:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

我们简单的实现文档提供的步骤:

微信分享——js-sdk接口的爬坑分享

再次我直接进入调用js文件

关于1.1.3的验证,需要配合后台返回以下我们需要的参数

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});
           

正常情况下,前端工作者只需借用ajax向后台传送本页链接:

window.location.herf
           

举个例子:

function getData(page) {
            var pageTotal = 0;
            $.ajax({
                url : "XXXX",
                type : "post",
                async : false,//此处需要注意的是要想获取ajax返回的值这个async属性必须设置成同步的,否则获取不到返回值
                data :{"url":window.location.href},
                dataType : "json",
                success : function(data) {
                    pageTotal = data;
                    console.log(pageTotal);
                }
            });
            return pageTotal;
        }
var wxGetDate = getData();   //包含wx.config所需要的参数
           

继续例子:(wx.config):

wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: '和谐’, // 必填,公众号的唯一标识
            timestamp:wxGetDate.timestamp , // 必填,生成签名的时间戳
            nonceStr: wxGetDate.noncestr, // 必填,生成签名的随机串
            signature: wxGetDate.signature,// 必填,签名
            jsApiList: [
                //需要重写的功能列表
                "updateAppMessageShareData"               //此处我们使用“分享到朋友”
            ] // 必填,需要使用的JS接口列表    在文档末尾——附录2
        });
           
微信分享——js-sdk接口的爬坑分享

以下内容是查错,直接copy即可

wx.error(function(res){
            // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        });
           

真正起作用位置:

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
                title: '我们取个好一点的名字', // 分享标题
                desc: '来啊,来玩啊', // 分享描述
                link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '图片链接', // 分享图标
                success: function () {
                    // 设置成功
                }
            })
        })
           

如果你做完这一切,可以了,去分享吧!

记住官方文档,他很重要。作为开发者,要理解文档,去开发文档,而不是每每做着干想,等着别人给你思路。

或许有人领航,能事半功倍,但你也失去了前进的原动力。

至此,第一次分享完毕,二次分享则会:(借用某位博主的话)微信在进行二次分享后会给该链接自动加上from以及isappinstalled这两个参数证明该链接是二次分享过来的,有了这两个参数,便会导致二次分享进行签名时失效,一次分享拥有的自定义信息都会被抹杀,剩下空荡荡的链接以及白色缩略图,很是恶心。

而我目前也被恶心到了。

哪怕使用

window.location.href.split(‘&’)[0]
           

企图强行次次是第一次进入一般,还是没效果。

但既然这个问题早早被人发现,我相信我也能解决。

再次留个学习记录。

继续阅读