原创 JSSDK微信自定义分享[修正SPA 分享的bug]

分类:JavaScript 浏览:353次
JSSDK微信自定义分享[修正SPA 分享的bug]

使用微信JSSDKAPI

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如果你使用了支付类接口,请确保支付目录在该安全域名下,否则将无法完成支付。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

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

案例

function WeChat(url, title, img, desc) {
    $.ajax({
        url: './getconfig.php',
        type: 'POST',
        dataType: 'json',
        data: {url: window.location.href}
    }).done(function(data) {
        wx.config(data);
        wx.ready(function() {
            // 在这里调用 API
            wx.onMenuShareTimeline({ //例如分享到朋友圈的API
                title: title, // 分享标题
                link: url, // 分享链接
                imgUrl: img, // 分享图标
                success: function() {},
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: url, // 分享链接
                imgUrl: img, // 分享图标
                type: '', // 分享类型,music、video或link,不填默认为link
                dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                success: function() {},
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.error(function(res) {
                alert(res.errMsg); //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
            });
        });
    }).fail(function() {
        console.log("error");
    }).always(function() {
        console.log("complete");
    });
}

//需要调用时执行这个方法。
var url = 'http://www.baidu.com'; //用户要分享的网址
var title = '神奇的百度'; //分享的标题
var shareimg = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png'; //分享的图片
var desc = '神奇的百度'; //分享的描述信息
// 当需要动态加载的时候,就调用一下。
WeChat(url, title, shareimg, desc);

修正SPA 分享的bug

文档说所有需要使用JS-SDK 的页面必须先注入配置信息,并不是。部分微信接口需要先验证才能使用,如分享接口等,但是有些不用,如隐藏菜单接口等。

同一个页面,只需要验证一次,SPA页面也不用(文档说需要,其实不用),只要页面不刷新,就不需要再次验证。

文档说Android微信客户端6.2版本之前不支持pushState特性,其实webView支持,只是微信认定不安全,所以功能都没有了,如果遇到右上角菜单只有收藏的情况就是这个原因,貌似没有解决办法,刷新页面吧……

Android微信客户端6.2之后,对pushState提供了支持,验证后使用pushState更换url不需要再次验证,但是使用history.back()之后,验证会失效,需要再次验证……

微信对于replaceState的支持是有问题,replaceState之后的url计算的签名是无效的,请使用原始url……

解决方案:
每次url更改的时候,重新调用JSSDK的config接口

使用vue开发微信公众号下SPA站点的填坑之旅

作者: JaneCC最后编辑于:2017-08-03 14:47
坚持把简单的事情做好就是不简单,坚持把平凡的事情做好就是不平凡。所谓成功,就是在平凡中做出不平凡的坚持。

--JaneCC

暂时木有评论啊,等您坐沙发呢!

发表感言