技术 思绪 摘录 旅行
自定义微信分享还是很有必要,可以让你的分享样式更符合业务需要。也能统计大概分享了多少次,这个分享成功回调的bug,不知道微信啥时候解决,只需要进入到好友列表页面,这次分享就算是成功的了,难道不是发出去才算成功吗,肯定是那个技术人员偷懒了。

首先前期准备,需要配置js安全域名,这个去微信管理后台配置即可。

开源是程序员的基本美德


首先页面必须要引入微信的js,1.4是2019新版的

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

js封装方法如下:


function WxShare(title, desc, imgUrl, succeseCallback) {
    var encodeUrl = location.href.split("#")[0];
    if (title === "" || title == null) {
        title = document.title;
    }
    if (desc === "" || desc == null) {
        desc = "博客|个人blog|CarsonYang|音乐博客|视频博客|技术分享|软件工程师|全栈工程师|CarsonYangBlog";
    }
    if (imgUrl === "" || imgUrl == null) {
        imgUrl = "https://www.yangshaofeng.com/content/views/i/logo.png";
    }
    $.post("/WeiXin/WxShare", {
        url: encodeUrl    }, function (data) {
        wx.config({
            debug: false,
            appId: data.AppId,
            timestamp: data.Timestamp,
            nonceStr: data.NonceStr,
            signature: data.Signature,
            jsApiList: ["updateTimelineShareData","updateAppMessageShareData"]
        });
        wx.ready(function () {
            wx.updateTimelineShareData({
                title: title, // 分享标题
                link: location.href.split("#")[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    if (succeseCallback) {
                        succeseCallback();
                    }
                }
            });
            wx.updateAppMessageShareData({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: location.href.split("#")[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    if (succeseCallback) {
                        succeseCallback();
                    }
                }
            });
        });
    });}


调用方式:

<script>    
$(function () {    
    WxShare(标题, 描述, 图标地址, 回调函数);    
});    
</script>


效果如下:


image.png

CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

友情打赏

请打开您的微信,扫一扫