关于微信自定义分享功能

近年来,随着微信的崛起,我们难免会做一些微信自定义分享功能,然后让用户分享给朋友或者分享到朋友圈

话不多说,直接上代码,接图:


图一(①)

图二(②)


结果分享出来的就是图一的样子

现在我们想让①的链接和标题、图标都是②的样子,那么需要在h5分享页面做些设置

(微信公众平台的设置可以参考微信公众平台文档 )

首先在页面中引入:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

1:HTML页面如下:

    //分享链接
    var currentHref = window.location.href;
    //标题
    var title = '标题';
    //内容、描述
    var discuss = '内容';
    // 图片路径
    var shareImgUrl = "http://xxx.com/images/1.png"; //要显示的图标在服务器的地址
    //生成签名的时间戳
    var timestamp;
    //生成签名的随机串
    var noncestr;
    //签名
    var signature;

//获取签名
                $.ajax({
                    type: "GET",
                    url: "/wshare/getSignature",
                    data: {
                        "href": currentHref
                    },
                    success: function (data) {
                        var temp = JSON.parse(data);
                        timestamp = temp.timestamp;
                        noncestr = temp.noncestr;
                        signature = temp.signature.toLowerCase();
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                            appId: 'AppID', // 和获取Ticke的必须一样------必填,公众号的唯一标识
                            timestamp:timestamp, // 必填,生成签名的时间戳
                            nonceStr: noncestr, // 必填,生成签名的随机串
                            signature: signature,// 必填,签名,见附录1
                            jsApiList: [
                                'onMenuShareAppMessage','onMenuShareTimeline','onMenuShareTimeline','onMenuShareQQ','onMenuShareQZone'
                            ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                        });
                        wx.ready(function () {
                            //config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
                            //config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关
                            //接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

                            //----------“分享给朋友”
                            wx.onMenuShareAppMessage({
                                title: title, // 分享标题
                                desc: discuss, // 分享描述
                                link: currentHref,
                                imgUrl: shareImgUrl, // 分享图标
                                success: function () {
                                },
                                cancel: function () {
                                }
                            });
                            //------------"分享到朋友圈"
                            wx.onMenuShareTimeline({
                                title: title, // 分享标题
                                desc: discuss, // 分享描述
                                link: currentHref, // 分享链接
                                imgUrl: shareImgUrl, // 分享图标
                                type: '', // 分享类型,music、video或link,不填默认为link
                                dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                                success: function () {
                                    // 用户确认分享后执行的回调函数、
                                },
                                cancel: function () {
          
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值