微信h5页自定义分享标题描述图标

本文介绍如何在微信中为H5页面设置自定义的分享标题、描述和图标,以提升用户体验和分享效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 微信分享
    $(function(){
        function initWxShare() {
            var ajaxurl = "";//公众号信息存储
            var link = location.href.split("#")[0];//获取url替换#后面的部分hash值
            var title = "这里是标题";//这里是标题
            var desc = "这里是描述";//这里是描述
            var imgUrl = "";//这里是图片
            $.ajax({
                url: ajaxurl,
                data: {
                    action: "initJSSDK",
                    pageUrl: link,
                },
                type: "GET",
                dataType: "jsonp",
                success: function (ress) {
                    console.log(ress);
                    wx.config({
                        
                        debug: false,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                        appId: ress.data.appid,// 必填,公众号的唯一标识
                        timestamp: ress.data.timestamp,// 必填,生成签名的时间戳
                        nonceStr: ress.data.noncestr,// 必填,生成签名的随机串
                        signature: ress.data.signature,// 必填,签名
                        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage","updateTimelineShareData", "updateAppMessageShareData",]// 必填,需要使用的JS接口列表
                    });
                    wx.ready(function () {
                        //   config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
                        //  所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
                        //分享到朋友圈
                        wx.onMenuShareTimeline({
                            title: title,// 分享标题
                            link: link,// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: imgUrl,// 分享图标
                            success: function () {
                                 // 设置成功
                            }
                        });
                        //分享给微信好友
                        wx.onMenuShareAppMessage({
                            title: title,
                            desc: desc, // 分享描述
                            link: link,
                            imgUrl: imgUrl,
                            type: "",// 分享类型,music、video或link,不填默认为link
                            dataUrl: "",// 如果type是music或video,则要提供数据链接,默认为空
                            success: function () {}
                        });
                        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
                        wx.updateTimelineShareData({
                            title: title,
                            link: link,
                            imgUrl: imgUrl,
                            success: function () {}
                        });
                        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
                        wx.updateAppMessageShareData({
                            title: title,
                            desc: desc,
                            link: link,
                            imgUrl: imgUrl,
                            success: function () {}
                        })
                    })
                },
                error: function (ress) {
                    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
                    console.log("通信失败");
                }
            })
        }
        initWxShare();
})       
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值