美文网首页第三方-微信
微信内置网页自定义分享

微信内置网页自定义分享

作者: 汀上 | 来源:发表于2019-07-18 09:27 被阅读0次

1.在网页中引入微信的sdk

<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8"></script>

2.这里需要后台提供一个接口,来获取设置的一系列值

后台计算方法:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
(签名算法见文末的[附录1],所有JS接口列表见文末的[附录2])

//otitle:转发标题
//desc:转发介绍
//olink:转发链接
//oimgUrl: 转发图片
function wxSdk(otitle, desc, olink, oimgUrl) {
    $.ajax({
        type: "GET",
        url: requsetUrl + "?url=" + encodeURIComponent(location.href.split('#')[0]),//encodeURIComponent(location.href.split('#')[0])这个要加,截掉转码后的参数,不截会报错
        data: {},
        success: function(res) {
          //这里的debug=true时,可以在页面进行调试
          wx.config({
                debug: false,
                appId: res.appId,
                timestamp: res.timestamp,
                nonceStr: res.nonceStr,
                signature: res.signature,
                jsApiList: [
                     'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'updateAppMessageShareData', 'updateTimelineShareData','chooseWXPay'
                ]
            }); 
           //请注意,原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃。转移至 wx.updateAppMessageShareData、updateTimelineShareData 接口。但是有些手机上新接口不生效,保险起见全都加上比较合适(也可以不加)
            wx.ready(function(res) {
                wx.onMenuShareTimeline({
                    title: otitle, //标题
                    desc: desc,//形容
                    link: olink,//跳转页面
                    imgUrl: oimgUrl,//图片
                    success: function() {
                    }
                });
                wx.onMenuShareAppMessage({
                    title: otitle,
                    desc: desc,
                    link: olink,
                    imgUrl: oimgUrl,
                    success: function() {}
                });
                wx.onMenuShareQQ({
                    title: otitle,
                    desc: desc,
                    link: olink,
                    imgUrl: oimgUrl,
                    success: function() {}
                });
                wx.onMenuShareWeibo({
                    title: otitle,
                    desc: desc,
                    link: olink,
                    imgUrl: oimgUrl,
                    success: function() {}
                });
                wx.onMenuShareQZone({
                    title: otitle,
                    desc: desc,
                    link: olink,
                    imgUrl: oimgUrl,
                    success: function() {}
                });
                wx.updateAppMessageShareData({
                    title: otitle,
                    desc: desc,
                    link: olink,
                    imgUrl: oimgUrl,
                    success: function() {}
                });
                wx.updateTimelineShareData({
                    title: otitle,
                    link: olink,
                    imgUrl: oimgUrl,
                    success: function() {}
                });
               //附带接入支付
                wx.checkJsApi({
                    jsApiList: ['chooseWXPay','onMenuShareTimeline'],
                    success: res => {},
                    fail: err => {
                        alert('check api fail:', err)
                    }
                })
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            // alert("neizhi---->error--");
        }
    });
}

3.微信公众平台接口调试工具(用来判断后台签名算法是否出错)
https://mp.weixin.qq.com/debug/

相关文章

网友评论

    本文标题:微信内置网页自定义分享

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