二次分享之相关设置

本篇想说的是针对从APP分享出的H5进行二次分享，有过操作的童鞋会发现二次分享的描述是个链接，图片有时候也没有，标题更是和自己想要的不一样，之前网上找过很多资料，发现都过时了，先说下微信，微信接口一直在更新。。。所以只能根据官网说明来配置分享接口参数，以下是操作流程：

1、需要有微信公众平台的账号（即微信号），根据提示完善信息后登录；

2、需要申请企业号，后续接口的功能对个人号有限制，比如对分享按钮，支付接口

3、点击左侧菜单栏——基本配置，右侧内容获取ID和密钥

4、点击左侧菜单栏——接口权限，根据右侧内容描述获取分享接口权限

 

 5、根据官网技术文档获取所需参数  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN

 注：

1、接口获取涉及到跨域，前端可通过jsonp等进行跨域处理，也可用node直接请求

2、返回数据有效时间是2小时，可通过Session存储时间判断何时需再次请求接口

再说下QQ：

 

1.QQ授权链接示例：https://graph.qq.com/oauth2.0...
注意：redirect_uri在拼接链接参数时需要把?、&改成转义字符

 

2.打开链接，重定向，示例链接改变为your_url?code=F7687B50B46F87207D4F4F21A021837F&state=test，与微信分享同理

 

3.QQ二次分享（两种方式）

方式一

引用 http://qzonestyle.gtimg.cn/qz...，调用setShareInfo

setShareInfo({
     title: shareTitle,
     summary: shareSummary,
     pic:  'pic_url',
     url: window.location.href + '&tencentShare=1'
});

　　

方式二

设置meta

<meta itemprop="name" content="分享标题"/>
<meta itemprop="image" content="http://img.xmiles.cn/fortune/icon.png" />
<meta name="description" itemprop="description" content="分享描述" />

遇到问题并解决如下：

问题一：由于手机QQ限制，分享URl与页面必须求同个域名，否则设置不生效
但这里二次分享的链接也需要授权，但由于域名不同，所以用了另一种方式解决：设置分享url为当前链接，带上自定义参数，根据参数值在页面加载时重新打开授权链接

问题二：qq这种jdk设置分享在安卓端定制生效，在ios定制无效，这里采用折中的方式使用<meta>定制。由于<meta>设置分享信息无法改变链接，qq默认拿原本链接进行分享，在code过期时，请求服务器会导致报错，因此这里采用 在页面请求失败时再去重新打开授权链接

QQ分享还跟版本相关，设置标题内容上面两种方式都可能不生效，由于没去追究哪个版本问题，因此暂时不处理这个问题

 

（有其他更好方式的童鞋欢迎分享~）