微信JS-SDK签名接口的使用与开发

痛定思痛。 2023-10-11 16:12 14阅读 0赞

最近诸事缠身好久没有写文章了。前不久将与微信公众号有关的一些知识点进行了梳理，微信公众号开发过程中，用最多的就是微信js-sdk了。但是使用微信js-sdk需要获取签名、时间戳、随机字符串，等等一系列的参数，那问题就来了，这些参数是由后端提供能，还是前端自己获得呢？当然是先由后端获，然后向前端工程师提供一个接口，只不过这个接口返回的是jsapi\_ticket还是计算好的签名signature，这个就得由前后端工程师协商了，一般为了方便，我的做法是直接返回计算好的签名。

首先我们看一下微信公众号开发关于微信JS-SDK的使用说明，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_25_color_FFFFFF_t_70_g_se_x_16][]

一般来说，第一步由后端工程师完成，配置安全域名，微信规定只能在配置的域名下才能调用微信的JS-SDK，在哪里设置呢？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_27_color_FFFFFF_t_70_g_se_x_16][]

如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_29_color_FFFFFF_t_70_g_se_x_16][]

注意：填写的是域名而不是URL，URL是带协议的也就是带有http://,而域名则不需要。

之后是第二步，在页面中引入微信的js-sdk，这个无需多说。

第三步，通过config接口注入权限验证配置。

看起来很懵逼啊？什么是config接口，什么是注入权限，什么是验证配置...懵逼状态...,点开链接看到如图信息：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16][]

通过仔细阅读发现，当页面中引入了微信的js-sdk后，会在全局有一个wx对象，类似页面中引入了jquery会有一个$对象,道理一样。这里的wx对象上有一个属性为config，这个属性的值为一个函数，这个config函数也可称为接口。

那后面的注入权限验证配置又是什么呢？

注入权限验证配置指的是向config这个函数中传递上图显示的特定参数，然后调用这个函数，这个函数调用后会验证当前页面是否能使用微信的JS-SDK。

那我们来看看具体有哪些参数呢？如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_29_color_FFFFFF_t_70_g_se_x_16 1][]

一共6个：

第一个是开启调试开关的，开发环境一般设为true，上线后改为false；

第二个是微信公众号的appId；

第三个生成签名的时间戳，时间戳就是一串表示时间的数字，那这个签名是什么鬼呢，先不用管继续看

第四个生成签名的随机字串，随机串就是随机字符串，这里又提到了签名

第五个签名，问题来了签名怎么来的呢？？？

第六个需要使用的js的接口列表，这是干什么的呢？简单来说就是你需要使用微信js-sdk的那些功能，比方说调用扫一扫，相机，等等需要哪些功能就将代表其功能的字符串放进数组里面就可以了。

上面主要的疑问是签名如何来的？接着看文档，我们在查看第三步的时候，关于签名的信息，其实是有一个连接的如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 1][]

仔细看附录1，点开连接如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 4][]

文档很长，大家可以不用看，我来用最简短的话语来描述一下文档的信息：

第一 要获取签名的话，需要先获取jsapi\_ticket,

第二 要获取jsapi\_ticket的话要先获取access\_token

以上两步通常由后端工程师完成，完成后向前端工程师提供一个接口，前端工程师，通过请求接口可以得到jsapi\_ticket,然后根据文档的签名算法计算出签名。

但是为了方便，一般计算签名这一步骤也由后端工程师来完成，前端工程师直接请求签名接口从而获取签名、时间戳、随机字符串、等一系列信息。

本片文章的标题为：微信JS-SDK签名接口的使用与开发，前面主要讲微信JS-SDK签名接口的使用，如果只是使用的话前面的文章基本够用了，那么下面将要讲的就是微信JS-SDK签名接口的开发了。

我们要设计三个接口：

第一个请求接口返回access\_token；

第二个请求接口返回jsapi\_ticket

第三个请求接口返回signature也就是签名，当然还有一些列的其他信息，appid、时间戳、随机字符串。

首先我们看关于获取access\_token的文档：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 6][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 7][]

写的很详细，但是也很啰嗦，这里我挑重点用大白话给大家解释一下：获取access\_token需要用get请求方式请求一个url地址，并且需要传递三个参数：grant\_type、appid、secret。grant\_type是固定值"client\_credential"，appid和secret在微信公众号后台可以看到。

然后再看响应参数:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 8][]

access\_token和expires\_in，前者为获得到的access\_token,后者为此次获取的access\_token可以缓存的时间。啥意思呢，就是说，在第一次获取access\_token后，expires\_in时间内不需要重新获取access\_token，可以直接使用缓存的access\_token这说明咱们可以将access\_token存储起来，在需要使用access\_token时，先判断时间有没有过期，没过期直接取出存储介质中的access\_token，过期的话重新请求access\_token，之后更新过期时间，更新存储介质中的access\_token,获取access\_token的流程图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_24_color_FFFFFF_t_70_g_se_x_16][]

这里代码演示用的是存储到本地json文件中，没有使用[数据库][Link 1]，数据量很小，真实项目中，也可以使用本地[文件存储][Link 2]。首先实现两个功能函数，读取文件和写入文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 9][]

然后是获取access\_token的方法，这里将获access\_token分离成两个函数,将直接从微信服务器获取access\_token抽离成getNewToken函数：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 10][]

到这里access\_token就获取完成了，下面就是获取jspai\_ticket了，看官方文档：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 11][]

照样很啰嗦，简单来说就是向另一个url发送get请求，带上参数access\_token和type，type是固定的值"jsapi"，access\_token就是上面获取的access\_token;拼接完成的url如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 12][]

返回来的参数为一个对象有四个属性,如图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_33_color_FFFFFF_t_70_g_se_x_16][]

主要两项：ticket和expires，ticket就是要获取的jsapi\_ticket,expires\_in是缓存时间，这个ticket也可以缓存7200秒，所以ticket的获取流程和access\_token大体是一样的，只不过，多了一个判断,判断access\_token是否过期。因为ticket的获取依赖access\_token,所以ticket的获取流程图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_27_color_FFFFFF_t_70_g_se_x_16 1][]

代码实现如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 14][]

和access\_token的获取方式一样，也是分为了两个函数，只不过在getTicket函数中多了一步请求access\_token的异步操作。

到目前为止我们已经获取了ticket，此ticket也可以以接口的形式返回给前端。

最后一步就是计算签名了，看一下签名的文档：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 16][]

这里大家先仔细读一下，我就不带着大家读了，直接总结要点：计算签名需要几个参数：

1、noncestr（随机字符串）,

2、有效的jsapi\_ticket,

3、timestamp（时间戳）,

4、url（当前网页的URL，不包含\#及其后面部分）

我们先实现获取timestamp和noncestr的函数：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_28_color_FFFFFF_t_70_g_se_x_16][]

然后需要ticket，ticket上面的代码中已经获取到了，那url呢，这里就需要前端向后端传递数据了，这里是开发中获取signature接口api的代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 17][]

首先获取前端传过来的url，而后获取时间戳与随机字符串，然后将以上几项按照键值对的形式连接，注意顺序是固定的的，然后对字符串进行sha1加密，这里加密用的是crypto这个库，也可以直接用npm安装sha1库，直接调用sha1库的方法加密，加密之后，获得的就是签名了，最后将签名、时间戳、随机字符串、appid以json的形式返回给前端。

下面是综合前后端分离模式下，获取ticket的流程图：

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_29_color_FFFFFF_t_70_g_se_x_16 2][]

--------------------

到此微信js-sdk的前世今生就解释完了，不知道屏幕前的你有没有一丝收获。有疑问的话，欢迎留言，我是你们的好朋友巷里人，一个专注nodejs全栈开发的程序员，还在探索的路上，相信你也是，大家一起共勉。

好久没有写这么长的文章了，最近也是诸事缠身，万望大家谅解。

项目代码已上传github，点击原文链接，链接到github。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_25_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210825104826972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_25,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_27_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210825104914783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_27,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_29_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210825105027495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_29,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2021082510510158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_29_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/20210825105116195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_29,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/20210825105134324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/20210825105235149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/20210825105255611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/20210825105307655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/20210825105344660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/20210825105354357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/20210825105414380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/2021082510551835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_24_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210825105621364.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_24,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://cloud.tencent.com/solution/database?from=10680
[Link 2]: https://cloud.tencent.com/product/cfs?from=10680
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/20210825105651150.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/20210825105705716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/2021082510572922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/20210825105750760.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_33_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210825105800131.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_33,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_27_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/20210825110108192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_27,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/20210825110138568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/20210825110201192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/20210825110229351.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/20210825110252802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_28_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210825110318117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_28,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_32_color_FFFFFF_t_70_g_se_x_16 17]: https://img-blog.csdnimg.cn/20210825110336832.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_32,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55uP6Iy25L2c6YWS_size_29_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/20210825110407744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA55uP6Iy25L2c6YWS,size_29,color_FFFFFF,t_70,g_se,x_16