微信自定义分享链接和图文
2016-10-15 14:22
253 查看
导语:使用微信自定义分享,可设置个性化的分享图片、标题、描述等,从而使分享的内容更生动有趣,以获得更好的传播效果。
以下来自:微信分享自定义图片和摘要
微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。不过很多人会发现分享的图片和摘要达不到预期。这篇文章就讲下这个,供初次接触微信开发的前端参考。(其实官方的文档也蛮详细的了,不过有些地方官方没忽略了,容易给新人造成坑)
PS:本文的方法只适合
这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的分享卡片:
微信认证过的公共号
必须是认证过的,未认证或者认证过期都不行
一个域名
需要备案过的
一台服务器
因为前端页面需要的
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名)
这部分工作属于后台开发,主要功能是利用公共号
下载官方示例代码后,根据自己的情况选择对应的后台语言(这里以
将下载得到的压缩包解压后复制
打开
这里的后台代码都是直接拿的官方,小站点可以直接利用,但是大站点请勿直接使用,因为官方的后台代码没有缓存
这里是前端的工作,主要是利用前一步得到的
1.引入JS文件
在
通过config接口注入权限验证配置
上面的属性都是必须的,不过都不需要自行填写。这里只使用了几个分享相关的
配置分享信息并通过ready接口处理
img:
到这里配置完成。正常情况下的话分享出去是会有摘要和分享图的。
有时候设置好之后发现分享出去只有标题和一张和设置不一样的图片,摘要变成了页面链接。这就说明配置失败了。对于没有正确配置的页面,微信默认抓取网页标题和页面内第一张分辨率大于
打开
将
如果正确的话,会提示
这个最常见,主要是域名没有被添加为
造成这个情况的可能性比较多。不过主要有以下三个原因:
可以到官方的调试页面获取access_token看看是否是正确的
超过了每日的access_token获取上限
官方限定每日2k次请求。所以如果没有缓存access_token的话,还是比较容易过限的。
微信公共号状态不正常。
比如验证过期了,被封禁了等等。
获取access_token
https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token
根据返回的结果可以判断页面内的
获取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket,如果出错的话会返回对应的说明。
全局返回码说明
http://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html
接口频率限制说明
http://mp.weixin.qq.com/wiki/0/2e2239fa5f49388d5b5136ecc8e0e440.html
以下来自:微信分享自定义图片和摘要
微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。不过很多人会发现分享的图片和摘要达不到预期。这篇文章就讲下这个,供初次接触微信开发的前端参考。(其实官方的文档也蛮详细的了,不过有些地方官方没忽略了,容易给新人造成坑)
必要的前提准备
PS:本文的方法只适合6.0.2.58以及更高版本的微信客户端。旧版参考这个非官方的API
这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的分享卡片:
微信认证过的公共号
必须是认证过的,未认证或者认证过期都不行
一个域名
需要备案过的
一台服务器
因为前端页面需要的
appId、
signature是需要后台传递过来的。官方默认后台程序有
PHP、
Python、
Node、
Java版本,不过我这里以
PHP作为演示(后台其实不在本文的解释范围内,超纲了╮(╯▽╰)╭)
配置过程
1. 绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名)
2. 获取access_token
这部分工作属于后台开发,主要功能是利用公共号APPID、
APPSECRET从微信服务器获取对应的
access_token。由于这部分代码官方有demo,所以直接用官方的sample例子做演示。
下载官方示例代码后,根据自己的情况选择对应的后台语言(这里以
PHP为例)。
将下载得到的压缩包解压后复制
php文件夹到网站根目录,然后将需要分享出去的html文件的后缀名改为
.php(必须。因为后台不完善所以不能直接ajax获得
access_token的值,这里假设需要分享的html页面是
index.php)
打开
index.php,在html的
DOCTYPE声明之前添加一段PHP代码:
<?php require_once "../php/jssdk.php";/* 这里的文件路径视`php`文件夹所在路径而定。不一定都要一样,个人建议扔到一个所有html文件夹都可以引用的目录*/ $jssdk = new JSSDK("你的APPID", "你的APPSECRET"); $signPackage = $jssdk->GetSignPackage(); ?>
这里的后台代码都是直接拿的官方,小站点可以直接利用,但是大站点请勿直接使用,因为官方的后台代码没有缓存
access_token,很容易触发每日的2k次API调用上限,一旦到了上限,当天就无法继续认证。所以建议有能力的不要直接用官方的示例代码。AppID和AppSecret可在微信公众平台官网-开发者中心页中获得(需要已经成为开发者,且帐号没有异常状态)
3. 前端配置验证权限
这里是前端的工作,主要是利用前一步得到的access_token来获取签名等认证信息,只有正确的配置才可以正常获取到使用官方js-sdk的权限。
1.引入JS文件
在
index.php文件里添加一个
script标签,引用官方js:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
通过config接口注入权限验证配置
<script> wx.config({ debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话,可以开了看对应报错信息 appId: '<?php echo $signPackage["appId"];?>', timestamp: '<?php echo $signPackage["timestamp"];?>', nonceStr: '<?php echo $signPackage["nonceStr"];?>', signature: '<?php echo $signPackage["signature"];?>', jsApiList: [//需要使用的JS接口列表,分享默认这几个,如果有其他的功能比如图片上传之类的,需要添加对应api进来 'checkJsApi', 'onMenuShareTimeline',// 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo' ] }); </script>
上面的属性都是必须的,不过都不需要自行填写。这里只使用了几个分享相关的
jsApiList,完整列表见官网说明
配置分享信息并通过ready接口处理
<script> window.share_config = { "share": { "imgUrl": "http://www.yourwebsite.com/share.png",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。 "desc" : "你对页面的描述",//摘要,如果分享到朋友圈的话,不显示摘要。 "title" : '分享卡片的标题',//分享卡片标题 "link": window.location.href,//分享出去后的链接,这里可以将链接设置为另一个页面。 "success":function(){//分享成功后的回调函数 }, 'cancel': function () { // 用户取消分享后执行的回调函数 } } }; wx.ready(function () { wx.onMenuShareAppMessage(share_config.share);//分享给好友 wx.onMenuShareTimeline(share_config.share);//分享到朋友圈 wx.onMenuShareQQ(share_config.share);//分享给手机QQ }); </script>
share_config里的四个属性在分享卡片里代表的含义如下图所示:
img:
到这里配置完成。正常情况下的话分享出去是会有摘要和分享图的。
分享信息配置失败的调试方法
有时候设置好之后发现分享出去只有标题和一张和设置不一样的图片,摘要变成了页面链接。这就说明配置失败了。对于没有正确配置的页面,微信默认抓取网页标题和页面内第一张分辨率大于300*300的图片做分享图,而摘要则是替换成页面链接——这种情况从用户的角度看来并不友好。所幸对于配置失败的页面,微信也给了调试接口,官方也有部分说明。
打开
wx.config里的
debug
将
debug设置为
true之后,手机进入页面,会弹出错误信息(PC不管有没有配置正确都会在开发者工具中打印出对应的分享信息,参考意义不是很大——不过可以拿来查看链接是否有误)。
如果正确的话,会提示
{"errMsg":"config:ok"}。
提示{"errMsg":"config:invalid
url domain"}
这个最常见,主要是域名没有被添加为js接口安全域名。官方的说明里是要域名和使用的
APPID对应的公共号绑定,不过我实际使用中发现应该也可以分离。另外如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名)
提示{"errMsg":"config:invalid
signature"}
造成这个情况的可能性比较多。不过主要有以下三个原因:APPID和
APPSECRET填错了。
可以到官方的调试页面获取access_token看看是否是正确的
超过了每日的access_token获取上限
官方限定每日2k次请求。所以如果没有缓存access_token的话,还是比较容易过限的。
微信公共号状态不正常。
比如验证过期了,被封禁了等等。
常用的接口调试链接以及说明文档:
获取access_tokenhttps://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token
根据返回的结果可以判断页面内的
APPID和
APPSECRET有没有出错
获取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket,如果出错的话会返回对应的说明。
全局返回码说明
http://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html
接口频率限制说明
http://mp.weixin.qq.com/wiki/0/2e2239fa5f49388d5b5136ecc8e0e440.html
相关文章推荐
- 微信自定义分享链接和图文
- tp3.2结合mysql实现微信自定义分享链接和图文
- 微信自定义分享的标题,链接,封面
- 微信分享朋友圈分享代码自定义标题、说明、图标和分享链接
- 如何在不接入微信API的情况下自定义分享内容(图片、链接、标题)
- 微信自定义分享链接(设置标题+简介+图片)
- 微信分享到朋友圈自定义图文
- 微信页面 config注入获取权限 自定义微信分享的图片链接及标题
- c#微信分享自定义标题、说明、图标和分享链接
- H5页面从QQ分享到微信展示自定义图文
- 微信自定义分享链接
- 关于微信自定义分享的链接、标题、描述、图片都未生效问题详解
- [置顶] 微信分享朋友圈自定义标题链接
- 和小猪一起搞微信开发——自定义分享到朋友圈的缩略图,链接,标题和摘要
- 微信JS-SDK自定义分享链接
- 自定义微信易信平台分享内容
- 微信分享自定义标题和图片的js
- Android第三方应用分享图文到微信朋友圈 & 微信回调通报分享状态
- 一键分享图文到多个社交平台(微信,微博,qzone)