0
下图是一张我们常见的微信分享的效果图片，我们几乎天天都能见到。但是，这个星期我们公司需要自己开发一下微信分享功能的时候，才发现这居然非常复杂。
微信分享
1
因为原始的微信分享链接的效果是这样的，没有图片，没有描述文字，只有一个标题和一段链接。
老板觉得难看，所以我们就需要去实现第一张图中的类似的效果。
原始的微信分享的效果
2
既然别人都成实现这个看上去很“简单”的功能，我们自然也要想办法做出来。第一个想法自然是立刻去别人的成功案例。
在搜索引擎上搜索了一番，找到了一篇解释的十分全面的文章——手把手带你使用JS-SDK自定义微信分享效果 - 归零back - 博客园。
于是我们就对照着文章中的方法一步一步去实现。
3
详细的过程就不说了，这篇文章中写的很详细了。我就总结一下“微信分享”这个功能的实现步骤和坑吧。
实现的步骤其实倒不复杂：
- 从申请的公众平台的账号中找到appId、绑定的域名等。这算是准备工作。
- 在前端的页面中引入实现微信分享的官方的js文件。
- 向在公众号中配置的服务器域名发送请求，获取当前网页的签名。
- 在服务器端用发送请求的页面、时间戳、随机数生成网页的签名，返回给前端页面。
- 微信的服务器比对页面收到的签名和微信服务器的签名是否一致。一致的情况下，前端页面调用微信官方的js文件的函数触发微信分享时修改图片和描述文字的函数。
4
看步骤的描述似乎并不复杂，但是难点着实很多。
- 发生分享动作的页面必须要在公众平台中绑定的域名中进行签名，但是绑定的服务器往往都是线上运行的服务器，所以需要通过花生壳网站的内网穿透工具实现。
- 但是实际操作中，花生壳似乎也不管用了。好在已经有前人的代码可以借鉴，跌跌撞撞，总算是签名完成了。
- 前端的页面中收到的服务器中返回的签名，微信官方检测说无效。只好拿到官方的检测页面比对，结果是正确的签名。
- 几经对比，发现需要分享的页面是需要用代码动态获取的，即使自己知道链接也不能直接写在代码中。
5
本来微信分享看上去是个很简单的功能，但是微信出于安全的考虑，做了非常多的限制。而我们作为傍着微信这棵大树而生的小草必须要严格按照他们的限制去编写代码。
很多时候，做一个功能出来很快。但是为了安全的考虑添加的种种保护和限制所需要做的工作会是前者的好几倍。
网友评论