H5 在微信上分享如何自定义标题+内容+图片

1、在微信上分享的时候发现只有头部标题显示,没有内容和图片,那么如何自定义内容和图片呢? 首先第一步在 index.html先引入微信JS sdk

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

2、加上一下js代码,就可以达到自定分享效果了

复制代码
$(function() {
     //创建分享
        function funcShare() {
            $.ajax({
                async: false,
                url: "../ShareHandler.ashx",
                data: {
                    dataurl: location.href.split("#")[0]
                },
                success: function(res) {
                    var json = eval("(" + res + ")");
                    console.log(json);
                    var jsApiList = ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ",
                        "onMenuShareWeibo", "onMenuShareQZone"
                    ];
                    wx.config({
                        debug: false,
                        appId: json.wxappid,
                        timestamp: json.timestamp,
                        nonceStr: json.noncestr,
                        signature: json.strSige,
                        jsApiList: jsApiList
                    });
                }
            });
        }


        //签名完成
        wx.ready(function() {

            // console.log("验证完成!!!");
            
            //分享的头部标题
            var title = "标题";
            //分享的内容
            var desc = "内容";
            var link = location.href.split("#")[0];
            //分享要显示的右下角小图片(服务器图片路径)
            var imgUrl = "http://www.baidu.com/..../logo.png";

            //朋友圈
            wx.onMenuShareTimeline({
                title: title,
                link: link,
                imgUrl: imgUrl
            });

            //朋友
            wx.onMenuShareAppMessage({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            });

            //QQ
            wx.onMenuShareQQ({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            });

            //微博
            wx.onMenuShareWeibo({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            });

            //QQ空间
            wx.onMenuShareQZone({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            });

        });

        funcShare();


    })
复制代码

 

posted @   凌晨的粥  阅读(883)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示