参考: 

 

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

必要的前提准备

PS：本文的方法只适合6.0.2.58以及更高版本的微信客户端。旧版参考这个

这几个是超越代码之上的存在，没有这几个认证，即使配置全正确也不能获得正常的分享卡片：

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代码：

             GetSignPackage(); ?>

这里的后台代码都是直接拿的官方，小站点可以直接利用，但是大站点请勿直接使用，因为官方的后台代码没有缓存access_token，很容易触发每日的2k次API调用上限，一旦到了上限，当天就无法继续认证。所以建议有能力的不要直接用官方的示例代码。AppID和AppSecret可在微信公众平台官网-开发者中心页中获得（需要已经成为开发者，且帐号没有异常状态）

3. 前端配置验证权限

这里是前端的工作，主要是利用前一步得到的access_token来获取签名等认证信息，只有正确的配置才可以正常获取到使用官方js-sdk的权限。

1.引入JS文件

在index.php文件里添加一个script标签，引用官方js：

 

1. 通过config接口注入权限验证配置

   上面的属性都是必须的，不过都不需要自行填写。这里只使用了几个分享相关的jsApiList，完整列表见

2. 配置分享信息并通过ready接口处理

   share_config里的四个属性在分享卡片里代表的含义如下图所示：

   img:

到这里配置完成。正常情况下的话分享出去是会有摘要和分享图的。

分享信息配置失败的调试方法

有时候设置好之后发现分享出去只有标题和一张和设置不一样的图片，摘要变成了页面链接。这就说明配置失败了。对于没有正确配置的页面，微信默认抓取网页标题和页面内第一张分辨率大于300*300的图片做分享图，而摘要则是替换成页面链接——这种情况从用户的角度看来并不友好。所幸对于配置失败的页面，微信也给了调试接口，官方也有。

1. 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

      根据返回的结果可以判断页面内的APPID和APPSECRET有没有出错

      获取jsapi_ticket

      利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket，如果出错的话会返回对应的说明。

      全局返回码说明

      接口频率限制说明