微信分享自定义图片和摘要

参考:

微信分享实现

微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了，不过自从微信更新了官方api后，对整个微信内的页面管控都严格了不少。而官方的分享卡片，是众多在微信生态中传播的html5静态页面的一个重点。不过很多人会发现分享的图片和摘要达不到预期。这篇文章就讲下这个，供初次接触微信开发的前端参考。（其实官方的文档也蛮详细的了，不过有些地方官方没忽略了，容易给新人造成坑）

必要的前提准备

PS：本文的方法只适合6.0.2.58以及更高版本的微信客户端。旧版参考这个非官方的API
这几个是超越代码之上的存在，没有这几个认证，即使配置全正确也不能获得正常的分享卡片：

  1. 微信认证过的公共号

    必须是认证过的，未认证或者认证过期都不行

  2. 一个域名

    需要备案过的

  3. 一台服务器

    因为前端页面需要的appId、signature是需要后台传递过来的。官方默认后台程序有PHP、Python、Node、Java版本，不过我这里以PHP作为演示（后台其实不在本文的解释范围内，超纲了╮(╯▽╰)╭）

配置过程

1. 绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”（就是发布用的那个域名）

2. 获取access_token

这部分工作属于后台开发，主要功能是利用公共号APPID、APPSECRET从微信服务器获取对应的access_token。由于这部分代码官方有demo，所以直接用官方的sample例子做演示。
下载官方示例代码后，根据自己的情况选择对应的后台语言(这里以PHP为例)。

  1. 将下载得到的压缩包解压后复制php文件夹到网站根目录，然后将需要分享出去的html文件的后缀名改为.php（必须。因为后台不完善所以不能直接ajax获得access_token的值，这里假设需要分享的html页面是index.php）
  2. 打开index.php，在html的DOCTYPE声明之前添加一段PHP代码：
    <?phprequire_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>
  1. 通过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，完整列表见官网说明

  2. 配置分享信息并通过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的图片做分享图，而摘要则是替换成页面链接——这种情况从用户的角度看来并不友好。所幸对于配置失败的页面，微信也给了调试接口，官方也有部分说明。

    1. 打开wx.config里的debug
      将debug设置为true之后，手机进入页面，会弹出错误信息(PC不管有没有配置正确都会在开发者工具中打印出对应的分享信息，参考意义不是很大——不过可以拿来查看链接是否有误)。
      如果正确的话，会提示{"errMsg"："config:ok"}。

    2. 提示{"errMsg"："config:invalid url domain"}

      这个最常见，主要是域名没有被添加为js接口安全域名。官方的说明里是要域名和使用的APPID对应的公共号绑定，不过我实际使用中发现应该也可以分离。另外如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名)

    3. 提示{"errMsg"："config:invalid signature"}

      造成这个情况的可能性比较多。不过主要有以下三个原因：

      1. APPID和APPSECRET填错了。
        可以到官方的调试页面获取access_token看看是否是正确的
      2. 超过了每日的access_token获取上限
        官方限定每日2k次请求。所以如果没有缓存access_token的话，还是比较容易过限的。
      3. 微信公共号状态不正常。
        比如验证过期了，被封禁了等等。

    4. 常用的接口调试链接以及说明文档：

      获取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

      根据返回的结果可以判断页面内的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

时间： 2024-10-15 14:59:14

微信分享自定义图片和摘要的相关文章

微信分享自定义标题和图片的js

<script> document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { window.shareData = { "timeLineLink": "http://nianshao.uuzee.com/", "sendFriendLink": "http://nianshao.uuzee.com/", "wei

微信分享自定义图片标题摘要

我们平时在使用微信内置浏览器打开网页想要分享给好友或者发到朋友圈的时候经常会遇到这样的问题, 别人的网页分享的时候是这样的: 而我们自己的网页分享后这这样的: 看到有人说不做任何设置,微信分享时会自动抓取网页中的Title作为标题,IP地址作为概述,网页的第一个大小小于300*300的图片会作为分享中的图片,但是除了标题和概述可以,图片怎么设置分享后图片都是上图灰色的曲别针图案,所以今天来说一下如果自定义图片,标题和概述. 要实现上述功能需要使用微信官方的SDK,具体步骤如下: 第一步:微信公众

微信分享自定义图片标题摘要-微信官方API

我们平时在使用微信内置浏览器打开网页想要分享给好友或者发到朋友圈的时候经常会遇到这样的问题, 别人的网页分享的时候是这样的: 而我们自己的网页分享后这这样的: 看到有人说不做任何设置,微信分享时会自动抓取网页中的Title作为标题,IP地址作为概述,网页的第一个大小小于300*300的图片会作为分享中的图片,但是除了标题和概述可以,图片怎么设置分享后图片都是上图灰色的曲别针图案,所以今天来说一下如果自定义图片,标题和概述. 要实现上述功能需要使用微信官方的SDK,具体步骤如下: 第一步:微信公众

微信分享 带图片的的链接

1:首先要引用 微信内置的脚本: <script type="text/javascript" src="/Content/script/WeixinApi.js"></script> 2:要在微信里面打开才有作用,因为引用的是微信内置的脚本 ,在浏览器中打开没有效果的 3:code: // 需要分享的内容,请放到ready里 WeixinApi.ready(function (Api) { // 微信分享的数据 var wxData = {

PHP+微信分享自定义小图标

微信分享以后的小图标如下图: <script>document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {window.shareData = { "imgUrl": "<?php if(stripos('y'.$detail['start_picurl'], 'http://')!=1){echo $Think.config.HTTP_STCDOMIN;}echo $

微信分享自定义设置Title与Desc

前端Js引用: 1 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 2 <script> 3 function wxconfig(data) { 4 wx.config({ 5 // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印. 6 debug: fals

【咸鱼教程】实战微信分享、图片、录音等接口使用

教程目录一 微信测试号申请二 微信php后台搭建三 微信测试号设置四 微信客户端接口使用五 Egret微信第三方库使用六 源码下载 一 微信测试号申请个人开发者没有号,所以只能用测试号来实现,不过不用担心,客户端的代码使用起来和真实的公众号是一样的. 首先到微信公众平台开发者文档去申请测试号:http://mp.weixin.qq.com/wiki/home/index.html 点击登录 用你的微信扫一扫 好了,我们已经有了测试号了 二 微信php后台搭建 微信官方提供了一个demo,我们可以

微信内部网页的分享自定义实现

前言 鉴于上个月连续做了几个银行的活动宣传页面,涉及到了分享的图标与标题显示问题. 在目前微信版本为6.0的情况下,分享微信内部的文章有两种结果链接情况: 1.通过微信自身的单多图文发送的文章:链接会通过微信内部发布和出来,此时的分享链接为单多图文的默认图片:                    可以看到第二张分享给朋友分别用了图文信息的:图标,标题,以及摘要:而分享到朋友圈只有图标跟正文标题:下面看一下直接通过微信内部链接跳转的网页分享 是什么情况:           可以看到留下的仅仅是

IOS ShareSDK实现分享——微信分享

最近领导让添加ios 微信分享视频的功能,之前做的只有微信分享本地图片的功能. 查看官网并没有找到答案,后来在其官网论坛中http://bbs.mob.com/thread-20938-1-1.html 这里面发现新版的sdk(v3.2.1)中才添加的微信分享本地文件(mp3.mp4.docx.pdf等)的功能.可以支持就好办了.. 使用集成好的第三方框架可以节省许多代码量. 注意:申请shareSdk的apply,还有各个平台的appkey和appsecert(这真是非常麻烦的事情啊) 集成S