H5调用微信JSSDK开发总结

最近需要开发一个小项目，他的一个需求为：能够在微信中分享（转发好友以及朋友圈），而且要求图片和标题摘要等内容自定义。本着试一试的态度，我用手机访问自己搭建在服务器上的IP地址，打开后映入眼帘的是这样的（这是由于我没有设置JS安全域名造成的）：

分享给好友是这样的：

鞥？？？这也太难看了吧，我的摘要呢？我的小图片呢？

于是我去问度娘，听他们都在说一个叫做JSSDK的东西，在微信中要分享链接是需要微信公众号的权限的，而且只有认证过的公众号和订阅号才有分享的权限：接口权限说明

 

接下来看文档：去查看微信公众号开发文档：

选择左边的”微信网页开发“ -> ”JS-SDK开发“：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

发现这个东西是真的挺绕的，想要实现这个一个小功能是真的复杂，下面将过程总结如下： 

1 公众号设置

想要擀成这么一件事情，首先你得有一个微信公众号（由于需要实现分享功能，我使用的公众号必须是认证过的公众号），然后进入微信公众平台：进入”开发“->”基本配置“得到开发者ID，开发者密码，并且设置IP白名单（就是你服务器的IP地址）。

然后进入到”设置" -> “公众号设置” -> “功能设置"设置JS接口安全域名：就是解析到你的服务器IP的那个域名。

2 利用开发者ID和开发者密码进行后面的事情

这一块的详细逻辑可以看官方文档，我已经把整个的逻辑理了一下，如下图所示：

其中深绿色的数据就是在通过config接口主入权限验证所需要的配置信息，接口如下图所示。需要说明的一点是，上图中的所有内容应该是在你的服务器中完成的，最终服务器只给你返回一个类似json格式的数据，数据项就是深绿色的字段，然后在前端的js代码中读取即可。

以上只讲了一些理论，但是理清思路之后会容易很多。

 

3 一些其他事情 

在开发这个小项目的过程中我遇到了无数的坑，接下来推荐几个小工具：

3.1 微信测试公众号

可以通过微信提供的测试公众号进行测试，测试公众号具有所有的权限，具体使用看这里：微信测试号申请

3.2 微信公众平台接口调试工具

可以对上面的那个流程图中的接口进行调试：微信公众平台接口调试工具

3.3 公众号调用接口返回码对照

所有的返回码说明

3.4 JS-SDK官方demo

DEMO页面： http://demo.open.weixin.qq.com/jssdk 

示例代码：

http://demo.open.weixin.qq.com/jssdk/sample.zip

备注：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。

3.5 一定多看官方文档！

有问题就去查百度并不是一个好习惯，往上的答案五花八门，越查头越大。最好的办法是看官方文档。

3.6 推荐的教程

微信H5自定义分享接口，jssdk分享到朋友圈demo

ubuntu下安装配置apache2与php (由于我对php比较熟，所以用的php版本的代码，apache+php)

php7.2调用curl_init()报错解决方案