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/