zoukankan      html  css  js  c++  java
  • H5微信自定义分享链接(设置标题+简介+图片)

    起源:最近公司在做招募广告的html5页面,然后做出来后,产品提出一个问题,需要分享出去的链接是卡片形式,内容也要自己定义,这下就难到我了,因为是第一次遇到这种需求,果断百度,然而,我就像大家一样,看都看不懂,一大堆什么微信jssdk官方文档,看得我眼花缭乱,博客上面的也大多都是php形式的解释,也不知道怎么导入进来,然而接着去了解这个卡片分享,发现官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。所以我解决了这个问题之后,就来写这个博客,希望能帮助一些初步了解这个微信自定义分享链接的园友。

    产品需要做的:

    1.微信认证过的公众号:必须是经过认证的,没有认证的或者认证过期的都不可以;

    2.经过备案的域名:必须是备案过的,不然是无法使用的;

    3.绑定域名:首先你需要将需要分享的网址的域名绑定到微信公众平台上面,具体操作:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”;

    博主这次开发中,就遇到了第三点问题,我代码都写好了,后台也做好了,但是就是分享出去不是卡片形式

    遇到 config:invalid url domain

    后来发现是产品忘记绑定域名,设置白名单了。。。(域名不要加http://)

    好,后来这个问题解决了,但是还是分享不成功,又进行一次排查,因为要在手机端上线才能看到效果,就一直上线一直改,改到下午5点,后来发现是产品appid给错了,我TM......

    后台需要做的:

    1.后台服务器:前台页面需要后台服务器传过来一些配置参数,比如appId、timestamp、nonceStr、signature这几个参数都是后台从微信公众平台获取到的, 需要后台进行配合;

    2.获取access_token:利用公共号APPID、APPSECRET从微信服务器获取对应的access_token,这里是后台开发小伙伴的范围不多做解释;

    后台需要传的参数格式:

    前端你需要做的:

    1.引入js文件 :在分享的页面需要引入一个微信官方的js文件;

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

    2.通过ajax获取参数 :通过后台给你的接口,取到那些必要的参数,然后你需要把当前分享的页面的url传到后台去,必须动态的获取当前页面,而且一定要对url进行编码,要不然会不起作用;

    3.因为重复上线你手机需要清理缓存,这又是一个麻烦事,手机打开:

    debugx5.qq.com

    然后滑到底部,有四个清理缓存的选择框,选择清理就好,不会影响别的地方的缓存,无需担心;

    好,到这里就贴代码了,代码里面都特意详细的进行了注释:

    $(function() {
        //对url进行编码
        var localUrl = encodeURIComponent(location.href.split('#')[0]);
        //url传到后台格式
        var Url = "URL=" +localUrl;
        //这几个参数都是后台从微信公众平台获取到的
        var nonceStr, signature, timestamp, appId, shareUrl;
        $.ajax({
            //后台获取参数接口
            url: "https://www.xxxxxxx.cn/user/xxxxxxxx/",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Token", getCookie("token"));
            },
            type: 'get',
            data: Url,
            success: function(data) {
                //得到参数
                var appId = JSON.parse(data).appId;
                var nonceStr = JSON.parse(data).nonceStr;
                var signature = JSON.parse(data).signature;
                var timestamp = JSON.parse(data).timestamp;
                var shareUrl = JSON.parse(data).url;
                //通过微信config接口注入配置
                wx.config({
                    debug: false, // 默认为false  为true的时候是调试模式,会打印出日志
                    appId: appId,
                    timestamp: timestamp,
                    nonceStr: nonceStr,
                    signature: signature,
                    jsApiList: [
                        'checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo'
                    ]
                });
                //配置自定义分享内容
                window.share_config = {
                    'share': {
                        'imgUrl': 'https://www.xxxxxx.cn/cecerecruit/img/%E6%B5%8B%E6%B5%8B%E6%8B%9B%E5%8B%9F.png', // 这里是需要展示的图标
                        'desc': '120秒,48项天赋解析,90分钟专家咨询解读,深度剖析您的天赋人生。成为测测科技合伙人,尊享至多11项专属超值礼遇。', // 这是分享展示的摘要
                        'title': '90%的人都认可测测科技天赋智能测评|合伙人现正招募中', // 这是分享展示卡片的标题
                        'link': shareUrl, // 这里是分享的网址
                        'success': function(rr) {
                            //console.log('成功' + JSON.stringify(rr))
                        },
                        'cancel': function(tt) {
                            //console.log('失败' + JSON.stringify(tt));
                        }
                    }
                };
                wx.ready(function() {
                    wx.onMenuShareAppMessage(share_config.share); // 微信好友
                    wx.onMenuShareTimeline(share_config.share); // 微信朋友圈
                    wx.onMenuShareQQ(share_config.share); // QQ
                });
    
            },
            error: function(err) {
                
            },
        });
    
    })

    提醒:手机端还在测试阶段,建议把debug改成true;然后博主做到这里,打包发给后台上线,然后惊喜的跳出config:OK;哇,那个惊喜若狂,然后果断分享一下去测试,然后如图:

    大功告成。

    总结:以后做这种事一定要耐心,发现问题要一步步去测试,只不过希望不要出现appid给错这种粗心大意的事了,最后,有问题留言,共同加油,共同进步。

  • 相关阅读:
    wget(转)
    852. Peak Index in a Mountain Array
    617. Merge Two Binary Trees
    814. Binary Tree Pruning
    657. Judge Route Circle
    861. Score After Flipping Matrix
    832. Flipping an Image
    461. Hamming Distance
    654. Maximum Binary Tree
    804. Unique Morse Code Words
  • 原文地址:https://www.cnblogs.com/hejun26/p/9894742.html
Copyright © 2011-2022 走看看