怎样定义手机端的微信和QQ浏览器分享出去的图片和文案?

发布于 2022-09-04 05:21:13 字数 168 浏览 18 评论 0

如题,需求就是用户手动使用浏览器自带分享时的文案和图片能自定义。微信能用自家jdk解决,却没找到QQ浏览器怎样弄。不过看到一些直接调用浏览器自带分享功能的例子,如:share.js,可惜并不是我需要的效果。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

无可置疑 2022-09-11 05:21:13

腾讯移动web开发平台提供较全面的解决方案,看这里

在你的项目加上

http://qzonestyle.gtimg.cn/qz...

在页面加上分享设置代码。

/**
 * 定制接口
 * @param opts 定制内容
 */
setShareInfo({
    title:          '父爱,在你看不到的地方', // 分享标题
    summary:        '父爱如山,感觉不到只因身在此山中', // 分享内容
    pic:            'http://qzonestyle.gtimg.cn/aoi/sola/20150617094556_OvfOpoRKRB.png', // 分享图片
    url:            'http://qzs.qzone.qq.com/qzone/qzact/act/2015/father-day-m/index.html', // 分享链接
});

需要在微信浏览器使用还需加上WXconfig微信权限验证配置信息,具体例子如:

//传递的url必须是调用JS接口页面的完整URL
fetch('http://你的服务器/wx/api?url=' + window.location.href.split("#")[0])
    .then(res => res.json)
    .then(json => {
        setShareInfo({
            title:          '父爱,在你看不到的地方', // 分享标题
            summary:        '父爱如山,感觉不到只因身在此山中', // 分享内容
            pic:            'http://qzonestyle.gtimg.cn/aoi/sola/20150617094556_OvfOpoRKRB.png', // 分享图片
            url:            'http://qzs.qzone.qq.com/qzone/qzact/act/2015/father-day-m/index.html', // 分享链接
            // 微信权限验证配置信息,若不在微信传播,可忽略
            WXconfig: {
                swapTitleInWX: true, // 是否标题内容互换(仅朋友圈,因朋友圈内只显示标题)
                appId: json.appId, // 公众号的唯一标识
                timestamp: json.timestamp, // 生成签名的时间戳
                nonceStr: json.nonceStr, // 生成签名的随机串
                signature: json.signature // 签名
            }
        });
    })

签名算法及细节参考这里

说两件需要注意的事:

  1. QQ浏览器的分享会抓取一遍你的网站,所以测试的环境必须能外部访问

  2. 微信浏览器的分享 签名算法 需要的是当前页面url,不是分享地址的url

  3. 微信浏览器的分享 分享地址必须和公众号设置的JS接口安全域名一致,加端口都不算一致,OK?

梦萦几度 2022-09-11 05:21:13

童笃
19 人赞同
按我说的做,就可以设置了:

标题:会取当前页面title里面的内容。
图片:会取当前页面body内最前面的一张符合条件的图片。
图片规格有要求:
尺寸必须大于: 300px × 300px
把符合以上两个条件的图片放到<img>里,放到页面<body>内的最前面。

这样分享时就会取这张图作为缩略图了。

你试试,上次组长发我的链接,知乎

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文