H5调用微信JSSDK开发总结

时间:2024-03-23 15:00:09

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

H5调用微信JSSDK开发总结

分享给好友是这样的:

H5调用微信JSSDK开发总结

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

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

H5调用微信JSSDK开发总结

H5调用微信JSSDK开发总结

 

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

H5调用微信JSSDK开发总结

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

H5调用微信JSSDK开发总结

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

1 公众号设置

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

H5调用微信JSSDK开发总结

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

H5调用微信JSSDK开发总结

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

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

H5调用微信JSSDK开发总结

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

H5调用微信JSSDK开发总结

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

 

3 一些其他事情 

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

3.1 微信测试公众号

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

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

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

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

所有的返回码说明

3.4 JS-SDK官方demo

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

H5调用微信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()报错解决方案