H5分享带缩略图,描述,微信内分享到好友,朋友圈等

准备工作
需要一个认证的微信公众号,一定要确定认证
在登录微信公众平台https://mp.weixin.qq.com
在公众号设置–>功能设置,填写设置Js接口安全域名 
Js安全域名是需要把微信提供的文件,放在指定域名或者目录下面可以访问的。
配置信息
下载微信参考代码,主要是获取signature 
http://demo.open.weixin.qq.com/jssdk/sample.zip在获取signature之前,需要获取accessToken 和 对应的Ticket,这两个方式都比较简单,不在列举
生成签名的方式,就在微信的实例代码里面,不在赘述。
注意
获取签名等信息,必须通过服务器返回,不能再前端js生成
对应生成的ticket,accessToken,注意要缓存,也有有效期,如果不缓存,访问量大的情况下,微信有可能封号。
生成signature所需要的url必须是前端传入的模式,不能写死,写死的话,微信似乎有检测机制,不能正常的分享成功。
前端配置信息
引入微信分享的JS_SDK<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> https://res.wx.qq.com/open/js/jweixin-1.2.0.js 
注意,如果自己的域名模式是https模式,要使用https模式,不然会出现mixed content block,微信js不会执行
JS-sdk中的方法要在获取signature之后再执行,不然有可能会执行错误等,同时分享的调用要在wx.ready方法体里面执行,即微信配置都okay的情况下在执行。
示例代码
 

$.get("获取微信signature的接口", 
        {"url":location.href.split('#').toString()}).done(function (data) {
        // 注意这里的url,一定要这样写,也就是动态获取,不然也不会成功的。
            console.log(data);
            if (data.header.code == 200) {
                var wx_info = data.body.result.wx_info;
                if (wx_info.signature != null) {
                    // 配置
                    wx.config({
                        debug: false,   // 测试阶段,可以写为true,主要是为了测试是否配置成功
                        appId: wx_info.appId,
                        timestamp: wx_info.timestamp,
                        nonceStr: wx_info.nonceStr,
                        signature: wx_info.signature,
                        jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 
                            'onMenuShareQZone']
                    });

                    var title = "";
                    var desc = "";
                    // 分享的图片,最好是正方形,不是也没关系,但是一定是http模式,即绝对路径,而不是服务器路劲
                    var imgUrl = "";
                    // 这里的地址可以写死,也可以动态获取,但是一定不能带有微信分享后的参数,不然分享也是失败的
                    var link = "";


                    // 分享给朋友、QQ、微博
                    var shareData = {
                        "imgUrl": imgUrl,
                        "title": title,
                        "desc": desc,
                        'link': link
                    };
                    // 分享到朋友圈
                    var shareToTimeline = {
                        "imgUrl": imgUrl,
                        "title": title, 
                        'link': link,
                        "desc": desc
                    }
                    wx.ready(function() {
                        wx.onMenuShareTimeline(shareToTimeline);
                        wx.onMenuShareAppMessage(shareData);
                        wx.onMenuShareQQ(shareData);
                        wx.onMenuShareQZone(shareData);

                        wx.error(function(res) {
                            alert(res.errMsg);
                        });
                    });
                }
            }
}).fail(function (msg) {
        console.log("error:" + msg);
});

 

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值