H5调用微信JSSDK开发总结

悠悠 2023-07-04 15:46 61阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70][]

分享给好友是这样的：

![20200212170001465.png][]

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

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

![20200212170649862.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 2][]

选择左边的”微信网页开发“ -> ”JS-SDK开发“：[https://developers.weixin.qq.com/doc/offiaccount/OA\_Web\_Apps/JS-SDK.html][https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_JS-SDK.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 3][]

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

### 1 公众号设置 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 5][]

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

这一块的详细逻辑可以看[官方文档][https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_JS-SDK.html]，我已经把整个的逻辑理了一下，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 6][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 7][]

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

### 3 一些其他事情 ###

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

### 3.1 微信测试公众号 ###

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

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

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

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

[所有的返回码说明][Link 5]

### 3.4 JS-SDK官方demo ###

**DEMO页面：** [http://demo.open.weixin.qq.com/jssdk][http_demo.open.weixin.qq.com_jssdk]

![format_png][]

**示例代码：**

[http://demo.open.weixin.qq.com/jssdk/sample.zip][http_demo.open.weixin.qq.com_jssdk_sample.zip]

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

### 3.5 一定多看官方文档！ ###

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

### 3.6 推荐的教程 ###

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

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

[php7.2调用curl\_init()报错解决方案][php7.2_curl_init]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200212165930119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5,size_16,color_FFFFFF,t_70
[20200212170001465.png]: https://img-blog.csdnimg.cn/20200212170001465.png
[Link 1]: https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html
[20200212170649862.png]: https://img-blog.csdnimg.cn/20200212170649862.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200212170627620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5,size_16,color_FFFFFF,t_70
[Link 2]: https://developers.weixin.qq.com/doc/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200212170231209.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_JS-SDK.html]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200212170359690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200212171926415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020021217204563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/202002121810523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200212175307159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5,size_16,color_FFFFFF,t_70
[Link 3]: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Requesting_an_API_Test_Account.html
[Link 4]: https://mp.weixin.qq.com/debug/
[Link 5]: https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Global_Return_Code.html
[http_demo.open.weixin.qq.com_jssdk]: http://203.195.235.76/jssdk/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXovUGlhanhTcUJSYUVJUXhpYnBMYnl1U0szOWRNVUpmV0tUVDN3NU81bWljaDBuYktucFBucGwwUXp1V3VuY0J0aWJpYVpRbG1IMU1HZjNIb2ljV05JZWFWNGRYVWcvMA?x-oss-process=image/format,png
[http_demo.open.weixin.qq.com_jssdk_sample.zip]: http://demo.open.weixin.qq.com/jssdk/sample.zip
[H5_jssdk_demo]: https://www.congblog.cn/1050.html
[ubuntu_apache2_php]: https://www.cnblogs.com/yshyee/p/10444865.html
[php7.2_curl_init]: https://blog.csdn.net/qq_26822029/article/details/104270907