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

问题描述

问 题

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

解决方案

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

这篇关于移动端web - 怎样定义手机端的微信和QQ浏览器分享出去的图片和文案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！