问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
帕奇式
    92441019

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

    qq浏览器微信浏览器分享移动端web移动端浏览器
    阅读 14.4k
    2 个回答
    得票最新
    头像
    帕奇式
      92441019
      ✓ 已被采纳

      腾讯移动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？

      头像
      秋刀鱼Bin
        63311731

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

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

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

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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题